How can I display color variant images in my online store?

How can I display color variant images in my online store?

nitinj
Shopify Partner
30 1 2

How to implement a shop where I'll have products with several color variants. So I was wondering if it's possible, inside the collection page, to change the product image when a filter is applied in order to show that particular variant.

 

Let's say my product option is from the filter selected "color" is "BLUE" Is it possible to filter by color (blue for example) and show the product image from variants related to the chosen color?

 

Help appreciated.

 

Thanks,

Nitin

Replies 4 (4)

minhcu
Shopify Partner
61 0 3

It is very simple, normally this is already implemented in the theme.

You will need to find the product grid liquid and change the image URL as example below
{% assign url = product.first_or_selected_variant.featured_image.url %}

<img src="{{ url }}" />

 

Or maybe trying this app, it is automatically implemented in the app https://apps.shopify.com/ultimate-search-and-filter-1

 

Don't stop grinding

PhillyT
Visitor
1 0 1

Absolutely INSANE to me that Shopify has not fixed this problem across all shops and themes.  It's so simple.... Make it so that people can select the images they want for the specific variant

MRamzan
Shopify Partner
339 3 35

You can display selected color images:

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112

Ozkan
Shopify Partner
47 1 5

Hi @nitinj

 

II hope you are well! 🙂

 

There is a new app which helps users for the exactly what you are looking for!

 

Rubik Variant Images, allows users to select variant specific images to filter on store front.

 

You can see the demo video here: https://youtu.be/rRWPNsRw8lM?si=vQyVlvU9eMYRbmcq

 

And the app team is super helpful. They try to help each user from live chat. I suggest to give a try 🙂