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

Show Only Selected Variant Images – Dawn Theme

Add Code in Theme.liquid File – First Step

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

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

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

showing media alt text dynamically

 

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 “global.js” file and add this.filterMedia(); on line number 754. After adding this code add following JS function in “global.js” file on line number 774:

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

4.5/5 - (32 votes)

About

19 thoughts on “How To Show Only Selected Variant Images – Shopify Dawn Theme”

  1. Hello,
    the code is not working as it should be. Instead, when clicking on the “color” button, all images disappear.
    Do you know what is not working?
    Also, be aware that in the fourth step of the code you shared it seems that a closing brace is missing }

          1. The same problem as above – after following through all the steps. Can you please help?

          2. This is the error I see on the console :
            global.js?v=165359642946671888111652893334:779

            Uncaught TypeError: Cannot read properties of undefined (reading ‘featured_media’)
            at VariantRadios.filterMedia (global.js?v=165359642946671888111652893334:779:48)
            at VariantRadios.onVariantChange (global.js?v=165359642946671888111652893334:754:10)

          3. Hi Kritika,

            It looks like you have not selected featured images in Variant. Where you have option to edit Shopify variants please select featured image like this https://i.imgur.com/QnZpueB.jpg

            Let me know if you still need more help.

            Thanks!

    1. Uncaught TypeError: Cannot read properties of undefined (reading ‘featured_media’)
      at VariantRadios.filterMedia Error found Please Solve This.

  2. How do you get this to work when the product page is initially loaded? It’s not clear to me where the product page is initialized in the global.js

      1. Hi Mark – I’m having the same problem you describe here. How did you go a bout getting the variant images to filter properly on page load?

  3. It was because I placed the code this.filterMedia(); over this. updateMedia(); I forgot to hit enter then add the code this.filterMedia(); as a new line

Leave a Comment

Your email address will not be published.