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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add Code in main-product.liquid – 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)

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 – Fourth Step:

Now edit “global.js” file and add this.filterMedia(); on line number 769 (Dawn 6.0.2 and Dawn 7.0.0). After adding this code add following JS function in “global.js” file on line number 774 for Dawn 6.0.2 and line for Dawn 7.0.0 line number is 778:

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.

Show only selected variant images when page is initially loaded

Add the below code in main-product.liquid file on the same line where you added thumbnail-color=”{{ media.alit }}”

{% 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 - (130 votes)

About

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

Leave a Comment

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