How to Link Different Color Options with Different Product Images

[will70]

Hello, I am trying to figure out how to make it so that when someone clicks on a different color option, the image shown on the left will switch to the correct corresponding image for that color option.

For example, this ring comes in rose, yellow and white gold and I have all the different gold options available with their own photos, but it doesn't switch to the right photo when you change the gold color option: https://moonryvr.com/products/diamond-esme-ring.

My site is moonryvr.com and I am using Taiga theme.

Thanks so much for any help! Will

[Sweet_Savior_3]

Hello @will70 

Welcome to Shopify Community.

These is something that many themes provides and possible through image alt. if your theme does not provide this functionality so this needs to be hard coded. I would recommend you to connect with a developer.

Let me know if you need one.

Thanks

[will70]

Ah ok - thanks for the info! I see this works on mobile but not desktop for some reason, but maybe i need to figure out how to do that within the theme settings

[polishedCode · Accepted solution]

On the backend it looks like the variant images aren't set and when I add the products to cart it looks like the products are pulling the same yellow gold image. 

 

 

I'd double check to make sure your product variants are set up with different images. 

1. Go to products & click on the product you want to edit

2. Scroll down to the "variants" section

3. Group by Color
4. Click the image upload to the left of the product and select an image for each color variant. 

5. Hit save

 

Hopefully this helps! 

[will70]

Ah ok - it seems that doesn't sync with color with the photo on the main product page - but it does add the correct photo in the cart, which is something I need to be doing too! Thanks so much for the tip!!

[will70]

Ah actually it does create the right thing for mobile just not desktop - thanks! Any idea why it would be doing it correctly on mobile but not desktop?

[will70]

actually it does create the right thing for mobile just not desktop - thanks! Any idea why it would be doing it correctly on mobile but not desktop?