How can I replace product images with color variants in Shopify?

Technical Q&A
1

How i can replace images of the product with color variants in shopify? As i want to add product thumbnails as color variants after product title

Anyone Please

2

Hello @AsadBaig ,

While adding the variant you noticed there is an option available to add variant thumbnails with each. You can use it for color variants.
Alternately you can use metafields. Possible in both ways but not if you are aware about liquid.

Thanks

3

You can use variant.image to display the image of variant. Refer https://shopify.dev/api/liquid/objects/variant#variant-image
Ex: you can use background for it: background-image: url({{ variant.image | img_url: ‘355x’ }})

4

Hi,

If you have Dawn theme or Any Shopify 2.0 FREE themes, this should work. No APPs or EXTERNAL library needed. The code is made to call and listens all the variant options related images. You can have multiple variants options. Works with the Dawn product settings too, that includes thumbnail carousel and even the media size settings.

See video for more information.