How To Show Only Selected Variant Images – Shopify Dawn Theme

For Dawn 13.0.0 Checkout This Blog Post

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 the 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 liquid file – Second step:

Add thumbnail-color=”{{ media.alt }}” as shown in the screenshot below in main-product.liquid:
Line no. 67 – main-product.liquid (Dawn 6.0.2)
Line no. 108 – main-product.liquid (Dawn 7.0.0)
Line no. 108 – main-product.liquid (Dawn 7.0.1)


Add thumbnail-color=”{{ media.alt }}” as shown in the screenshot below in product-media-gallery.liquid:
Line no.94 – product-media-gallery.liquid (Dawn 8.0.0)
Line no.94 – product-media-gallery.liquid (Dawn 11.0.0)

thumbnail-color="{{ media.alt }}"

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:

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

Add JS code in global.js – Fourth step:

Now edit “global.js” file and add this.filterMedia(); 
Line no. 769 (Dawn 6.0.2)
Line no. 769 (Dawn 7.0.0)
Line no. 813 (Dawn 8.0.0)


Now add the following JS function in “global.js” file.

Line no. 774 for Dawn 6.0.2
Line no. 778 for Dawn 7.0.0
Line no. 821 for Dawn 8.0.0

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();

    } }

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

Make it work when on page load

Add the below code on the same line where you added thumbnail-color=”{{ media.alt }}” in the second step.

{% if product.selected_or_first_available_variant.featured_media.alt != blank and product.selected_or_first_available_variant.featured_media.alt != media.alt %}style="display: none"{% endif %}
4/5 - (215 votes)

About

107 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. Hello,

    Works well for me! Thank you. However, initially clicking into a product, it shows all the variant images (When a colour variant has been automatically selected). It’s only when the user manually selects a variant option, that all the other variant images disappear.

    Please help.

    Thanks 🙂

  4. 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

  5. I need your help as i have filled every codes properly even i am facing the same issue. i have checked it well but still the image are creating chaos.

  6. 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();

    } }
    When i paste this code the part of seleceted_variant and the selected_attribute will not turn color green its stays blue
    what can i do???

  7. Hi

    Thank you very much for the useful guide. I have followed all steps, but for some reason when initially clicking into
    a product, it shows all the variant images. What to do?

    1. It’s not supposed to work when the page loads, it only works when you click variations. But it’s doable by adding a small check

  8. Hi

    Thank you very much for the useful guide. I have followed all steps, but for some reason when initially clicking into
    a product, it shows all the variant images. What to do?

    1. It’s not supposed to work when the page loads, it only works when you click variations. But it’s doable by adding a small check

  9. Very cool instructions. Thanks for the effort you put into this!

    This works great for the stacked thumbnails. Would it be easy to apply the same logic to the standard thumbnails or the thumbnail carousel?

      1. Hi, I’m confused. How is it tested up to 6.0.2 and you state above that it works for 8.0?
        ajite.store /
        password: littlehippo774

  10. Hello, I followed all instructions with your video but instead of showing images for each variant, it hides the image for other variants but all image appear for the first variant only

    1. Try changing the position of this.filterMedia(); move it down a few lines and check if it works. Also make sure you see Alt Tags when you click alt text

  11. In the global.js code, what is the purpose of the “if” statement? Isn’t that particular query always going to be true?

    This…

    filterMedia() {
    $(‘[thumbnail-color]’).hide();
    var selected_variant = this.currentVariant.featured_media.alt;
    var selected_attribute = ‘[thumbnail-color=”‘ + selected_variant + ‘”]’;
    $(selected_attribute).show();
    }

    …seems to work just fine for me.

    I could be totally wrong. I’m definitely not a JS pro, but aren’t you basically asking, “if x == x”?

  12. Unfortunately after repeated effort on Dawn Theme 7.0.1 with this code (obviously not using same lines) as it isn’t the exact same, doesn’t work. Did not appear as an attribute in the inspection check. Frustrated with Shopify for not having this as standard and having to force users to chase YT videos for help.

  13. The colors of the images are changing but the first product image does not change unless you refresh the page.I selected variant feautered images and my dawn is 7.0.1.

  14. The colors of the images are changing but the first product image does not change unless you refresh the page.I selected variant featured images and dawn is 7.0.1

  15. For anyone having issues where the images show on page load, but when you select another one it goes blank, make sure that when you copy the code with quotation marks, that you re-do them. When you paste from wordpress, they paste in backwards/upside down/not sure, but fact is they need to be changed and then the images will show correctly. Hope this helps someone.

  16. Really important! Make sure the function call this.filterMedia(); is put BEFORE this.updateMedia(); to calculate the total number of variant images correctly for the image caroussel on mobile.

  17. The colors of the images are changing but the first product image does not change unless you refresh the page. I selected variant featured images and Dawn is 8.0.0

  18. I’m updating to Dawn 8.0. The first/main product image keeps showing in the 3rd slot when I change colors. But when I refresh, it goes away and the page is perfect. How do I fix that?

  19. Thank you for your tutorials because it helps a lot, it works well when you click on each variant but I would also like that on the first page load only the images linked to the variant are displayed

  20. Hello! I tried to make it work on DAWN 9.0 but i got some issues. Is someone else also experiencing this problem? Or should it work like the 8.0.0 patch?

    Kind regards,
    Wouter Simons

  21. Variant works. But when i load the page at first, it only shoes one image . After i start clicking on the different variants it works.

  22. Hi, The code is not working in the latest 9.0.0 version of DAWN theme. When I click on the colour tab, the product disappears. Can you please help?

  23. Hello, I am trying to follow the steps for Dawn theme version 9.0 and it does not seem to work. I am stuck on step 2 and cannot locate the appropriate line to insert “humbnail-color=”{{ media.alt }}”

    I have tried manually searching with strings such as “{%- for media in product.media -%}” & others for proceeding / following code so that I can locate the exact place to insert “humbnail-color”, however cannot find it. It appears Dawn 9’s main-product.liquid has a different structure.

    Kindly advise

  24. Great step-by-step instruction, easy to follow. Thanks for the guidance!
    Unfortunately, this approach doesn’t work with thumbnail carousel, which is the most common product variants layout. It would be great to have a version of code for this case.

  25. Thanks so much for the explanation, i’ve been looking for the solution and I found it, really appreciate.

    Currently I am working on DAWN 11.0.0 theme. The adjustment (based on DAWN 9.0.0) works well in the “Stacked” and “2 Columns” layout.

    If the layout is changed to “Thumbnail” or “Thumbnail Carousel”, the adjustment does not work well. All images are shown however.

    Can you provide the adjustment method for “Thumbnail” and “Thumbnail Carousel”?

    Thank you.

  26. Great step-by-step instruction, easy to follow. Thanks for the guidance!
    Unfortunately, this approach doesn’t work with thumbnail carousel, which is the most common product variants layout.
    It would be great to have a version of code for this case.

Leave a Comment

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