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

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:

👨‍🎓Learn Shopify Development from Scratch:

👨‍💻Find a reliable Developer for your project:

► Contact
--------------------------------------------------------------------------
🌐 Website

🤝 LinkedIn

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

[charlie-taylor]

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

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

[maximilianbredow]

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

[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

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

[jackross]

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!

[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

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

[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?

[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

[talhaamjad]

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 🙌

[cyberspider]

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 ?

[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

[tuanang]

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

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

[_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?

[stephenjin]

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

[InduReddy-mt]

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!

[ashusanghavi]

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

[progress.portal]

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