How to only show the selected variant's pictures in the gallery.

New Member
1 0 0

Right now the product page shows all of the images associated with the product. Since there's a lot, the product page is spammed up. I want it to only show images that are of the same color as whatever swatch is currently selected. So if someone clicks black, the only pictures showing in the gallery are those of the black variant. If someone then clicks red, it should switch and show only pictures of the red variant. I've read about some people doing this by grouping the images together using the images alt tag, which I almost got to work. The one part I'm having trouble on is how do I compare images alt tag to whichever color swatch is currently selected and get the gallery to update and reflect that?


Here is my code:


Same functionality here:

Community Manager
Community Manager
2498 171 376

Hi there, 

Nick here from Shopify. 

I was doing some digging for you on this and did find that Shopify has a very helpful guide on how to select product variants by clicking their images which you can see here. It goes through how to do it in detail and is a Shopify supported tutorial which means it is something our theme support team can help you with should you be using a Shopify developed theme (except for BoundlessBrooklynJumpstart, and Lookbook). Is the tutorial in the realm of what you're looking for or is it something different to that? If it isn't, let me know and we can look into it further. 

Cheers, Nick

Nick | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Shopify Partner
21 0 3
Any news on that?

The answer above seems off topic given the question wasn’t to display unique variant photos but to display several photos pertinent to a given variant.

So let’s say you sell T-shirts, they come in 5 different colors, each color as multiple product photos.
Displaying all those photos on the product page is a marketing faux pas, there is too much information, it’s confusing, it’s daunting, before you know it your bounce rate is through the roof and you paid all that traffic for no sales...
The obvious option is to do something like we all saw on Amazon listings: it’s to show only the photos of the default variant, then if the viewer select the swatch of another variant it shows the photos associated with that variant (and only those photos).

So with that in mind, what seems to be a working solution?