Users seek to display color variants on collection pages in Shopify’s Dawn theme without using expensive apps ($30/month). The original poster tried multiple tutorials but encountered compatibility errors with Dawn.
Community-Shared Solutions:
Several free code-based tutorials were shared, including guides from jotting.com, alanryan.dev (archived link provided), and YouTube videos
A detailed DIY approach involves modifying main-collection-product-grid.liquid by adding a loop to iterate through product variants and creating a custom product-card-variant snippet
Key steps include: filtering for color options, displaying separate product cards per variant, appending variant info to product names/URLs
Ongoing Challenges:
Some solutions cause issues with single-variant products not displaying images
Color filtering doesn’t work properly—all variants show even when filtering for specific colors
One user is developing a workaround using text matching on color names, though it requires manual updates for new colors
Variant objects in Liquid don’t include metafields, complicating grouped color family filtering
Community Sentiment:
Frustration that this isn’t a native Shopify feature
Criticism of paid solutions disguised as free tutorials
Multiple users emphasize free solutions exist and apps aren’t necessary
Summarized with AI on November 1.
AI used: claude-sonnet-4-5-20250929.
Hi Shopify community! Many have asked this question before me, but there doesn’t seem to be a clear answer.
I want to display color variants on collection pages (Dawn Theme). This feature should probably be native to Shopify, but unfortunately it isn’t. There’s an app that has this functionality, but it’s ridiculously overpriced for something that should be fairly simple (it’s $30/month!!! ).
I’m looking for a clear tutorial, what code to paste where, what files to create etc. I realise there’s a workaround, by creating a unique product for each color, but then you lose the color switching functionality on the product pages.
I tried following the tips in from these resources but wasn’t successful. Various errors happened, probably because of incompatibility with Dawn, I’m guessing.
I don’t think anyone will. I posted a few similar questions that really should be no trouble at all. A reply could help the whole community. But nothing. Instead you’re recommended apps that charge monthly. I feel the Wordpress community is a lot more welcoming to people who dabble in code, but aren’t experts (that’s most small business owners).
We’ve decided to let it rest for now and I will ask my developer friends in a later stage of our website’s development. I will post the solutions here once I have them. Could take a couple weeks though.
When applying the code, shopify makes a product variant of the product for every type of option you have for the product. So as I have a size variant and a color variant, the collection page will show two variants of the product (because I have 2 option: color and size). It does not make a varient for every color, but a variant for every option of that product
Finally I solved. I also struggled alot with this problem. I found that App was too costly to install so I was interested to find a solution without paying the subscription fee. I followed this video and just copied and pasted the code and it work for me. Thanks.
Hi @ChrisDip , I checked out this code and it looks great - just trying to understand how to use it and where to paste it. Would it be the same main-collection-product-grid.liquid ? Also, do I paste that entire code to replace my current one or only add to it?
This annoyed me too. I have no problem with people charging for their work, I do have a problem with them presenting it as a tutorial when it is in fact an advert for their services.
Showing all colours on a results page should be a basic, built-in feature ANYWAY, it’s frankly bewildering that this simple option is creating such a big problem for people.
Anyway, there are a few helpful pointers on Stack Overflow (search there for ‘show color variants collection page shopify’), I’m about make a coffee and then get stuck into the code on main-collection-product-grid.liquid to DIY it.
The basic methodology is as follows: find main-collection-product-grid.liquid (or equivalent) in your theme code. Look for the loop that starts {%- for product in collection.products -%}
Within this loop, swap in the code referred to the the answer linked above, above and below the
that contains the snippet that renders a product. There’ll be a bit that goes above and a bit that goes below. I had to tweak this a little for my theme, but it was basically a Dawn-ish theme so all good.
The important part of that code is that for products with multiple colour variants, you’re adding in a further loop: {% for option in product.options %}
This is the key bit - it iterates over the variants of each product. You then filter that down to the colour option, get that as a variant object, and display a product card for each variant.
This is the second part of the tweak - you need to create a new snippet product-card-variant, which should be a copy of the existing product-card snippet, but with an extra argument: variant, which you specify in ‘accepts’ as product_card_variant.
Within your new product-card-variant snippet, find the bits that relate to the image you’re going to display and change those to use product_card_variant as a data source instead of product_card_product.
Find the h3 tag that outputs the product name and use the append: filter to add a space and the variant’s option1 (which should be colour) to it. Don’t forget the aria attr.
Append the variant ID to the product URL.
Use that snippet in the main grid loop instead of the product-card snippet.
This gets you 75% of the way there - there’ll be more to do, of course, but that’s the basics.
Outputting this: in your new can be helpful to demystify the data in the variant object.
No app needed, no $$$$ needed, no need to sit through several minutes of video the entire purpose of which is to get you to buy the solution: just a previous community answer and a bit of experimentation in the code.
