This Article:
If you’ve added products to your Shopify website and included gallery images, you likely noticed by default Shopify shows every single thumbnail. This short tutorial shows you how to use a small bit of CSS and jQuery to hide all of the thumbnails, and show only a couple product thumbnails and hide the others in Shopify.
Difficulty:
Requirements:
- SHOPIFY
- CSS
- jQuery
Editing your code files
Navigate to your theme code files and select your assets folder. If you haven’t already, create two new files:
- custom-styles.css
- custom-scripts.js
If you already have your own custom stylesheet and script files, you can skip ahead. If you are creating these files in your assets folder for the first time, you will need to link them in your theme.liquid file so they can load.
Navigate to your Layout folder and select theme.liquid. Add the code in your <head> tag, just after your meta tags like the example below.
theme.liquid code:
<link rel="preload" href="{{ 'custom-styles.css' | asset_url }}" as="style">
<link rel="preload" href="{{ 'custom-scripts.js' | asset_url }}" as="script">
Open your custom-scripts.js file
Add the following code to your custom-scripts.js. What we’re doing here is appending a class named product-thumb- and then adding a unique number to each of them (starting at 1) so we can target the thumbnails individually with our CSS stylesheet.
jQuery(function($){
/* Gallery Slider */
$('.product-single__thumbnails-slider-track').find('.product-single__thumbnails-item').each(function(i){
var num = (i%100) + 1; // mod function - returns the remainder
$(this)
.addClass('product-thumb-' + num )
});
});
Open your custom-styles.css file
Add the following code to your custom-styles.css. What we’re doing here is hiding all of the thumbnails, then we’re showing the thumbnails we want by adding display: block and including the number of the product thumb you want to show.
.product-single__thumbnails-item {
display: none;
}
.product-thumb-1, .product-thumb-2, .product-thumb-3, .product-thumb-4 {
display: block;
}
Open your custom-scripts.js file
Add the following code to your custom-scripts.js. What we’re doing here is appending a class named product-thumb- and then adding a unique number to each of them (starting at 1) so we can target the thumbnails individually with our CSS stylesheet.
jQuery(function($){
/* Gallery Slider */
$('.product-single__thumbnails-slider-track').find('.product-single__thumbnails-item').each(function(i){
var num = (i%100) + 1; // mod function - returns the remainder
$(this)
.addClass('product-thumb-' + num )
});
});
Open your custom-styles.css file
Add the following code to your custom-styles.css. What we’re doing here is hiding all of the thumbnails, then we’re showing the thumbnails we want by adding display: block and including the number of the product thumb you want to show.
.product-single__thumbnails-item {
display: none;
}
.product-thumb-1, .product-thumb-2, .product-thumb-3, .product-thumb-4 {
display: block;
}
Locate your product thumbnail number
To see which number is associated with your thumbnail simply navigate to your product page and right click on one of your thumbnails then select inspect. You should see the class product-thumb-1, product-thumb-2, etc. within the code like the example shown here.
That’s it! Save your files and navigate to your product page.
It’s magic time! Navigate to your product page and if you’ve added your gallery images to your product, you should see only 4 product thumbnails! This method works really well with variants, and will also show the product variant when clicked on.
That’s it, have fun!
