Shopify Multiple Variant Images - (How to Display Images Specific to the Selected Variant)

[@CodingWithJan]

🌟Learn the JavaScript side of Shopify Development: codingwithjan.com/javascript?src=variant-images-yt 👨‍💻Find a reliable Developer for your project: www.codingwithjan.com/hire-a-developer

[@floor_city]

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.

[@KaizenClip]

I f***g agree with you. Spinning my head arround for 2 weeks now

[@thage0]

@@KaizenClipexactly I think its stupid asf

[@Acostajmarlon]

So there isn't an app?

[@destrabtw]

@@Acostajmarlonany found?

[@Acostajmarlon]

@@destrabtw haven’t found any my friend :(

[@maximilianbredow6374]

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

[@CodingWithJan]

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 👍

[@charlie-taylor]

That's my evening sorted. Looking forward to giving this a go. Thanks Jan and Josie :)

[@CodingWithJan]

Some good night Javascript 😄

[@DailyRap]

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

[@mahidr9285]

nor do i

[@shanakbar3650]

Very Very Informative!

[@gfreshico]

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.

[@Too_Nice_]

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

[@johannesvonallworden7170]

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.

[@sul3529]

what theme you used?

[@matthias_ajc]

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

[@davis_the_goat]

same

[@progress.portal]

I did everything and stil have to refresh the page before the images show up. How can I fix this

[@marthedesigner]

yees here tooo. thanks a lot!

[@hakirastudios]

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?

[@iqbalrazaozbix]

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

[@jackross9558]

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!

[@stephenjin6518]

Great tutorial, thank you Jan. Just one thing, further modification is needed for this to work on mobile as well.

[@nosxing]

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

[@CodingWithJan]

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)

[@milkifyme]

We got it to work on Dawn version 11.0 - see comment above!

[@AmedeeBoulette]

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.

[@CodingWithJan]

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 😄

[@AmedeeBoulette]

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

[@talhaamjad5740]

@@AmedeeBoulette you're right that can be done very easily and SEO optimized and no issues of accessibility 💯

[@jovs4591]

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

[@nizar7292]

I am having the same issue, I cannot find product__media-item, I'm using Dawn 9.0

[@EstebanBustos]

@@nizar7292 any update on this one?

[@EstebanBustos]

i think its in product-media-gallery

[@cyberspider78910]

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 ?

[@talhaamjad5740]

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 🙌

[@rishabhp1762]

I can't find product media in main-product liquid on the dawn theme

[@Reelalitybytes]

Same issue... I've got a media toggle image, and searching for it yields nothing.

[@MuhmmedShalaby]

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.

[@OutBoxAds]

absolutely looking for the same

[@ЖеняСвиридов-о1и]

A very informative and helpful, thenks a lot

[@ashusanghavi3189]

Can same be done with thumbnail carousel ? If yes, can you please make a video for that.

[@DenizhanHaznedar]

It works only for default shopify theme? Can we also make the adjustments on other payed shopify themes as well?

[@InduReddy-m3t]

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!

[@marthedesigner]

yes, same here but ok on mobile (altough it keeps displaying the first variants image too) and on desktop does not work :(

[@cyberspider78910]

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.

[@tuanang8739]

keep on uploading these detailed and informative videos, there aren't many sources to learn Shopify out there beside doc

[@CodingWithJan]

More to come!

[@VABianne_2023]

Hi Jan. Will this work on Trade V15? Been looking for a tutorial for this new theme and all doesnt work for V15 😔😔

[@CodingWithJan]

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

[@kidshaw]

Would this work on a different theme?

[@CodingWithJan]

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

[@Gouravkumar-vr2cp]

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.

[@SimonS188]

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.

[@xcsdead2090]

Hey man, do you have the code for the same?

[@SimonS188]

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

[@andreizhao3414]

@@xcsdead2090 have you found anything?

[@haseebhamdan8642]

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

[@CleanCanvas]

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

[@ajmalDeveloper]

Thank you Jan as always for your useful tutorials.

[@CodingWithJan]

Super welcome! :-)

