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

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.alit }}” 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 - (191 votes)

About

admin

admin

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

  1. Matt

    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 }

    Reply
          2. Kritika

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

          3. Kritika

            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)

          4. admin

            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!

    2. Denish

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

      Reply
  2. Mark

    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

    Reply
      1. Steve

        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?

        Reply
  4. Eryn

    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 🙂

    Reply
  7. shawn

    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

    Reply
  8. sidhant

    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.

    Reply
  9. Jourdain

    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???

    Reply
  10. Drim

    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?

    Reply
    1. admin

      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

      Reply
  11. Oliver

    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?

    Reply
    1. admin

      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

      Reply
  12. Jason

    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?

    Reply
      1. K

        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

        Reply
  15. Hylarie

    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

    Reply
    1. admin

      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

      Reply
  19. Jason

    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”?

    Reply
  20. Christy

    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.

    Reply
  21. Lazar

    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.

    Reply
  22. Lazar

    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

    Reply
  24. Jordan

    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.

    Reply
  26. Edward

    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.

    Reply
  27. Ashu

    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

    Reply
  29. Jeff

    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?

    Reply
  32. Fetra

    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

    Reply
  33. Wouter

    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

    Reply
  34. LK

    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.

    Reply
  35. Nishit

    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?

    Reply

Leave a Comment

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