How do I feature product variant options on collection pages? / product tile interactivity

13 0 0

Hey there!


Does anyone know how to display variant options (mainly color options) on product tiles on collection pages? For Example: on a product tile, you see the product image, title, price and vendor (on Shopify). There is no option to display that the product is available in multiple colors. I know I'd probably have to download a "swatch" app to be able to feature visible colors, but all I really need is interactive product tiles / tiles that let the customer know that the product is available in other colors. 


I've also seen 'hover' features, where users can hover over product images and see different variant option images fade in and out to give the user a 'preview' of what the product can look like in different colors / variants. There are also "Quick View" options that can be clicked to show the customer alternative options / information without completely navigating to a different page. 

Below are 3 different websites that feature an area that lets the customer know that the products are available in different colors.


shopify color option.PNGshopify color option2.PNGshopify color option3.PNG


















Is there anyone out there who can direct me to the right place to edit this; either Guru, App, liquid or code sequence?

Thank you! 

Shopify Expert
3483 543 820

If you want to implement option on collection product grid then you have to edit in snippet->product-grid.liquid or product-card.liquid file.

May be you need to code knowledge for that because is all about to liquid and Js code.

If you need any help let me know or text me on mail or private. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Shopify Partner
482 86 121



The functionality you need is possible to done via custom coding, it is about 2 hours work to implement it. It is too hard to send via this forum.

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email

Skype: @sarhov
Telegram: @sarhov
Try Shopify free for 14 days,
1 Like