Color variants on collection pages in Dawn

FlorenceGee
Excursionist
15 0 15

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!

Replies 16 (16)

Katie08
Visitor
2 0 1

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

Thank you

FlorenceGee
Excursionist
15 0 15

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.

MEC-
Visitor
1 0 0

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

MRamzan
Shopify Partner
126 1 20

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

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112
FlorenceGee
Excursionist
15 0 15

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

FlorenceGee
Excursionist
15 0 15

Hello? @MRamzan 

ChrisDip
Shopify Partner
3 0 3

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

works fine on Dawn 6.0 also

Julielundahl
Visitor
1 0 0

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

MRamzan
Shopify Partner
126 1 20

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

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112
souldreams
Visitor
2 0 0

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

MRamzan
Shopify Partner
126 1 20

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

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112
JosefKl
Visitor
1 0 0

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

Melinda5
Explorer
52 3 11

  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! 

MRamzan
Shopify Partner
126 1 20

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

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112
enwartahir
Shopify Partner
1 0 1

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. 

KabirDev
Shopify Partner
244 60 67

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.

 

If my answer helps, please give it a Like and Accept as Solution.
- Control payment methods visibility at checkout by KlinKode PayRules app.
- Contact me directly at shahriar@kabirdev.com
- You can join in our Facebook group for Shopify help.