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.
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.
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?
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.
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!
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 -%}
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.
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 }
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
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?
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 ?!?! 🤔
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?
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 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
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
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 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 To Make A Transparent Header in Shopify [Dawn 13.0.1]](http://i.ytimg.com/vi/wKnnViwjBrs/mqdefault.jpg)
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!
OMGGGGG this is the first tutorial out of many that actually worked. Amazing thank you!! A life saver!
You're welcome!
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
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
Absolute legend. I owe you my life.
This content is pure gold. Thanks a ton for the precious info bro 🙏❤
My pleasure!
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
This video is fantastic and easy to follow; many, many thanks!
Your welcome, don't forget to share and like
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!
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
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
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
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.
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
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
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
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
}
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
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
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! 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
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
New suscriber, thank you every much
Thanks for the sub!
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
Thank You so much sir this video is very helpful thanks alot..
Most welcome
it will work in xtra theme
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
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
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!
Thank you so much brother
Always welcome
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
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
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
Nice bro your channel is incredible don't make it paid
I will try my best
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
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 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
Saved me good time, cheers legend!
Your welcome, don't forget to subscribe our channel
many thanks! you are a hero
You're welcome!
does this work for the new Dawn 15.0 version?
No, please contact via websensepro.com/contact-us for paid support
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
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
does this still work for dawn theme 14.0.0?
Yes
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
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.
Could you make an updated video for v14.0?
Coming, soon!
Thanks a lot
Welcome 😊
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
❤❤❤❤very thanks sir
Most welcome
worked good cheers
Glad it helped
Will this tutorial work for Dawn 4.0.0?
You try this tutorial - ruclips.net/video/GmrzT-QHtwg/видео.htmlsi=MEqE5KeQSmnvrelA
ur the man
Will this work on Dawn 14.0.0 too?
Color swatches dawn v14 tutorial is coming, soon!
Legend
everything fine but when i change color swatches the name stuck at black
That's weird it should work fine
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
my not working
Will have to check for Premium Support contact websensepro.com/contact-us
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
why sir
??
Legend