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:
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 %}
61 thoughts on “How To Show Only Selected Variant Images – Shopify Dawn Theme”
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 }
Thanks for pointing our mistake, issue has been fixed
Same problem, how can I do?
Can you please explain your problem in more detail?
Thank for your answer.
Maybe if you look at my shop you will better understand :
https://contact-2612.myshopify.com/
password: meotao
Thank you very much
The same problem as above – after following through all the steps. Can you please help?
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)
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!
Will you specify where this } brace is missing as iam facing the same issue. i have filled the codes properly.
Code has been updated, please check now
Uncaught TypeError: Cannot read properties of undefined (reading ‘featured_media’)
at VariantRadios.filterMedia Error found Please Solve This.
This is because you have not selected Variant Feature Images
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
Nvm… I figured it out
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?
Steve, you got it to work?
Hey @Mark, can you help with where the page is initialized in global.js?
one of my image which is first image pf my product page appears in every variants?
You missed adding alt attribute
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 🙂
Please share complete details via email [email protected]
Code is not Working.
Please share complete details of the issue so we can help
The colors of the images are changing but the first product image does not change unless you refresh the page
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
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.
Sure, please email [email protected] for paid support.
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???
Please share store URL so we can check what’s the issue
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?
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
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?
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
Can you please share how it can work on page load?
Code already added in the blog post, please check last code snippet
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?
Yes it should work standard thumbnails other type with a small modification in Liquid code
Can I get the code so that thumbnail layout works?
im having trouble on 4th step when i paste the last thing, i click on the blue variant but the image of the orange doesn’t disappear and the blue one doesnt pop up
Please share your store URL so we can check the issue
It’s not working. Didn’t hide variants’ images and Show images depends on Variants
Please share your store URL so we can check the issue, code is tested up to Dawn Theme 6.0.2
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
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
I always appreciate the great guidance.
What should I do for thumbnail cursors?
What would be the code in case of thumbnail carousel ?
please how to swatches products listing to variants of other product ?
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”?
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.
Hi Christiy,
It’s being test on Dawn 7.0.1 make sure to test it with fresh theme which will help you understand where to place the code. if still need any help contact us @ [email protected]
Thanks!
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.
Code for this featured has been added in blog post
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
Code for this has been added, please re-check blog post
Hi, can you do this also for the Sense theme? Thank you!
Same code should work in Sense theme too if it does not please let us know
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.
Thanks for contributing to the community
hello, thank you for the Video. But it doesn’t work with the Carousel Layout. can you help me?
It is not supposed to work with Carousel layout unfortunately
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.