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

Just when I thought I found a video where I didn’t have to code…

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?

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.

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

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?

Trying to do this tutorial on Dawn 11.0. Sadly the code in the main-product.liquid is completely different... But thanks nonetheless!

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!

For anyone wondering about updating this for Dawn version 11, here's how we got it to work.

Follow all instructions except for the below changes:

The Liquid file is now called 'product-media-gallery.liquid'

Update the JS function to:

filterImgVariant() {
console.log("thumbnail updated", this.currentVariant);
const thumbnailEls = document.querySelectorAll('[thumbnail-alt]');
if (this.currentVariant.featured_image && this.currentVariant.featured_image.alt) {
// Show only thumbnail for selected variant
const currentImgAlt = this.currentVariant.featured_image.alt;
const thumbnailSelector = `[thumbnail-alt='${currentImgAlt}']`;
thumbnailEls.forEach(img => img.style.display = 'none');
document.querySelectorAll(thumbnailSelector).forEach(img => img.style.display = 'block');
} else {
// Show all thumbnails
thumbnailEls.forEach(img => img.style.display = 'block');
}
}

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!

Amazing!!! thanks a lot!!!

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

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?

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?

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

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.

Tooooo long process

PLEASE MAKE VIDEO ON TABS

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

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

How did you do the big variant images layout?

On point. Thanks for this brilliant tutorial.

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.

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

Can you update this for dawn 10

Update for Dawn version 9?

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

not working for ride theme

Not working on my site

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?

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 🙌

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

I think this is one I looking for

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.

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

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.

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.

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?

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

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

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

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

A very informative and helpful, thenks a lot

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.

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

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

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

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

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.

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