FROM CACHE - en_header

add color swatches on the product page for the Dawn theme

mfazio
Excursionist
45 0 9

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

Replies 15 (15)
KetanKumar
Shopify Partner
34466 3448 11291

@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
34466 3448 11291

@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
2372 422 598

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

 

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
digitsupCA
Shopify Partner
180 12 39

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: designfordestiny@gmail.com
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
2372 422 598

That would be a different code actually for your product card

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
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
34466 3448 11291

@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
34466 3448 11291

@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
34466 3448 11291

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

BrandBuilding88
Excursionist
29 2 6