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: https://textuploader.com/dnal9
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 Boundless, Brooklyn, Jumpstart, 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.
|a minute ago|