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

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!!! :-1: :-1: :-1: ).

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.

Thanks for any and all tips!

2 Likes
2

I’m also trying to achieve this on the Impulse theme, any help would be appreciated!

Thank you

1 Like
3

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.

1 Like
4

I found this and it worked for me. Although I would rather have the colors displayed overlapping the image but I will keep dabbling.

https://jotting.com/shopify/collection-color-swatches-dawn-theme

5

If you’re still looking for it use this .. https://alanryan.dev/tips/color-variants-collection-page/

works fine on Dawn 6.0 also

3 Likes
6

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

7

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.

You can watch this video: https://youtu.be/-A3uCwvEknA

8

You can follow this video. Maybe it help you to solve. https://youtu.be/-A3uCwvEknA

9

Hello FlorenceGee. I read your comment and started working on this solution. Finally I solved and uploaded for community. https://youtu.be/-A3uCwvEknA

10

Hi! This is indeed amazing! Will you share the code with the community? Thanks

1 Like
11

Hello? @MRamzan

12

This one works! Thanks a lot mate, had been searching for this since forever!

13

You are welcome. I really struggled alot for finding the solution. And finally I did it :grinning_face:

14

Great solve! But after implementing it, I now have the issue that the main image for single variant products are not displayed anymore? Any ideas?

On Dawn 9.0

15

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?

Your help would be greatly appreciated!

16

I’ve followed some of your solutions and they’re obviously paid. Nothing wrong with that but you’re continuously in habit of not mentioning it.

3 Likes
17

Hey there, you might find this video useful. It shows how to display all the variants and prices of products on your Shopify collection pages.

18

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.

1 Like
19

And done.

Refer to the excellent answer here: https://community.shopify.com/topic/1450772

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.

    I hope this helps someone else.

    G

    • 20

    Here is the latest solution for that: