How to get a product photo to change when selecting different variants

New Member
12 0 0

Hello! 

 

I am working on a custom theme and need to figure out how to get my product images to change when I select a different variant. For example, I want the product Image to change when I select the color of the product and the team the product is for (Blue, Team 1).

 

Please let me know what I need to share in order to get this option.

 

Thanks!

 

 

0 Likes
Shopify Expert
2458 414 518

Hi @vmillsp 

You can we have this function default this shopify theme, you just need to assign image to variants see this

If you have your custom theme  and want to change then you have to do it with variants selectCallback function from asset->theme.js 

For that you need code knowledge.

Let me know if you need any help. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
12 0 0

Hello! Thanks for your response. I have already added images to each variant but it still does not change the image when selecting the product. I am assuming I'll need to code something in order to make this function apart of my product pages. I am familiar with coding but if you could provide some step by step insight that would be greatly appreciated!

 

Thanks!

0 Likes
Shopify Expert
2458 414 518

You have product image as slider ? 

Its about theme depending so can give you exact instruction but just give logic.

You can get variant image on selectcallback function, so when you can option you can get this selected variants image like variant.image and replace with main image by js if you have not slider other wise you have to slide image base on selected image index. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
12 0 0

Screen Shot 2019-10-02 at 9.59.06 AM.png 

 

this is what the product page looks like. As you can see when I select Navy it does not change to navy nor to the team I'd like it to show. I'm a little confused on your explanation as to where I would change the variant info on the backend.

 

Thanks!

0 Likes