add color swatches on the product page for the Dawn theme

mfazio
Excursionist
45 0 10

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

Replies 16 (16)

KetanKumar
Shopify Partner
36839 3635 11972

@mfazio 

try this 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
RubberDuck44
Tourist
10 0 3

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
Shopify Partner
36839 3635 11972

@RubberDuck44 

it can done some modification code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

made4Uo
Shopify Partner
3804 713 1124

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

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
Zlata
Excursionist
14 0 3

Hi @made4Uo , 

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

 

made4Uo
Shopify Partner
3804 713 1124

That would be a different code actually for your product card

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
Zlata
Excursionist
14 0 3

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

KetanKumar
Shopify Partner
36839 3635 11972

@Zlata 

Dawn theme alredy allow this option please check your theme setting 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Zlata
Excursionist
14 0 3

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. 

F1859AC7-DA02-484D-A365-FE5552AEA498.jpeg

KetanKumar
Shopify Partner
36839 3635 11972

@Zlata 

i mean theme customization

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Zlata
Excursionist
14 0 3

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

KetanKumar
Shopify Partner
36839 3635 11972

@Zlata 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Zlata
Excursionist
14 0 3

@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
Shopify Partner
15 0 1

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

 

NileshTejani
Shopify Partner
203 12 43

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

- Did we solve your issue? Like & Mark As Solution to help the community

Should you need any direct help:
Get connected: Upwork | Help Center

BrandBuilding88
Excursionist
29 2 6

i found this to be working and very helpful 

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