How To Show Only Selected Variant Images – Shopify Taste 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 Taste Theme. This is a great way to highlight your most popular items or featured products. Let’s get started!

Show Only Selected Variant Images – Taste Theme

Add Code in main-product.liquid – First Step:

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

line no. 67
line no. 116
line no. 155

Add Alt Text on All Product Media Gallery – Second 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 – Third Step:

Now edit “global.js” file and add this.filterMedia(); on line number 764. After adding this code add following JS function in “global.js” file on line number 772:

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

filterMedia() {
    
         $('[thumbnail-color]').hide();
    
    var selected_variant = this.currentVariant.featured_media.alt;
    
    var selected_attribute = '[thumbnail-color="' + selected_variant + '"]';
    
    if (selected_variant == selected_variant) {
      
      $(selected_attribute).show();

    } }
1.9/5 - (14 votes)

About

Leave a Comment

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