How can I change the image preview based on color variant selection?

Hi,

so I have a couple of images for a product that comes in a variety of colours. The products are in the same collection. I was wondering if there is a way that the image preview could change as I press on the variant picker (colour change). For example in the pic I included. I have highlighted a button for the colour Amethyst. But the image previewed is for the black colour. Can someone help me on how to work this out please.

1 Like

Hi @Moe_11

Make sure that you have added images to the variants themselves and not on the main product.

Also, For better clarity - Please share your shop website.

Cheers!

@Moe_11 Have you added the correct image for each variant?

The behaviors you want are available by default. But you have to set up an image for each variant so it would change.

Hi Justin,

no I have not. Not sure how to do that to be honest

my store website is ww.Mandagot.Com

Thanks for the reply,

could you please show me how to do that

@Moe_11

https://help.shopify.com/en/manual/products/product-media/add-images-variants

Here’s how to do it.

If you have found this information useful please like and mark the question as solved. Thank you.

Hi @Moe_11

Check out this image… you can click on the thumbnail in the left to upload your image, or select one from the already uploaded one.

Hope this helped!

@Moe_11 Were you able to sort out the issue and add the variants?

Hi @Moe_11 I see this is an old post and I’d like to add an answer for people coming from search.

Rubik Variant Images is built exactly for this. With Rubik, you can assign specific images to each product variant, so when a customer selects a color like Amethyst, the main product image will automatically switch to the correct one instead of showing the Black image.