Color variants on collection pages in Dawn

Store Design

Topic summary

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.
21

this forum post is chocked full of PAID solutions - videos that force you to buy or pay. Dodgy!

I posted on this before with a link, but given the site is no longer live, here is the web archive link to the FREE solution.

note: it still works, was NOT written or coded by me, and it is FREE >

https://web.archive.org/web/20220525191128/https://alanryan.dev/tips/color-variants-collection-page/

2 Likes
22

Great stuff, I based my own solution off a similar guide.

Next step is to make it work with filters - at the moment all colours are shown even when I filter for ‘black’, because the code spits out all variants.

One thing I can guarantee - the solution does not need to be a paid app or a paid chunk of code!

G

23

Hi,

Can you sent me the code please how to do it?

24

Which theme you are using ?

25

Hi,

Can you maybe sent the correct code somewhere?
So we can copy - paste it?
Looking for this solution but without success…
Please let me know! :slightly_smiling_face:

Claudia

26

Dawn Theme

27

Here is the video:

28

I linked to it in my previous comment, it’s not quite a copypasta solution, but it’s certainly doable. The code in the linked comment + going through the same steps I did should get you a result.

G

29

Heya, did you ever work out how to make colour filtering not show all variants of a product? I’m having this issue too where all variants show as products but then colour filters don’t work.

Thanks!

30

Oddly enough that’s exactly what I’m working on now. The current solution I have is to add in a check inside the variant loop for any filters, and if there isn’t a text match on the colour name, I don’t show that variant. For multiple filters, figure out how many matches you need, add them up as you go, and show if the variant has achieved the required number of matches.

It works, but isn’t great for grouped colour families, which is the custom metafield we want to actually use (ie, Tan includes Cognac Calf, but doesn’t text match to it). The variant object that you have access to inside the liquid code in the product grid doesn’t have metafields attached to it (yay, thanks for that Shopify) so I’m going to have to go with a clunky if else chunk that maps colour names to colour family values: which will require manually updating every time a member of staff adds a new colour.

I’ve attached a chunk of (currently incomplete) code to this reply, in case that helps at all. Your mileage may vary and I offer no guarantees with it. :wink: It’s a .csv but obviously it’s not a csv file, it’s liquid.

All I can say, really, is good luck. This is such a basic thing, I have no idea why it isn’t supported out of the box.

G