[@ClubOverthinker]

hello i dont have product_media-item but i have product_media-gallery - will it work the same?

[@gnehngrace]

Hi. Is there any way for this to be done with CSV and google app script?

[@fictionsurprise]

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!

[@marketplaceaid3846]

You can use Alt text to check conditions for any image you write; it is not necessary to have a color image; you can use it for any image. Bro, it does not matter if it is size, color, or anything else.

[@BasemBrimo]

Great tutorial. Is there a way to change the products collection image based on the website language ?

[@CodingWithJan]

I'd need to double-check this myself. Potentially with some custom code modifications and Shopify markets.

[@mariapolychroniadou3837]

i cant find anywhere the product media item. i inspect then copy and there is nothing as product media item. Whats happening

[@adriansomor]

Hey, Maria, do you still need help? If so, let's connect

[@jovs4591]

exactly there is no product__media-item

[@Reelalitybytes]

Same issue

[@_ninoperez]

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?

[@arbin1293]

kzbin.info/www/bejne/eIDdo5yLrrKLpNE

[@MadMonkey-i5o]

did they move this somewhere else in version 12? I cannot find that class product__media-item.

[@nuzzky]

How can we make it change the name as well? For example, I have joggers in three colors, and I want it to change the title to something like Joggers-Black or Joggers-Grey, or anything else, every time a variation is selected.

[@leomarkconstantino4451]

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

[@CameronOttello]

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?

[@curiousperson]

is it up to date? can I use for Dawn 15

[@serhiikulik4022]

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?

[@Ilse-ie6zu]

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!

[@MrDesibuoy]

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?

[@CodingWithJan]

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 KZbin comment. But in theory possible. 😄

[@jacqueskousteau788]

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

[@Oldverine]

Can you update this tutorial for the latest version of dawn?

[@VirendraWani]

I am working in Trade Theme. How to apply these changes there ?

[@MDABDULLAHALMAMUN-i8d]

Hello Sir, if i want to do this stuff with size variant then what to do. Please Help me. My store doesn't have too much color, but has lot of sizes. Waiting for your quick reply. Thank you.

[@officialmanumey]

what if i want to do this for 50 products. do i have to do all of this for every product seperadet?

FYI for newer versions of dawn you'll need to edit product-media-gallery.liquid instead of main-product.liquid. And there should be quotes in thumbnail-alt="{{ media.alt }}" - otherwise colour names with multiple words won't work (e.g. 'Dark Red').

[@CodingWithJan]

Haven't double-checked this, but sounds correct! 😄 Appreciate it! :-)

[@edersolis5097]

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?

[@kiteamin8269]

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.

[@wenquiros4781]

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.

[@AlejandroOlávarriPons]

I am also using Craft, in the latest version, and it doesn't work. Is there anything else you changed?

[@AlejandroOlávarriPons]

Never mind! It works! Thankyou :-)

[@CodingWithJan]

Awesome!! Glad it works. :-)

[@AlejandroOlávarriPons]

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

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

[@KTpixels]

On point. Thanks for this brilliant tutorial.

[@CodingWithJan]

Thanks so much for the great feedback, nkt ! :-)

[@adetheline]

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?

[@MichelleGreen-ne1dd]

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?

[@CodingWithJan]

Here it really depends on the exact code and the theme that's used. You might want to consult with a dev here.

[@leomarkconstantino4451]

I think this is one I looking for

[@yashgotherwal6704]

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

[@leko6356]

You can add a a refresh function in the javascript code (second part of the video) is not ideal but it will work

[@amir_since]

do you have any option to do it without alt text

[@CodingWithJan]

Yes, metafildes would be pretty clean.

[@mrsoygarlic]

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?

[@vaizdink]

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?

[@catalincatalin4101]

I would love to see how you handle a nice, optimized image snippet

