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.4/5 - (158 votes)

About

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

  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.

Leave a Comment

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