Can I replace product images with color variants in Shopify?

AsadBaig
Shopify Partner
43 1 2

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

 

Get your e-commerce solutions
If you have any queries get in touch:
Email: baigasadullah4@gmail.com
Linkedin: https://www.linkedin.com/in/shopifystore-development-customization/
Replies 3 (3)

Developer-G
Shopify Partner
3045 596 848

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 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

LitExtension
Shopify Partner
4860 1001 1133

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' }})

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

made4Uo
Shopify Partner
3804 713 1124

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.

 

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!