Shopify themes, liquid, logos, and UX
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.
Thanks for any and all tips!
I'm also trying to achieve this on the Impulse theme, any help would be appreciated!
Thank you
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.
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
Hello FlorenceGee. I read your comment and started working on this solution. Finally I solved and uploaded for community. https://youtu.be/-A3uCwvEknA
Hi! This is indeed amazing! Will you share the code with the community? Thanks
If you're still looking for it use this .. https://alanryan.dev/tips/color-variants-collection-page/
works fine on Dawn 6.0 also
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
You can follow this video. Maybe it help you to solve. https://youtu.be/-A3uCwvEknA
This one works! Thanks a lot mate, had been searching for this since forever!
You are welcome. I really struggled alot for finding the solution. And finally I did it 😀
Hi,
Can you sent me the code please how to do it?
Which theme you are using ?
Dawn Theme
Here is the video:
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
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!
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
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.
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.
And done.
Refer to the excellent answer here: https://community.shopify.com/c/online-store-and-theme/show-all-product-variants-in-the-collections-...
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 <li> 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: <!-- {{ product_card_variant | json }} --> 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
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! 🙂
Claudia
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
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.
Here is the latest solution for that:
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/
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
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!
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. 😉 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
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025