Shopify Multiple Variant Images - (How to Display Images Specific to the Selected Variant)
ฝัง
- เผยแพร่เมื่อ 17 ต.ค. 2024
- A step-by-step guide for displaying variant-specific images on Shopify. (without paying for Apps) Shopify Tutorial for beginners.
► Offers & Help
--------------------------------------------------------------------------
🌟Learn the JavaScript side of Shopify Development:
codingwithjan....
👨🎓Learn Shopify Development from Scratch:
www.codingwith...
👨💻Find a reliable Developer for your project:
www.codingwith...
► Contact
--------------------------------------------------------------------------
🌐 Website
codingwithjan.com
🤝 LinkedIn
/ jan-frey
► SEO Description
--------------------------------------------------------------------------
If you're running an e-commerce store on Shopify, you know how important it is to have high-quality images of your products. However, when it comes to products with multiple variants, such as different colors or sizes, it can be a bit tricky to display the right images for each option. In this Shopify development tutorial, we'll show you how to group different images for a single variant and only display the thumbnails of the selected option on the product page. This will not only enhance the user experience but also boost sales by providing a clear visual representation of the product.
In this development tutorial, we'll introduce a filter function that will only display certain image thumbnails for a certain variant. This means that when a customer selects a specific color or size, only the images associated with that variant will be visible on the product page.
In conclusion, this tutorial will help you to take your Shopify store to the next level by showing you how to assign multiple images to variants, without the need for any additional apps. By providing customers with multiple images of a product, you can improve the product presentation and increase conversions. This feature will enhance the user experience and help you to drive more sales on your store.
codingwithjan.com
![How To Show Selected Variant Images [Dawn 15.1.0]](http://i.ytimg.com/vi/uDjviY12SiU/mqdefault.jpg)
![How To Show Selected Variant Images [Dawn 15.1.0]](/img/tr.png)
![How to Add Color Swatches on Product Page Shopify [DAWN V15] 2024 Latest](http://i.ytimg.com/vi/6AYzxcMLpOU/mqdefault.jpg)
🌟Learn the JavaScript side of Shopify Development: codingwithjan.com/javascript
👨💻Find a reliable Developer for your project: www.codingwithjan.com/hire-a-developer
I did everything and stil have to refresh the page before the images show up. How can I fix this
yees here tooo. thanks a lot!
It works only for default shopify theme? Can we also make the adjustments on other payed shopify themes as well?
This takes too long. I want an app that manages this seamlessly. It's annoying that Shopify doesn't allow you to just click the variant and add the images internally.
I f***g agree with you. Spinning my head arround for 2 weeks now
@@KaizenClipexactly I think its stupid asf
So there isn't an app?
@@Acostajmarlonany found?
@@destrabtw haven’t found any my friend :(
Hello, thanks for the great tutorial. Really useful, please continue your great work educating us, newbies, on how to achieve these things.
Regarding this issue, i have a question for you. As you know, nowadays people are getting more visual and their searches are done a lot in the images section of search engines, instead of searching for pages. The Alt Text of the images is one the most important fields to insert SEO relevant information that leads people to our stores through the images they find.
So, is there anyway to use the Alt Text field to create this solution, which is using the Alt Text just for one word with the color we want, and also allowing us to insert our SEO friendly description of the image?
Again, thanks for your support and tutorials. Keep up the great work.
That's my evening sorted. Looking forward to giving this a go. Thanks Jan and Josie :)
Some good night Javascript 😄
hi Jan great video I can not find product__media-item anywhere in my coding I looked single handily for 2 hours and kept typing it in I'm on the sense theme does that affect it? I don't understand why it doesn't pop up
nor do i
Sorry, just to clarify. I have items that have variations and items that are without variations. In this case would this only apply where it display image specific to selected variant, but if the item does not have any variant. It will still show everything?
Hi jan. Im using the sense theme. I go to inspect on my website then I go to my product liquid code but I cant find the code from the inspect in my liquid. Why do you think this his happening. None of it is there. A reply would be great
same
I tested it...only problem is when the product loads, 'onVariantChange' is not firing when product loads on clicking of collection page. This leads to only single image getting loaded for the default variant color. When you click on other color swatch, all images of that color appears. Any resolution to this bug would be higly appreciated ?
This is a very good video & I apply this to my store but it's working only in images stacked layout. If I select carousel layout it's not working properly & in other layouts. kindly share a video in which the variant switcher work dynamically on every layout. thank you
Hi, this video is exactly what i was looking for but for some reason when i copy the product_media-item there is no highlights and showing of this variable in the code is there anything that could help this please?
hello i dont have product_media-item but i have product_media-gallery - will it work the same?
Hi how are you? How can i apply this rules only to a selected product collection, but others collections or products that doesnt need this multiple variants dont get affected by these rules?
Any chance you make a video showing the variant metafields way that some have mentioned? Then you could talk about the differences and pros/cons and then we could make our own decision on which version we would implement? I just like knowing all the possibilities. Thanks!
This is the traditional way achieving this and there are SEO & accessibility implications to it that others have pointed out
I would have loved to see using Variant Metafield Lists with the File Reference (Image) type to achieve the same effect but in a cleaner way
Hey Max, I think you're right, using variant meta-fields would have been a bit cleaner!
At the same time, also a bit more complicated, cause you'd also have to make them available on the current_variant JS object.
So that was kind of the comprise here for a simpler solution, but still agree with the above 👍
As always, great tutorial Jan! Any chance you can do one about deploying each product variant (e.g. color) as a unique product card on the collection page?
th-cam.com/video/BOzriUyMXno/w-d-xo.html
This is only working for Color Variant. If there are different images for Size Variant to display, it will not work. Would be great to have an example for it. Thank you anyway for this detailed tutorial, Jan!
Hi,
Daw theme version 11.0 does not have the same code, I find myself unable to do this modification without expertise.
Would you do an updated version or send reference for it?
Thank you
Hi nosxing,
thanks for the feedback / video suggestion.
I'll forward this to Jan and if it makes sense we can def add it to the list of video topics!
Best,
Joy (Team)
We got it to work on Dawn version 11.0 - see comment above!
Great tutorial, thank you Jan. Just one thing, further modification is needed for this to work on mobile as well.
Superb tutorial Josie you nailed it.
Came back to your channel after some months and I loved the interaction of Jan Frey but He is doing other great stuff 🙌
im on dawn theme and the very first step doesnt work
when i go to search for the class in the main product liquid, nothing shows up
the product__media-item doesnt exist
has shopify changed something? can someone help at all?
thanks
I am having the same issue, I cannot find product__media-item, I'm using Dawn 9.0
@@nizar7292 any update on this one?
i think its in product-media-gallery
When previewing the product (using a modal with a resize function), all of the images are shown without the filter function. Is there a way to fix this?
Ive had to use other function names in my theme but it feels so good, having such a slim solution to a problem, I would normally have to install a plugin for.
what theme you used?
Hi there, does this work for Dawn 12.0.0? Finding the code in product-media-gallery liquid, but can't make it work. Super thanks!
did they move this somewhere else in version 12? I cannot find that class product__media-item.
Hello, I used this code for studio theme. It is working perfectly well on laptop. However, on the mobile, all the variant images are being displayed as a slider. Can you please help me fix this? Thanks in advance!
yes, same here but ok on mobile (altough it keeps displaying the first variants image too) and on desktop does not work :(
Very Very Informative!
Can same be done with thumbnail carousel ? If yes, can you please make a video for that.
Hey Jan, i just implement this code on Dawn 8.0, it showing only in " stacked view". please make a video or instruct in your code that how we cam implement it according to selected thumbnail view setting, i.e i want same color variants images display in "thumbnail slider" only. as of now my thumbnail slider showing all the product images and just above that , it is showing stacked selected variants images, which is look really bad.
kindly change the code accordingly so that we get selected variants image output in thumbnail slider only or according to thumbnail settings( stacked, thumbnail, thumbnail slider), just like by default it showing all images.
i hope my message is clear.
Why use a additional attribute rather than including a special class similar to "{{media..alt}}-variant" And then use that in the JS to target what to show hide?
Hi Jan, I have implemented your solution in Studio 12.0.0 , it worked and showing only variant images on selection of colors , but when i am clicking on Image for Zoom then in Zoom section it displaying all images of other variants as well. I tried to fix in product-media-modal.liquid file and it worked but when selecting other variant and click on zoom then it showing previous variant image. Can you please help ?
I have a question about displaying global images on our store. Let's say we have two shirts, one in red and another in green. Instead of showing the color of the shirt, I want to display a picture of 100% cotton material that applies to both shirts. I would like to display the red shirt image when a customer selects the red shirt and the green shirt image when the green shirt is selected. However, I want the global images to appear after the featured image.
Currently, I am duplicating the images on the site by adding ALT texts to two sets of global images. Do you have any suggestions on how I can achieve this without duplicating images?
Great question! This could potentially be built into the filter logic. I'd need to test around here a bit myself, and that'd be a bit too complicated for a TH-cam comment. But in theory possible. 😄
Hello, I'm working in Dawn 11.0.0, can't seem to find the code there. Any chance you know how to fix it in this version of Dawn?
Everything works great but when I click on a different variant the pictures don't load, and not even when I refresh the page. I have to go back to the Products tab and to the product, then switch the variant order, I only have two for this product, so that the next variant loads first, but then the pricing is wrong if the variants have different prices too.
look, there is a store that I made through shopify and there is a product, this pillow, the problem is that I want the first photo as soon as the user enters the page to have a certain photo, but the problem is that the first photo that is on the page is a version of the pillow, there is gray and white and white gray, how to make what was the photo that I want and not pillow options?
I am working in Trade Theme. How to apply these changes there ?
Great tutorial. Is there a way to change the products collection image based on the website language ?
I'd need to double-check this myself. Potentially with some custom code modifications and Shopify markets.
Thanks Jan and Josie for a very helpful video. Is there an alternative way of achieving this without having to populate the image alt text field with variant identification info? My Dawn2.0 theme uses similar .js code to solve this variant image only rendering problem, but I'm concerned, from an SEO pov, that I can no longer use my image alt text fields. Thanks
Can we display variants more than shopify default limit without any app?
Usage of app is select variant can not display its image on the feature box
I want to do without app
Is there possible any solution?
This is an excellent video and appreciate. Can we achieve same effect with metafields? Please edit this video and add before 0:35 that one has to keep the customisation in 'Product' page as 'Stacked' - thumbnail, 2 column, thumbnail carousel will not work.
Hey great stuff thank you so much. I only have a small problem in my store I have three color options available. Two of the images work when I select them, but when I hit the third option no image appears? What can I do?
How to group the image base on the color and also base on the size. Sample if Some one click red it will show red but then when someone click small only images for the red , small variant will show, smae with red and medium, and so on to other variant
what if i want to do this for 50 products. do i have to do all of this for every product seperadet?
Hi Jan. Will this work on Trade V15? Been looking for a tutorial for this new theme and all doesnt work for V15 😔😔
It greatly depends on the exact theme code, and would need to look into this a bit too!
Chances are the theme is slightly different though, so the code would need to be adjusted
Excellent video! Thank you so much. It works perfectly when the Desktop layout is on "Stacked". I guess it needs some adjustment to make it work with Thumbnails or Thumbnail carousel.
absolutely looking for the same
So i used this tutorial to try and have the images change based on the size function... I don't think it works the same way? I would love a video showing how to have the images change based on the size selected
Great video Jan [as always]! We here at Clean Canvas have provided this in several of our themes for some time now and it is indeed a very popular element with merchants. Hope to see you again soon - Marcus!!
keep on uploading these detailed and informative videos, there aren't many sources to learn Shopify out there beside doc
More to come!
is it up to date? can I use for Dawn 15
I can't find product media in main-product liquid on the dawn theme
Same issue... I've got a media toggle image, and searching for it yields nothing.
Using alt is not the wisest thing, because it’s semantically not good (especially for accessibility and SEO). Or use a way to select if the given color is present in the alt text instead and build a proper alt description containing the color.
yes you're right, the cleanest way would be variant meta fields, which is a bit more complicated to implement.
So compromise of good working solution / vs complicated 100% clean. Let's call it 80/20 Pareto 😄
@@CodingWithJan maybe you got the wrong comment! I didn’t say you needed metafields but rather a proper alt tag that represent the actual content of the image and would contain the color. It would cover the SEO and accessibility aspects of your image and you could still target the alt if it contains the word RED or BLUE or whatever. Like « Red T-Shirt with mountains and a sunset », per example.
@@AmedeeBoulette you're right that can be done very easily and SEO optimized and no issues of accessibility 💯
I might be a noob but unfortunately not getting the product__media-item in my theme Refresh.
Can someone help me with this?
Would this work on a different theme?
In theory on any theme, but the code might look slightly different.
Depending on your coding skills here it might be good to consult with a developer instead.
If you'd like I can help you find one:
codingwithjan.com/developers
Hey, thank you for the useful video. I trierd to find the HTML Class in the "Refresh" Theme, but i couldnt find it. I tried it on the "Dawn" Theme and did find it immadiately. Can anyone help?
Thank you Jan as always for your useful tutorials.
Super welcome! :-)
i cant find anywhere the product media item. i inspect then copy and there is nothing as product media item. Whats happening
Hey, Maria, do you still need help? If so, let's connect
exactly there is no product__media-item
Same issue
Did anybody manage to fix that the thumbnail of the first selected variant stays visible when clicking through other color variants?
I have a different theme, however, everything was going well, exactly as the video showed but then, when I got to the part with the global.js file, the word "variant" wasn't used even once in that file. So, I looked in the file "critical-global.js" it had nearly the exact same code as the global.js file shown in the video. I added the code instructed in the video but it didn't log to the console. Did anyone else have a similar issue or does anyone know how to fix this?
Here it really depends on the exact code and the theme that's used.
You might want to consult with a dev here.
This is useful guide, but it would be much simpler to use metafields here rather than relying on alt text. You can simply add a variant metafield, which contains a list of images, and display those images when the variant is selected. Keep up the tutorials though, they're well presented and helpful for people.
Hey man, do you have the code for the same?
@@xcsdead2090 i coded this for a non-dawn theme, so it's not a simple drop in replacement sadly.
The premise is the same though, a nested for loop, that loops through each variant, and then each metafield on that variant and renders out the media via the img_tag filter.
An if statement appends a class of 'hidden' to the non selected variants media. And each piece of media gets a data-variant property to append the related variant id.
For the js, on new variant selected I just add the hidden class to all of them. Then remove it from elements that have the right data-variant id.
Chuck that explanation into chatgpt with the dawn code and it should code you something workable for dawn.
@@xcsdead2090 have you found anything?
why i have to refresh to make it work always? otherwise a thumbnail from previous selected variant appears
Sound like a Javascript issue. First I'd check the chrome developer tools javascript console here, for errors.
A very informative and helpful, thenks a lot
Hello Jan! I was really looking forward to you making a video in which you can tell us how to integrate gpt3 in the already installed chatbot in shopify or anything related to the usecases of gpt3 in shopify. It would be really helpful. Thanks in advance
Hi the code works great I am just stuck in a place where I have certain variants which have two variables as alt text for example "wine red or dark grey" and for those variants I have to refresh the variant page every time in order for images to show is there a workaround for that ?
Any help is appreciated thanks
You can add a a refresh function in the javascript code (second part of the video) is not ideal but it will work
After doing all this, when we refresh the page, we get page not found error. Has anyone got the same error?
On point. Thanks for this brilliant tutorial.
Thanks so much for the great feedback, nkt ! :-)
My thumbnails button class is listed as "thumbnail global-media-settings" any advice?
same
Can you update this tutorial for the latest version of dawn?
I have copied the code perfectly for Sense theme and it’s also working
But there’s one problem that when we change variant, featured image of previous variant remain in the images
But if we reload the page it removes
Tell me how to fix this so that we don’t have to reload every time
Did you ever figure this out?
Excellent video. Great Job. Can you please do a tutorial on how to add color swatches to the filter instead of just plain check boxes? I am referring to Dawn 8.0. Thanks.
but if again select same color variant featured image gone hide
I would love to see how you handle a nice, optimized image snippet
i did everything exactly as the video but now my variant pills dont showcase any selected variant when i click them it stays on the black featured image :( idk if it matters but im on a macbook. im sad lol
This dose work btw. That's the problem I had I got frustrated so I went back through the first time and I had used ("") theses where (``) theses should have been. still didn't work and then I realized ide misspelled else as els. Just double check there are no mistakes or the whole code can mess up, I'm not at all an experienced coder but I know even experienced coders make mistakes and go back through, and no I don't think it matters if you are on mackbook the code Shopify uses is still the same. Like rn for me everything is perfect except the first image for my black shirt is showing on my white and brown variations it's a problem but il just have to look back through to see where I went wrong. Hope that helps man
@@sheigenjonsiah816 were you able to figure this out?
@@brandonnorris7122 I haven't yet fixed the problem where a single image travels over to a different variant because it will take time and I have more important things than a small bug that may go unnoticed. I do plan to fix it though but just really focusing on the key points that will get my store running
It was amazing tutorial but my product contains sizes too, and it creating conflict when I select new size.
do you have any option to do it without alt text
Yes, metafildes would be pretty clean.
Thank you so much for this tutorial! I got it working but have a few issues:
1. The variant selector is working, but if I select a different color for example on the page, it changes all of the pictures except for the first thumbnail. The first thumbnail remains the same image as the featured image on page load.
2. On one of my products, the script isn't working at all and is only loading the featured image for the first variant on page load when selecting other variants.
W
you can add this attribute within the that shows the featured image:
thumbnail-alt={{ product.selected_or_first_available_variant.featured_media.alt }}
the reason why the first thumbnail shows in every selection is, the attribute was not added in the featured image.
@@StormingGravity Thanks a lot )
@@StormingGravity Thanks :)
We are using alt text for seo purposes, is there any other way yo make it?
Hi Omer,
yes that's still possible (via metafields), but also makes it quite a bit more complicated.
In that case you might want to consider using an App instead!
When I thought there was no way 😭 I found this video 🤩and it worked perfect for me, thank you very much. Just I had to modify a different file, instead of main-product.liquid, it was in product-media-galery-liquid (my theme is Craft). The js file was the same as the video.
I am also using Craft, in the latest version, and it doesn't work. Is there anything else you changed?
Never mind! It works! Thankyou :-)
Awesome!! Glad it works. :-)
Yeah! Would love to learn how to make some images stay visible regardless of the chosen variant, and if it's possible to activate this when there are images both for color and size, I suppose it's just a bunch of ifs. @@CodingWithJan
Hey Alejandro, in this case, I'd recommended partnering with a developer. We can definitely help you to get in touch. (Check the links in the description)
Hey man thanks for all the great videos, they've really helped me figure out Liquid / Shopify development.
Could you elaborate on how to use the variant meta fields a little more for this same task? I probably only need a few hints.
I was thinking of incorporating a variant metafield called color (which I already use for swatches) and then putting that color code into the filenames of the variant images...but I'm keen to know if there's a smarter way.
That way you'd still get nice alt tags on your images and also have this functionality.
Oh I think I see what you're getting at...add a file meta field to the variant that allows you select multiple images yeah?
Yep I got it, thanks anyway for pointing me in the right direction.
When I click on a different color it makes the featured image disappear and stays on the current colors pictures minus the featured image. When i refresh it brings back featured image with correct color selected and all the correct images
Having this problem too, is there a fix to this or did I do something wrong?
lol misspelled thumbnail. it works now
@@ethanky are you on dawn 8.0? I will be attempting this again soon lol i guess i misspelled something too
@@Excapepath yes I am using dawn 8.0
How did you do the big variant images layout?
Hi Gino.
If you still need help with this, you might need to connect with a developer expert.
We can definitely help you find one if needed. (link in the description)
Best,
Joy (Team)
I think this is one I looking for
but Who is jossie
can anyone tell me
Amazing!!! thanks a lot!!!
Excelent video, i loved it. Thanks
Glad you enjoyed it! :-) 🙌
This video is great but also suggest me for mobile screen, am getting all images at mobile screen
did you ever figure out how to fix this?
+1 on this
How to do it in palo alto theme?
Update for Dawn version 9?
how to make it work on he sense theme
?
Shopify costs so much and this is not built in?
Can you update this for dawn 10
This is not an appropriate approach to taking care of this problem. The alt attribute of img elements serves an intentional and important purpose both for SEO and for users with accessibility issues. Labeling all product images with an identical alt value, especially one so nondescript is not only bad for SEO, but means your site is not really compliant with accessibility standards.
Hi Aaron, good point. The cleanest way at this point would be using Shopify metafields instead of the alt tag! :-)
The logic stays similar.
What about the mobile version!
not working for ride theme
Not working on my site
product__media-item does not come up for me
me too
Alt text helps visually impaired people understand what the image is. Legally, every alt text should have a description. There are companies that go after anyone who doesn't use alt tags properly, but there has to be another way to hide variant images...
Hi Matthew,
you can now implement similar functionalities via metafields.
@@CodingWithJan Hi, do you plan to create an updated tutorial for V13 themes, for: product swatches, and multiple variant images?
how about Turbo theme?
Please please please please do an updated version for Dawn 10.0.0, please 🙏🙏🙏🙏🙏🙏
PLEASE MAKE VIDEO ON TABS
Hi Akash,
Thank you for your comment.
Could you please clarify what specific type of tabs you're interested in or provide more details about what you'd like to see covered in the video?
Best,
Joy (Team)