How To Add Color Swatches On Product Page Shopify [Dawn 13.0.1]

[@wielrenforum]

could you help me in dawn 15.0 the swatch doesn't stick on its place but it goes back to the previous version

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@BrightSkyFilmStudio]

FANTASTIC! This was EXACTLY what we were looking for! You're a life saver!

[@WebSensePro]

Glad it helped! Please share this on your network as a favor

[@lorraineb2109]

This works to perfection in Dawn 13.0.1. Today I tried it in Dawn 14.0.0, which Shopify must have released in the past few days, but it doesn't work with the 'Quick Add' buttons. If you have any advice, that would be greatly appreciated. Once again, thank you so much for making these really helpful videos.

[@WebSensePro]

Thanks for notifying we will definitely check it

[@Niharika.k.n]

It works now

[@mehranahmad7520]

Just wanted to leave this comment here to let you know that you are doing a great service to all of us! I pray your channel grows a lot every day!

[@WebSensePro]

Thank you so much!

[@sabrinareinke9651]

This was fantastic thank you! Do you happen to have a video or if not could you make one about getting the swatches to show on the Collection page? It would be immensely helpful so my customers could see what products come in what colours before clicking on the product page. Thank you!

[@WebSensePro]

Coming soon!

[@malinafit]

OMGGGGG this is the first tutorial out of many that actually worked. Amazing thank you!! A life saver!

[@WebSensePro]

You're welcome!

[@RegalAllure_shop]

You are my hero. I was afraid it would not work with Dawn 14.0.0, but it did, I do admit that my shop don't have "quick Add" buttons like someone mention it in the comment...for me it worked perfect

[@WebSensePro]

Great, thanks for letting us know

[@Elcazalt]

Great update! Had a question though on where it pulls the hex code. I have a large number of products that each contain a big set of unique colors attached to each product. In the past before Dawn 13 i set up a metafield Color under the Variant of each product. Is there any way to have to hex code pulled from that metafield of the variant?

[@WebSensePro]

Hmm... thats doable

[@Elcazalt]

@@WebSensePro just wanted to follow up to see if you had any luck with this? Your content is awesome and keep up the great work!

[@adrienpalmer3137]

This is great thank you!! Is there a way to put the color and size variants side by side instead of one above the other?

[@WebSensePro]

Yes it's possible with Liquid and CSS customization

[@krysiakkam]

Thank you for the great work! Can you share a way to make color swatches work also on other languages ​​versions as well? Now I only see them in the English version of the store.

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@xthepfandyi5855]

Very nice video bro ✌🏽 Now just a Video with Color Swatches on collection page is missing 😁 Would be happy to see this.

[@WebSensePro]

Will do soon

[@srm0914]

Thank you for this!!! Is there a way to line-out the swatches when a variant is out of stock?

[@WebSensePro]

Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support

[@halabishki]

Absolute legend. I owe you my life.

[@valvaldivia2285]

New suscriber, thank you every much

[@WebSensePro]

Thanks for the sub!

[@arshitaanchaliya1583]

How to show size variants in collection page below price of prodict in shopify

[@WebSensePro]

Will upload soon

[@eugenelim2016]

Hey Bilal ! Crazy value you provided ! Does this snippets still works on the latest upate Dawn 15.0.0 ?

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@Elmo_ehc]

Thanks for this video, i tried to use the comma to control multiple variations and it seems to work but by putting different variation ID, the label above the swatch does not change, as i click had emailed you, see whether i can get it to recognize other ID instead of Just Color.

[@WebSensePro]

Noe clear what you mean here

[@lorraineb2109]

This video is fantastic and easy to follow; many, many thanks!

[@WebSensePro]

Your welcome, don't forget to share and like

[@kittyuuna]

Is there a way to change the outline color of the variant pills?

[@WebSensePro]

Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support

[@andreasschlegel7821]

Hello my friend. First of all thank you very much for your Tutorials! I have a question and I am sure you can help me. I have a dark themed store, which meanns you can not really see which color is selected, because the black border around the color swatch is not visible on a dark backgriund. I want to customize the Border around the round color swatch with a differnet color than Black. for example white or something different. can you help me where to do that?

[@andreasschlegel7821]

I have fixed it myself. Stll thanks for the turorial

[@WebSensePro]

Great!

[@MemorifyStore]

