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.
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!
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?
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!
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.
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?
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.
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?
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
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?
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 -%}
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 }
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
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.
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 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.
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:
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?
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 ?!?! 🤔
![How To Add Color Swatches [Dawn 15.1.0]](http://i.ytimg.com/vi/g9MRskJYBAE/mqdefault.jpg)
![How To Add Slider in Product Page Shopify [Dawn v15 Updated]](http://i.ytimg.com/vi/7pk4pbKSQv4/mqdefault.jpg)
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.
Thanks for notifying we will definitely check it
It works now
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!
FANTASTIC! This was EXACTLY what we were looking for! You're a life saver!
Glad it helped! Please share this on your network as a favor
Very nice video bro ✌🏽 Now just a Video with Color Swatches on collection page is missing 😁
Would be happy to see this.
Will do soon
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?
Yes it's possible with Liquid and CSS customization
OMGGGGG this is the first tutorial out of many that actually worked. Amazing thank you!! A life saver!
You're welcome!
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!
Thank you so much!
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?
Hmm... thats doable
@@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!
Hey Bilal ! Crazy value you provided ! Does this snippets still works on the latest upate Dawn 15.0.0 ?
Please contact via websensepro.com/contact-us for paid support
Thank you for this!!! Is there a way to line-out the swatches when a variant is out of stock?
Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support
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!
Please contact via websensepro.com/contact-us for paid support
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.
Please contact via websensepro.com/contact-us for paid support
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?
I have fixed it myself. Stll thanks for the turorial
Great!
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.
Noe clear what you mean here
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?
Please contact via websensepro.com/contact-us for paid support
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.
Please contact via websensepro.com/contact-us for paid support
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
Great, thanks for letting us know
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?
It's in the global.js , I can share the code with you but don't know how via youtube comments.
Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support
@@steinfransen856can you share with me
Hi! Is there any way to add swatches to collection pages? I'm using dawn v15
Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support
This content is pure gold. Thanks a ton for the precious info bro 🙏❤
My pleasure!
Will this tutorial work for Dawn 14.0.0? (i had a typo in my prior comment where i referenced 4.0.0)
Yes, it's worked for Dawn v14
Absolute legend. I owe you my life.
Will this tutorial work for Dawn 4.0.0?
You try this tutorial - ua-cam.com/video/GmrzT-QHtwg/v-deo.htmlsi=MEqE5KeQSmnvrelA
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 -%}
Yes, if it's functioning correctly, and if not, please reach out for paid support at websensepro.com/contact-us.
does this work for the new Dawn 15.0 version?
No, please contact via websensepro.com/contact-us for paid support
Is there a way to change the outline color of the variant pills?
Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support
Very nice, how can i change the Swatches border color?
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
}
How to show size variants in collection page below price of prodict in shopify
Will this work on Dawn 14.0.0 too?
Color swatches dawn v14 tutorial is coming, soon!
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
Please share which theme and version you are using?
@@WebSensePro dawn 13.0.1
will this work on Dawn 14.0?
You can try this tutorial and if it doesn't work, please contact via websensepro.com/contact-us for paid support
This video is fantastic and easy to follow; many, many thanks!
Your welcome, don't forget to share and like
does this still work for dawn theme 14.0.0?
Yes
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.
Please contact via websensepro.com/contact-us for paid support
How to use for Multiple Variations - For example if I have Top Color & Base Color, in that case how can I show multiple swatches ?
Please contact via websensepro.com/contact-us for paid support
I have encountered a bug, when i click one of the colors it immediately switches to another. Do you have any suggestions?
Please contact via websensepro.com/contact-us for paid support
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
Switch back to the old theme
how do you make the swatches smaller while maintaining the circle ratio ?
You can do that via customize settings on this section
@@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.
New suscriber, thank you every much
Thanks for the sub!
This is not working in the sense version 15.0.0 theme, how to fix it, after clicking that variant is not opening 😢
Please contact via websensepro.com/contact-us for paid support
How Can I do for the version 15.0?
Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support
Good but its only support one swatches, how can apply on multiple swatches?? I subscribed your channel
This feature is not yet available on this but soon will create a new video on that too
Thank you so much brother
Always welcome
Could you make an updated video for v14.0?
Coming, soon!
many thanks! you are a hero
You're welcome!
Thank You so much sir this video is very helpful thanks alot..
Most welcome
Saved me good time, cheers legend!
Your welcome, don't forget to subscribe our channel
Hello, thank you! But with Dawn 14 it does not help (
Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support
Nice bro your channel is incredible don't make it paid
I will try my best
it will work in xtra theme
❤❤❤❤very thanks sir
Most welcome
worked good cheers
Glad it helped
Thanks a lot
Welcome 😊
ur the man
everything fine but when i change color swatches the name stuck at black
That's weird it should work fine
Legend
not working with Dawn 15
ua-cam.com/video/g9MRskJYBAE/v-deo.htmlsi=Mib7AnCtj7ITu__y
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:
Please contact via websensepro.com/contact-us for paid support
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?
Please contact via websensepro.com/contact-us for paid support
my not working
Will have to check for Premium Support contact websensepro.com/contact-us
DOESNT WORK FOR ME
ua-cam.com/video/g9MRskJYBAE/v-deo.htmlsi=Mib7AnCtj7ITu__y
why sir
??
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 ?!?! 🤔
Will have to check
please never make your channel paid for code and other things like another making because this is just a way to lose your audience.
Noted
Thank you very very very much! It works also with Sense-Theme 🙂
Thanks
Legend