How To Show Only Selected Variant Images – Shopify Debut Theme

Do you want to show only selected variant images on your Shopify store? In this tutorial, we’ll show you how to do just that using the Debut theme. This is a great way to highlight your most popular items or featured products. Let’s get started!

Show Only Selected Variant Images

Add Code in Theme.liquid File – First Step

Add following code below <head> in “Theme.liquid” file

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add Code in Product-template.liquid – Second Step:

Add thumbnail-color=”{{ media.alt }}” as shown in the screenshot below:

show only selected variant images

Add Alt Text on All Product Media Gallery – Third Step:

Now the second step is to Alt Text as per the color variation of your product.

Dashboard -> Products -> Edit Product
On the Edit Product screen you will see the Media section just like the screenshot below:

media section shopify dashbaord

Click on all the media images and add Alt Text as per the screenshot below:

adding alt tags - shopify products

Add JS Code – Fourth Step:

Now edit “theme.js” file and add this._filterThumbnails(variant); on line number 766. After adding this code add following JS function in “theme.js” file on line number 786:

 _filterThumbnails: function(variant) {
      
      
      $('[thumbnail-color]').hide();

if (variant.featured_image != null && variant.featured_image.alt != null) {
  
  var selected_color = variant.featured_image.alt;
  var thumbnail_selector = '[thumbnail-color="' + selected_color + '"]';
  
  $(thumbnail_selector).show();
  
}	
else {
$('[thumbnail-color]').show();
}

},

Make sure to include jQuery on your Shopify theme. Once done you should be able to see only selected variant images.

2.3/5 - (23 votes)

About

11 thoughts on “How To Show Only Selected Variant Images – Shopify Debut Theme”

  1. Hello! Thank you so much for the tutorial. Do you have any tips on how to do this with the Pipeline theme? Everything worked perfectly until the fourth step.

  2. Having and issue where none of the variant thumbnails are showing on selection of the variant, Only the featured image. Just blank space underneath.

  3. Great tutorial, but unfortunately it’s also not working for us. We are using gempages and the Debut theme, but I’ve noticed the chrome inspection shows multiple “div class” hosting the image, and not “li class”. Is this something we are doing wrong, or a gempages issue? Any tweaks to work with gempages?

Leave a Comment

Your email address will not be published. Required fields are marked *