Hi! I loved your video! It worked perfectly with Dawn 14.0! However, I have multiple color variants, and the images are taking up a lot of space. Could we make the image swatch slide instead of occupying multiple rows on the product page? I have over 10 images for colors for my product. It would save so much space and look much nicer. Could you share the code or make a video about it? Thanks, your work is amazing! Keep it up!

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@ArunRihal]

Thank you so much brother

[@WebSensePro]

Always welcome

[@animehymns]

Hello.. May I know how to make it smaller while maintaining the circle ratio? The swatches get oval shape when making it smaller. Thank you.

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@armauploads1034]

Thank you very very very much! It works also with Sense-Theme 🙂

[@josephg5542]

Very nice, how can i change the Swatches border color?

[@WebSensePro]

Log in to your Shopify Admin. Go to Online Store > Themes and click Edit code. Open the color-option.liquid file in the Snippets folder. Update the code snippet: .product-form__input input[type='radio']:checked + label.color-swatch:before { {%- if settings.dark -%} box-shadow: 0 0 0 2px rgb(var(--color-foreground)); {%- else -%} box-shadow: 0 0 0 1px rgb(var(--color-foreground)); //edit this {%- endif -%} border-color: rgb(var(--color-foreground)); //edit this }

[@RegalAllure_shop]

Is it possible to make the variant image swatches go in a different color if it has sold out? or at least disappear from the menu...Like a shirt that I do have size small in yellow but I don't have anymore in size X, so when you click size x the yellow color turn dark or disappear.....is there an easy fix for that?

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@anaisagas]

Hi! Is there any way to add swatches to collection pages? I'm using dawn v15

[@WebSensePro]

Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support

[@attackdog1900]

Could you make an updated video for v14.0?

[@WebSensePro]

Coming, soon!

[@pixeltribune]

Hey there, love your vids, I am having an issue with my Dawn theme v15.0.2 where on product page, if I select any variant the main image doesn't change, can please guide me?

[@steinfransen856]

It's in the global.js , I can share the code with you but don't know how via youtube comments.

[@WebSensePro]

Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support

[@nerminalsawafiri5701]

@@steinfransen856can you share with me

[@kklammmm]

many thanks! you are a hero

[@WebSensePro]

You're welcome!

[@noncin.2786]

does this work for the new Dawn 15.0 version?

[@WebSensePro]

No, please contact via websensepro.com/contact-us for paid support

[@omarqutachi6419]

Saved me good time, cheers legend!

[@WebSensePro]

Your welcome, don't forget to subscribe our channel

[@phomarx]

Trying to get this to work on Dawn 15 but the swatches aren't sticking after clicking them. Always reverts to first color.

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@siriusplayz5871]

This content is pure gold. Thanks a ton for the precious info bro 🙏❤

[@WebSensePro]

My pleasure!

[@StephanieMiller-yk5ui]

how do you make the swatches smaller while maintaining the circle ratio ?

[@WebSensePro]

You can do that via customize settings on this section

[@animehymns]

@@WebSensePro hello can you explain this further? May I know how to make it smaller while maintaining the circle ratio? The swatches gets oval shape when making it smaller. Thank you.

[@KevinWatson-w7z]

This does seem to break in Dawn 15.0. Any chance you have a fix in the works? It looks like Shopify has changed the logic around looping through the variant options {%- for value in option.values -%}

[@WebSensePro]

Yes, if it's functioning correctly, and if not, please reach out for paid support at websensepro.com/contact-us.

[@ShortsFormula374]

does this still work for dawn theme 14.0.0?

[@WebSensePro]

Yes

[@Meta_Avenue]

I implemented transparent header everything is ok but it can't change custom icon color like search icon cart icon and account icon also Can you please explain it how can i change it also thanks

[@WebSensePro]

Please share which theme and version you are using?

[@Meta_Avenue]

@@WebSensePro dawn 13.0.1

[@foreverrussianworld]

Will this tutorial work for Dawn 4.0.0?

[@WebSensePro]

You try this tutorial - kzbin.info/www/bejne/fZ7Vq4djhq2nrcksi=MEqE5KeQSmnvrelA

[@that.blue.sweater]

Will this work on Dawn 14.0.0 too?

[@WebSensePro]

Color swatches dawn v14 tutorial is coming, soon!

[@LuxeyLens]

How Can I do for the version 15.0?

[@WebSensePro]

Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support

