add color swatches on the product page for the Dawn theme

[mfazio]

Hi I am wanted to have color swatches for my product pages on the Dawn theme. Looking for circle swatches. Thanks

[KetanKumar]

@mfazio 

try this 

https://community.shopify.com/c/shopify-design/product-pages-add-color-swatches-to-products/td-p/616...

[RubberDuck44]

Hi

The header of this link says:

Update; January 21st, 2021 - This unsupported tutorial is no longer technically accurate and will be removed. For swatch options going forward please consider an app from the Shopify App Store

Perhaps anyone has other suggestions?

[KetanKumar]

@RubberDuck44 

it can done some modification code

[made4Uo]

Hi, 

 I just wrote a code to add a color swatch for Dawn Theme with multiple shapes to choose from. Its totally FREE and no APPS needed. Code  and instructions are at the video description

[Zlata]

Hi @made4Uo , 

Great video and very detailed! how do i add color swatches to my product grid? 

[made4Uo]

That would be a different code actually for your product card

[Zlata]

@made4Uo Do you have a youtube link to that code or on your website? Would you please provide it? 
thank you. 

[KetanKumar]

@Zlata 

Dawn theme alredy allow this option please check your theme setting 

[Zlata]

Hi @KetanKumar 

where does it have this option? I’ve been working on it for quite a bit and haven't seen an option to add color swatches to product grid unless i download an app. I want it to look like in the image below. Where do i find it in settings? No such option unless i add codes. 

 

[KetanKumar]

@Zlata 

i mean theme customization

[Zlata]

@KetanKumar Could you please give more detailed answers. I really don't follow what you are saying. 

[KetanKumar]

@Zlata 

https://medium.com/geekculture/how-to-display-product-swatches-in-your-in-shopify-2-0-dawn-theme-600....

[Zlata]

@KetanKumar Thank you, the code worked but how do i customize variant colors to match with my products’ actual colors? The code works to present HTML default colors: if i have a navy shirt it shows HTML version of navy in the variant swatch which is not necessarily the same shade of navy of the shirt I'm selling. I want variant colors to represent exact hex codes of my products. 

[emex]

thanks heaps. trying it now. will let you know how it goes.

[NileshTejani]

See this post step by step guide on how to do this https://www.bluish.io/shopify/color-swatches-dawn-theme

[BrandBuilding88]

i found this to be working and very helpful 

https://www.youtube.com/watch?v=q5OHBsm1Nig

[MRamzan]

You can add color swatches very quickly. Here is the reference video I followed to do it for my store.