🌟Learn the JavaScript side of Shopify Development: codingwithjan.com/javascript?src=swatches-yt 👨💻Find a reliable Developer for your project: www.codingwithjan.com/hire-a-developer
Finally development videos 😂❤️ Thank you, it's a good idea to let other people to make the videos as long as it will have the same simplicity as your videos 👏
what an amazing tutorial. I only wanted to change my radio buttons to swatch circles. i didnt want the 10 or 20 other customizations for a product, and i didn't want to manuall add swatches to every product like most shopify apps were designed to do. I JUST wanted to have little circles. I have experience in HTML, some css and other stuff. This tutorial was fantastic and helped me do what I needed
Hey Jan, thank you for the development videos. Just an addition with these color swatches, instead of uploading a png, we can use the background-color style and give them value name as a color like this: Thank you!
Yes! Loved these style videos from you! 🙏🏽 Your previous ones really helped me build my website and I really plan to revamp it this year 🙌🏽 Josie was great! What a natural teacher! Her directions were so clear and detailed! 🙏🏽 Keep up the great work everyone!!
Great to see your publishing more technical content on the channel again! Thanks for this awesome tutorial Josie - really neat and user-friendly approach to swatches!
@@CodingWithJan Just a few suggestions: - Filters, Free shipping bar in cart, Coupon code in cart, Checkout page edits, Shopify Hydrogen, built a simple shopify app, slider notice/announcement bar etc. and more like you used to do in the beginning of the channel:) Anyways, Keep up the good work :)
great video but i have design custom section for home page to show product grid i want there color swatches when some one select any color image also change, Do you have any video for that?
This is a great tutorial! One question - some colors come in to Shopify as two words creating a filename of, for example: Heather%20Orange.png. File uploads don't honor the same name and convert % character to underscore, and can't be renamed. Any thoughts on approach for color names with two words?
Thanks Jan for a very good beginner friendly video, which will help many Shopify users! Would you like to do a video of how to add these to the product card without the size radio buttons. Meaning that you would only need to add the variant options with color. And also make them hoverable to see the product variant image and also clickable to the variant url :)
Is there an easy way to save a set of variant options to put across similar products on Shopify? For instance: an apparel business that sells 50 different designs that are each listed as a separate product but each design has variants for size, color and style: tank, tee and sweatshirt. Instead of having to manually put in hundreds of prices for every single product, is that a fast way to pull in the same pricing for each style across all product listings? So all tanks are the same price, all tees are same price, etc.
Hi Jan, love your content. I managed to code the swatches on product page (there dawn 9.0), however I need to add the same swatches on collection pages, bellow the title for each product. Can you advise me on that?
Just wanted to say it is a good video however, I have some points that are important take notice of, 1 the theme has been updated, 2 Sometimes I miss the reasoning behind some of the choices that would make it more clear
Hi Dorothy, Thank you for the suggestion regarding the addition of express checkout buttons to the Dawn theme cart drawer. I'll be sure to forward this to Jan, and if it aligns with our content direction, we can definitely consider adding it to our list of video topics. Your input is important to us. Best, Joy (Team)
Can someone point me to the video on how, if you change picture, the varient pill also changes! Very nice video this one! I'll come back for this one later!
Hi, Question is, this is going to get aplied for all the products by doing this ? or just for the specific product that we are previewing? any advice helps guys, because im worried if i have to do the same for all products since i have a lot. Thanks in advance!
Hello, I want to build a shopify store from scratch and I have API's from my suppliers that I want to add. How does this tutorial differ? and would you have a tutorial for adding API's? Because I am so confused right now.
Hi do you know if this works for impulse paid them. I have recently purchased for 350! And when i contacted them there no were to be seen... lol. As there theme comes with colour swatches already i'm trying to edit the colours on the swatches i have followed there instructions on there example page and it doesn't work......Does anyone know any videos or information on this 🙏🙏🙏
Hi Jan! Is there any way you can help me with my theme? In the Demos of the Theme before buying it it shows that the color swatches option is possible, but after buying it i am not able to add the color swatches. Thank you!
Hello, thank you the tutorial was very helpful and as a beginner I was able to make all the changes myself on my website. Can you also help to provide insight on how to have the color name show when you hover or click on the swatch?
This is called a "tooltip". The easiest implementation would be using the "title" attribute on an html element stackoverflow.com/questions/7503183/what-is-the-easiest-way-to-create-an-html-mouseover-tool-tip
Hello, thank you for this great tutorial. I applied this step by step and the result was great, however I have one problem. The featured picture for the product doesn't disappear when I select a different color, how do I fix this?
You have to set a variant picture for each variant on the product page directly. This doesn't require any coding, it's just part of the Shopify admin panel functionality.
Hello Ela, The Files section, previously found in the settings, has now been relocated. You can access it by clicking on the Content tab, located on the left-hand side of the Shopify Admin. Hope this is helpful. Best, Joy (Team)
@@markob17 Hey, not sure if you still need help but the code for the newer version of the Dawn theme is located in "product-variant-options.liquid" at around line 62
I want to add variant name like Royal Blue. But when I TRY to upload this name image file on shopify it's coming like Royal_Blue. So I can I fix that?🤔
Hello I added this to the value portion and it worked for me. {{ value | replace:"_", " "}}. And here is where I applied it. {{ value | replace:"_", " "}}
Hi BSR, Yes, in Shopify, you can create private or password-protected pages in a couple of ways: Creating a custom private page using liquid or using apps. If you require further assistance, we're here to help, or we can find someone who can. Can you send us a message via our website? (link in the description) Best, Joy (Team)
A+. We would be interested in some insights with the SHOPIFY CONTACT US PAGE - as we are starting to get a lot of spam. Any development insights to slow down , stop spam to the Shopify Contact Us page?
![How To Add Color Swatches [Dawn 15.1.0]](http://i.ytimg.com/vi/g9MRskJYBAE/mqdefault.jpg)
🌟Learn the JavaScript side of Shopify Development: codingwithjan.com/javascript?src=swatches-yt
👨💻Find a reliable Developer for your project: www.codingwithjan.com/hire-a-developer
if anyone is struggling to find the files tab in settings, it was moved and is now the content tab.
Thank you so much for this comment! You're a gem
@CodingWithJan should edit this somehow
Finally development videos 😂❤️ Thank you, it's a good idea to let other people to make the videos as long as it will have the same simplicity as your videos 👏
You acutually pushed me haha 😁
So gotta say thanks for that! 😄
This tutorial made my day
Im using latest version of dawn theme, and the code isnt the same..
what an amazing tutorial. I only wanted to change my radio buttons to swatch circles. i didnt want the 10 or 20 other customizations for a product, and i didn't want to manuall add swatches to every product like most shopify apps were designed to do. I JUST wanted to have little circles. I have experience in HTML, some css and other stuff. This tutorial was fantastic and helped me do what I needed
Is this for an older version of the themes? Cannot seem to find this line of code in the ride theme.
Hey Jan, thank you for the development videos. Just an addition with these color swatches, instead of uploading a png, we can use the background-color style and give them value name as a color like this:
Thank you!
Yes! Loved these style videos from you! 🙏🏽 Your previous ones really helped me build my website and I really plan to revamp it this year 🙌🏽
Josie was great! What a natural teacher! Her directions were so clear and detailed! 🙏🏽 Keep up the great work everyone!!
Its too good,
My question is how can i show the select color name as well,
Color : Pink
Thanks in advance
Great to see your publishing more technical content on the channel again! Thanks for this awesome tutorial Josie - really neat and user-friendly approach to swatches!
Hey Liam, thanks so much for the great feedback and taking a look!! 😃
I'll make sure Josie also gets to hear it!
Thank you, true story, all the swatches I use on my shopify projects are all from your first tutorial
Yeessss! Love thisss! Keep it up Jan!
Josie is amazing! They did such a good job and I would love to see them in more videos! So helpful!
Hey Arctic, thank you!!
Can you please help us with 9.0.0 version?
Love this idea Jan! As a fellow freemoter, I was so excited to learn from Josie! Well done and I’m excited to give this a try! Keep up these videos!
You're the best! :-) I'll make sure Josie gets your great feedback. Thank you Kim! 😃🙌
Thanks, Josie--this was super helpful!
Please Go on Jan! We need more technical videos like these
In the making already!! :-)
let us know wat you'd like to see!
@@CodingWithJan Just a few suggestions: - Filters, Free shipping bar in cart, Coupon code in cart, Checkout page edits, Shopify Hydrogen, built a simple shopify app, slider notice/announcement bar
etc. and more like you used to do in the beginning of the channel:) Anyways, Keep up the good work :)
Very clear and well narrated video ! ❤ Thanks.
it doesn't work with DAWN 10 the new upgrade, there is no file in the setting to upload the color files
how would we do it in DAWN 10
Hi Jan, thanks for the video. Is there a way to include the colour name when you hover of the swatches?
great video but i have design custom section for home page to show product grid i want there color swatches when some one select any color image also change, Do you have any video for that?
Nice tutorial for color swatch
Thank you Dude! For this wonderful tutorial
Love this type of content 🙏 thanks and keep it up 👍
Awesome!! Thanks so much for the great feedback. :-)
Great video. I do a different approach. Instead of using images, you can create css variables that can be specified in the settings.
Hi!
Thank you, very much, this video is amazing and so helpful!
Awesome!! Glad the content was helpful. :-)
This is a great tutorial! One question - some colors come in to Shopify as two words creating a filename of, for example: Heather%20Orange.png. File uploads don't honor the same name and convert % character to underscore, and can't be renamed. Any thoughts on approach for color names with two words?
Solved. For others, remove the spaces from the Color name: {{ value | remove:" " | append: '.png' | file_url}}
@@ChristineG-y5k thank you
@@ChristineG-y5k love u bro
How do you add the color variants to the product card in list views?
Doesn't work can't find the "varient-radios" on any theme which is weird
How can I use the images which are shown on the left within the color swatches? Only small, that way you can see it directly right
Thanks Jan for a very good beginner friendly video, which will help many Shopify users! Would you like to do a video of how to add these to the product card without the size radio buttons. Meaning that you would only need to add the variant options with color.
And also make them hoverable to see the product variant image and also clickable to the variant url :)
Is there an easy way to save a set of variant options to put across similar products on Shopify? For instance: an apparel business that sells 50 different designs that are each listed as a separate product but each design has variants for size, color and style: tank, tee and sweatshirt. Instead of having to manually put in hundreds of prices for every single product, is that a fast way to pull in the same pricing for each style across all product listings? So all tanks are the same price, all tees are same price, etc.
Great Video! Question is there a way to add the name of the color when you are in the hover state of the button?
yes, just hide the text with display: none; then while hover display it with display: block;
Hi Jan, love your content. I managed to code the swatches on product page (there dawn 9.0), however I need to add the same swatches on collection pages, bellow the title for each product.
Can you advise me on that?
There is no files option in shopify help plz
Its under content G
Just wanted to say it is a good video however, I have some points that are important take notice of, 1 the theme has been updated, 2 Sometimes I miss the reasoning behind some of the choices that would make it more clear
can you also make a tutorial how to add express checkout buttons to Dawn theme cart drawer? which dont disappear on cart refresh
Hi Dorothy,
Thank you for the suggestion regarding the addition of express checkout buttons to the Dawn theme cart drawer.
I'll be sure to forward this to Jan, and if it aligns with our content direction, we can definitely consider adding it to our list of video topics. Your input is important to us.
Best,
Joy (Team)
How to make collapsible of description and tabs below tha..
Can someone point me to the video on how, if you change picture, the varient pill also changes! Very nice video this one! I'll come back for this one later!
Can you do an update for Dawn Version 12?
Anyway to do this with the spotlight theme?
She did a very nice job was super easy to follow!
Any example of Shopify for selling digital services online?
Hi, Question is, this is going to get aplied for all the products by doing this ? or just for the specific product that we are previewing? any advice helps guys, because im worried if i have to do the same for all products since i have a lot. Thanks in advance!
Thank you that's great ! But I have a problem, now the variant cannot be clicked (I made sure i wrote the code correctly). I'm using the sense Theme
Hello, I want to build a shopify store from scratch and I have API's from my suppliers that I want to add. How does this tutorial differ? and would you have a tutorial for adding API's? Because I am so confused right now.
Hi do you know if this works for impulse paid them. I have recently purchased for 350! And when i contacted them there no were to be seen... lol. As there theme comes with colour swatches already i'm trying to edit the colours on the swatches i have followed there instructions on there example page and it doesn't work......Does anyone know any videos or information on this 🙏🙏🙏
Great video. Unfortunately doesn´t work anymore with the 8.00 Dawn Version
the changes now need to be made in the product variant options not main product file
Hi Jan! Is there any way you can help me with my theme? In the Demos of the Theme before buying it it shows that the color swatches option is possible, but after buying it i am not able to add the color swatches. Thank you!
5 months later and Dawn 10.0.0 code looks COMPLETELY different from the tutorial 😭
I just updated to version 8 and this code was not the same for me, i could find this part of it
Please make a video on how to disable 'auto select 1st variant' on product page with multiple variants on Dawn theme
You mean that we don't autoselect the first one?
@@CodingWithJan yes there should be a drop down menu for all variants just like empire theme
Hello, thank you the tutorial was very helpful and as a beginner I was able to make all the changes myself on my website.
Can you also help to provide insight on how to have the color name show when you hover or click on the swatch?
This is called a "tooltip".
The easiest implementation would be using the "title" attribute on an html element
stackoverflow.com/questions/7503183/what-is-the-easiest-way-to-create-an-html-mouseover-tool-tip
Excelent thanks
I want to add Royal Blue as a variant option but when I upload the file name always comes like Royal_Blue. How can I fix it?
What if we can do it by HTML Color Names Supported by All Browsers. This way we don't need to put manual colors swatches images?
Thats great
Awesome!! Glad the content was helpful. :-)
seems to be not working in Dawn 8.0 there is no such code there:(
Hello, thank you for this great tutorial.
I applied this step by step and the result was great, however I have one problem.
The featured picture for the product doesn't disappear when I select a different color, how do I fix this?
You have to set a variant picture for each variant on the product page directly. This doesn't require any coding, it's just part of the Shopify admin panel functionality.
woooowooowoowo you are the best
This is pretty cool, but I kind of don't like out all the circles have an outline even when not selected. Any way to get rid of that?
i fixed it :)
hello! Now there is no option files in the settings to upload the colors we made in canva! how can we solve this problem? thank you
Hello Ela,
The Files section, previously found in the settings, has now been relocated. You can access it by clicking on the Content tab, located on the left-hand side of the Shopify Admin.
Hope this is helpful.
Best,
Joy (Team)
@@markob17 Hey, not sure if you still need help but the code for the newer version of the Dawn theme is located in "product-variant-options.liquid" at around line 62
Does this have to be done for every product separately?
I doubt it. Should be automatic but you'll have to do all your colors for all products and name all the files right
I want to add variant name like Royal Blue. But when I TRY to upload this name image file on shopify it's coming like Royal_Blue. So I can I fix that?🤔
Hello I added this to the value portion and it worked for me. {{ value | replace:"_", " "}}. And here is where I applied it.
{{ value | replace:"_", " "}}
Is there a way to make private pages?
Hi BSR,
Yes, in Shopify, you can create private or password-protected pages in a couple of ways: Creating a custom private page using liquid or using apps.
If you require further assistance, we're here to help, or we can find someone who can.
Can you send us a message via our website? (link in the description)
Best,
Joy (Team)
why code site is not working
Does it still work?
Any chance you've ever experienced only SOME of the color backgrounds showing and some not showing? What could be causing this?
Things I'd check first are
1) file names (only letters to be safe)
2) file formats (all the same ideally)
And to complete this you should have added how to display the name of the color (instead of adding another white ring). But anyhow, nice tutorial.
It helps!
but unfortunately, it is complex and difficult...
Vivek bhaiya se shikho tab btaao
out dated
A+. We would be interested in some insights with the SHOPIFY CONTACT US PAGE - as we are starting to get a lot of spam. Any development insights to slow down , stop spam to the Shopify Contact Us page?
a captcha may help in that
@@tapank415 thanks we have captcha thru Shopify automatically on the page
Thanks so much for the great feedback! :-)
And we can definitley cover that topic also!