[@DavidGuzman-ym4dz]

My thumbnails button class is listed as "thumbnail global-media-settings" any advice?

[@DailyRap]

same

[@ginopino8849]

How did you do the big variant images layout?

[@CodingWithJan]

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)

[@pkalita2668]

why i have to refresh to make it work always? otherwise a thumbnail from previous selected variant appears

[@CodingWithJan]

Sound like a Javascript issue. First I'd check the chrome developer tools javascript console here, for errors.

[@xelism]

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?

[@criswoz3134]

Amazing!!! thanks a lot!!!

[@jujomoto]

Excelent video, i loved it. Thanks

[@CodingWithJan]

Glad you enjoyed it! :-) 🙌

[@braveful]

We are using alt text for seo purposes, is there any other way yo make it?

[@CodingWithJan]

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!

[@raajvijaiswal8662]

I might be a noob but unfortunately not getting the product__media-item in my theme Refresh. Can someone help me with this?

[@brandonnorris7122]

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

[@StormingGravity]

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.

[@ЖеняСвиридов-о1и]

@@StormingGravity Thanks a lot )

[@xcsdead2090]

@@StormingGravity Thanks :)

[@IK-rj7yp]

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.

[@muhammadaqibshahzad9494]

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?

[@traytor]

Update for Dawn version 9?

[@rishabhp1762]

Can you update this for dawn 10

[@spoljimir123]

Did anybody manage to fix that the thumbnail of the first selected variant stays visible when clicking through other color variants?

[@TheMiig1513]

Please please please please do an updated version for Dawn 10.0.0, please 🙏🙏🙏🙏🙏🙏

[@DigiChukar-l9r]

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

[@brianvargas4338]

Did you ever figure this out?

[@inspiring-threads]

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

[@sheigenjonsiah816]

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

[@brandonnorris7122]

@@sheigenjonsiah816 were you able to figure this out?

[@sheigenjonsiah816]

​@@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

[@eazyshopify]

It was amazing tutorial but my product contains sizes too, and it creating conflict when I select new size.

[@Excapepath]

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

[@ethanky]

Having this problem too, is there a fix to this or did I do something wrong?

[@ethanky]

lol misspelled thumbnail. it works now

[@Excapepath]

@@ethanky are you on dawn 8.0? I will be attempting this again soon lol i guess i misspelled something too

[@ethanky]

@@Excapepath yes I am using dawn 8.0

[@mahidr9285]

how to make it work on he sense theme ?

[@johnmcaulay4348]

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.

[@johnmcaulay4348]

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?

[@johnmcaulay4348]

Yep I got it, thanks anyway for pointing me in the right direction.

[@dathonweber7561]

Hey guys I am attempting this tutorial and I am getting undefined for the this.currentVariant when I console.log() it. what is the most up-to-date version of this.currentVariant? I cannot find it in my global.js file.

[@YudhShadow]

but if again select same color variant featured image gone hide

[@SHIKHASHAH-t7b]

After doing all this, when we refresh the page, we get page not found error. Has anyone got the same error?

[@harismemon1546]

how about Turbo theme?

[@Dunginh-cb8de]

how to setup on showcase theme

[@AlokSingh-vf8rr]

This video is great but also suggest me for mobile screen, am getting all images at mobile screen

[@PROJECT-COMPILATION]

did you ever figure out how to fix this?

[@asadhussain8837]

+1 on this

[@MatthewBrandon1]

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

[@CodingWithJan]

Hi Matthew, you can now implement similar functionalities via metafields.

[@roiseaux]

@@CodingWithJan Hi, do you plan to create an updated tutorial for V13 themes, for: product swatches, and multiple variant images?

[@joooonaaaas234]

not working for ride theme

[@Klee87278]

What about the mobile version!

[@BairdJonJ]

this isn't working on my Dawn Theme

[@ChandrabhanRahangdale]

but Who is jossie can anyone tell me

[@vientrinh4530]

Not working on my site