We have 4 products and each product comes in 2 different colours (black, and silver). Each product is set up as one product, with 2 colour variants. We are using the theme Narrative. This is what we are trying to achieve: We would like to create collections based on their colour, so there will be …

Thanks for the suggestion. Unfortunately this does not work, as it will show the default image for each product (which is not necessarily the correct colour that needs to be displayed on the collection page) for all collections. Product 1: comes in black and silver Product 2: comes in black and si…

Hi @rvandyck You need to edit the theme codes to show the variant image matching with the collection title. I found these example codes to show the variant image in the variables loop. {%- assign featured_image = product.featured_image -%} {%- assign product_url = product.url -%} {%- if custom_o…

Which page would I be adding this to specifically? collection-template.liquid ?

What about having each color its own product instead of a variant? Then you could make color collections?

@rvandyck the issue you ran into is one of the most common gotchas with colour-based collections on Shopify. Even when the collection conditions pull the right products, the collection grid still shows the default featured image not the variant image matching that colour. So your “Black Collection…

Create collection based on colour variant value

Store Design

Lixon_Louis May 4, 2021, 6:57am 2

@rvandyck this might help you https://community.shopify.com/c/Shopify-Discussion/Create-a-collection-by-color/td-p/381588

Topic		Replies	Views
Show variants image in collection with color query string? Store Design	5	70	September 5, 2022
Show Variant Image On Smart Collection By Colour Store Design customizations , collection-page	5	163	March 30, 2025
Displaying color variants as individual products on custom collection page Store Design	29	590	August 16, 2024
Displaying Variants as products in collection pages Store Design	34	554	September 16, 2024
change 1st image on page load selection whether shown as collection or product Store Design design , customizations , collection-page , landing-page , css , metafields , product-page	2	154	May 7, 2025

Create collection based on colour variant value

Related topics