[@ExplorerJ-ve1jo]

will this work on Dawn 14.0?

[@WebSensePro]

You can try this tutorial and if it doesn't work, please contact via websensepro.com/contact-us for paid support

[@foreverrussianworld]

Will this tutorial work for Dawn 14.0.0? (i had a typo in my prior comment where i referenced 4.0.0)

[@WebSensePro]

Yes, it's worked for Dawn v14

[@LunarBangchan34]

I accidently hit the publish button from the duplicate dawn theme and color swatches didn't appear on my product page. what should i do to appear it on my product page? the new dawn version is 14

[@WebSensePro]

Switch back to the old theme

[@rajatwaghare]

How to use for Multiple Variations - For example if I have Top Color & Base Color, in that case how can I show multiple swatches ?

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@Meta_Avenue]

❤❤❤❤very thanks sir

[@WebSensePro]

Most welcome

[@Samuel-tz1md]

worked good cheers

[@WebSensePro]

Glad it helped

[@deepakbisoyee5622]

Thank You so much sir this video is very helpful thanks alot..

[@WebSensePro]

Most welcome

[@Beautifulcomments]

This is amazing, but I can only add 1 product image per colour - and it still shows the other images of each. How do I add multiple variant images and only show the chosen one.

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@A1ic0]

I have encountered a bug, when i click one of the colors it immediately switches to another. Do you have any suggestions?

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@koolkool3526]

This is not working in the sense version 15.0.0 theme, how to fix it, after clicking that variant is not opening 😢

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@pratyakshsomani]

not working with Dawn 15

[@WebSensePro]

kzbin.info/www/bejne/nWqwg6ahf751d6csi=Mib7AnCtj7ITu__y

[@WorldwithoutReligion-j1l]

Good but its only support one swatches, how can apply on multiple swatches?? I subscribed your channel

[@WebSensePro]

This feature is not yet available on this but soon will create a new video on that too

[@millionaresecrets7862]

Thanks a lot

[@WebSensePro]

Welcome 😊

[@anthonytriv]

everything fine but when i change color swatches the name stuck at black

[@WebSensePro]

That's weird it should work fine

[@olgabaykova8338]

Hello, thank you! But with Dawn 14 it does not help (

[@WebSensePro]

Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support

[@faridhashim9938]

Nice bro your channel is incredible don't make it paid

[@WebSensePro]

I will try my best

[@Lakshmilucky-ey1of]

it will work in xtra theme

[@amenti_rs]

ur the man

[@siriusplayz5871]

How can I achieve the following: I created a contact Lens store for someone and they want dropdown options for eyesight numbers for powered Lenses.. For example: Left eyesight No: -0.00..more options Right eyesight No: -0.75..more options How can I achieve this on Dawn. I'm currently using App for this option but I want to do this through code and have option inside the dawn theme. They also want more complex scenario.. Buy 2 lens pack: Select 1st lens Color: 1st lens left eyesight Number: 1st lens right eyesight number: Select 2nd Lens color: 2nd lens left eyesight Number: 2nd Lens right eyesight Number:

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@James-qi2sf]

Legend

[@jayukekan3778]

my not working

[@WebSensePro]

Will have to check for Premium Support contact websensepro.com/contact-us

[@georgetheis9564]

DOESNT WORK FOR ME

[@WebSensePro]

kzbin.info/www/bejne/nWqwg6ahf751d6csi=Mib7AnCtj7ITu__y

[@immobilien-makler]

I don't understand how this guy in the video has different functions in Shopify than me. I don't have the same functions under SETTINGS as he does. how did he do that?

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@jayukekan3778]

why sir

[@WebSensePro]

??

[@ArunRihal]

please never make your channel paid for code and other things like another making because this is just a way to lose your audience.

[@WebSensePro]

Noted

[@CliftonLo]

So far by Color Hex Code it works on Dawn 14.0.0. Thanks a lot mate! However, I have SKUs that are MULTI / MISC Color - which I tried to follow the instruction "You can also add image files instead of using colors, in lowercase with spaces replaced by hyphens. Example: Green kaki: green-kaki.png" My SKU Color Name: Misc Field Entry: Misc: misc.png Any idea why this is not working ?!?! 🤔

[@WebSensePro]

Will have to check

[@DiannaOestergaard]

[@WebSensePro]

Thanks

[@James-qi2sf]

Legend