Hello everyone ! In the first 10 minutes of this video I will explain Shopifys default variant switch mechanism in depth. If you are into shopify development this might be very interesting/important to you. If you just want to implement this within the Debut Theme you can also skip to minute 10 and simply copy what I do. Anyways I hope you have fun watching and hope you learn something new :-)
Hi Jan loved the video it helped so much thanks I just have a question. I have noticed when you upload the assets it does not load double name colours is the a way to get the swatch to display a color such as light blue baby pink etc without adding a - or _ to the variant color so it has a professional look such as Light Blue instead of Light_Blue
Thanks for all the videos made by you ........smooth and clean concepts.......Please create color swatches for the product page (variant switch explained) for the Dawn 15.2 theme
Great Tut! Worked perfectly on my project thus far. Now I have to figure out how to change the 'sizes' to boxes instead of a drop-down! lol Great work!
Great video! What I found useful was to create a separate template and a separate section. That way I can switch back to the default product template easily if I mess anything up, or if I want to have a product where swatches make no sense :)
Amazing tutorial. Easy to follow and it works perfectly. My page looks 10x better thanks to Jan's tutorial. Looking forward to more of your tutorials. Keep up the good work.
A very perfect explanation of all the elements that works with color swatches. Your tutorial is much more good than udemy that I purchased a few days ago. Thanks man! Hope you will also start making video tutorial for mega menu & some more complex stuffs as well. Thanks!!!!
Hey Towhidul ! Fantastic to see you back here and I love that you still enjoy the content :-) The next 1-2 videos will be some small hacks to increase the average order value and the customer lifetime value. Megamenu is definitely something I want to cover as well soon. I hope to see you back then and have an awesome day!
Thank you so much Jan! Your content made it a no brainer for me to go for Debut as a non-technical guy. I was wondering, what would be required to implement the same design on a "Featured product" section on the homepage?
Great video, for some reason my colors look different. How to change the appearance of the boxes, for example make them round and how to ad a border (white is invisible atm)?
Hi Jan! Thanks for good video. I need to show products varients in collections page as like the single product page for customers convenient. How could i do can you helpme to do?
Thank you for this wonderful tutorial. I am using a theme that is very similar to Debut with some additional features. My issue happens here (minute 15:23 of the video). The SingleOptionSelector of my theme shows up this way: '.single-option-selector__radio'. It doesn't show like yours "single-option-selector + section id". Does this change something? Isn't it possible to do it with this one?
Hi Jan! Thanks so much for this tutorial, most helpful! Not sure if you're still checking these comments, but I'm having a problem getting two of my swatch images to show... Both file names are more than one word i.e. 'name-name.jpg' and 'name-name-name.jpg'. 'Is there a specific naming convention I should follow?? Usually, using a '-' between each part of the name works fine, but not here. On the front-end I get this no matter what I try! Thank you x
Hey Jan, could you please make a video on how to make color as swatches and size as dropdown in dawn theme. I'm implementing this but having errors when i use both swatches but it works correctly when i have only one option. Many thanks
Thank you so much for this amazing description which makes the coding easier and more simple. But I have a question about the number of variants, is there any limit because the variants are coming in one long line which exceeds the page width. So, how to limit the number of images in the line. Thanks.
Hey Jan, thanks for this video but this method doesn't seem to be working with the latest version of debut 17.14.1 Could you recommend and solutions? Thanks !
Hi Alexandre. Basically you could uplaod a small product image instead of a plain single color swatch. This might become difficult if you have a lot of products thought. You could also consider to use an app.
hey, Thank you for the video. You have explained the steps and flow very nicely. I was trying to do the same thing but in the 'Supply' theme. I was able to replicate few steps but I was not able to call the method in 'theme.js' to change the values on the web page. Can you please help me how to call the correct method using radio buttons?
What a great tutorial! Very valuable! Is this also working with input type "button" instead of color swatches? We want to create product options ourselves instead of using apps for it.
Hi Johnny :-) Technically it is very possible but the implementation might be a little bit different from theme to theme. Sorry I can´t provide the full solution here as it really depends on your theme. Basic JavaScript and HTML knowlege will be requiered.
Thank you so much for this tutorial! The only problem I’m having is that the swatches are present and functioning as buttons, but the variant title is above the swatch (e.g blue, black etc.) and it is shifting the variant swatches downwards. I want to make it look like the example but it still includes the text. Thanks in advance for your help!
Super helpful video, work 10 times better than the precode shopify one which everyone links all the time :D . I'm just curious, how to add a second label under the {{option.name}} which shows the currently selected variant value (the color name)? I assume it does not requer to many digits, maybe someone know the answer? Thank you. Regards :)
Hi Jan amazing tutorial. I almost feel like I could do this coding myself. I wanted to ask you about a typo. At 19:15 there was a typo between was spelled 'bewteen'. It didn't affect the outcome of the code. That was interesting. Or did you change the word while we weren't looking? Or did the computer spell check it for you when you selected Save? I thought little things like that were pretty important in coding. Cheers Howard
Hey Howard, That's great that you noticed it That line of code was supposed to create space between the colors, although the margin does the same thing. Having only one of the two could work actually😀 Have a nice day!
Thank you Jan for another great tutorial, really helpful and clear like all of your videos. Would it be too complicated to add the functionality to display the color name we have selected, next to the word "Color"?
working perfectly. thanks, bro how can I add the prices In the swatches? As I need to make like a button with the name and price. I developed the button but can't able to display the price
Thanks the video is good. how to create new custom variants to the theme. For example, My Shopify theme does not support the color option how to add new option, when user visit the product page select color for the product and then click add to cart, any link, video link is appreciated
Hi, It was a detailed tutorial! thank you for that, however I have a questions. where did you define option.name? that you match to option name "color". Did not see you adding that anywhere! can you please tell?
Hey there! Thank you very much for you help. Unfortunately it doesn't work for me because I want to build two color swatches at one product and the "endif" and "if"-tags set by you thwo me errors.. could you help me with this one? PS: german & english is ok
Hi Jan, If I want to use the color set by the name of the color in product.variant.option3 (or option1) to be used as a built in html color, and then for the colors that do not exist, how would I do that?
Hey Jan, How do I change the "name" or "title" of a variant using code. The (current) default is printed on the checkout page, and want to display something different.Thanks.
@@CodingWithJan I am trying to get alt tag to work with the swatches, I added alt="{{value}}" to the img src, which shows in developer view code but doesnt show when mousing over swatch
How would you choose different colors for different products? Wouldn't the way that you are showing apply those same variants to all products by default?
I'd suggest you right click on your page and then click on inspect. Within the chrome developer tools you can switch to the console tab. Here you might see some error message when you switch a variant. This might already help :-) Are you using the debut theme?
@@CodingWithJan Hi! Thanks for you prompt reply! I have followed all the instructions, except I typed "between" instead of "bewteen" closer to the end cause I though you have misspelled it. The color swatches do appear but they do not function as I am unable to select any of them.
Alright let's get this to work 😀👍 Are you working in the debut theme or any other? Do you get any javascript error in the developer console when you click on one of the swatches?
Hi Jan, thank you for the video it is very informative. I want to create the swatches for sizes. we have one size just called EU (for shoes i.e 40, 40.5, 41 etc.) and the other one just called size(for t-shirts and stuff i.e. S, M, L etc.). Would I just have to write the code twice once for the EU size and the other for size?
Change in variant options should change the product image to assigned image of selected variants on collection page.... please make video on this please plzzz
Hello Jan! Thanks for this video, appreciate it a lot. One thing, I followed everything on the tutorial but somehow my product images are now small and weirdly arranged, also they won't change on click, instead, the file (as in the .jpg file) will open up in a new tab. Would you happen to know what did this? I'm using Debut theme as well. Thanks!
can you upload the code you used in he product-template.liquid file ? because for me the radio buttons work but the label is not showing, so there is no "color" besides the radio button.
Hi Lucian, here you can find the markup: pastebin.com/xrwEXjPH Also make sure to have swatch images available in your assets folder. Hope that helps :-)
Hi Foysal, I have a video on hiding unavailable variants in dropdown lists but think it would need some heavy modification to work with swatches. You might consider to consult with a developer here.
Hey there, one way to do it on css would be to apply to the class: border-radius: 50%; /* some code for Box Shadow */ www.cssmatic.com/box-shadow - i use this site and its amazing, hope it helps !
Danke für das Video. Leider befindet sich in meinem Assets Order keine "theme.js" Liegt wohl daran dass es ein themeforest theme ist. Wüsstest du einen anderen Bereich in dem man die Einstellung finden kann?
Hi, spontan würde ich sagen app.js oder theme.min.js wären noch gängige alternativen. Das entscheidet allerding der Theme Hersteller. Der Code in diesen Datein wird dann aber vermutlich auch stark abweichen. Vielleicht lohnt es sich da eher einen Entwickler ins Boot zu holen. Auf Fiverr dürfte man da recht kostengünstig fündig werden :-)
Hi Jan, first of all thank you for your awesome tutorials! As you are talking in this video about variants and colours, maybe you can help me with a very specific problem regarding that topic. I sell products with different colour variants called e.g. "glacial ice" (which belongs to the colour family "blue"). In my shop navigation I want the products to be filtered by colour families. As the tag is attached to the product, not to the variant, I'm not able to filter this way. Question: is there any way to attache the tag "blue" to my variant called "glacial ice"? Or is there any kind of workaround I can accomplish as a person who has no clue about coding? I would be so happy, if you could give me a hand here! Thank you so much and have a great day, Maria
Hi Maria, nice to meet you. Great difficulty you picked there.😄 Your problem description was also pretty good :-) So in order to add a custom field to your variants I suggest you use Metafields. I also have video on how you can use them. Metafield per default aren't searchable though. You would need to use an app to bring these to the surface. I know that this one is capable of doing so. apps.shopify.com/searchanise That beeing said I also have to mention that I never set that up myself, but the approach sounds pretty promising to me. Hope that helps :-)
@@CodingWithJan Hey Jan, thanks for your quick response! I've watched your video tutorial about metafields as you suggested. I was also able to create metafields for a product variation using the app metafield guru. But then I got stuck... Can't I just hire you for solving that problem for me? All the best and have a great day, Maria
Hello I am trying to add color swatch to the subject of venture, I was having a bit of trouble with the color "Light Blue" "Royal Blue", it seems these colors do not work when there is a space. Can you instruct to correct these colors?
Hi, My products have a lot of variants (we sell phone cases) and there's always a default preselected variant but I don't want that, I want the customer to have to choose their phone model before being able to add to cart. Is there a way I could get this done?
I am using debut theme. However I get undefined variable on console. Also I am using the copy theme not the published theme. The swatches will not highlight appropriate color item.
I am using the modern Debut theme, the code works perfectly on desktop, but the thumbnails have strange behavior on mobile. are you facing the same issue?
Amazing tutorial! Thank you for such useful content! 1Q: Will this code change all variants for all products right? Is it possible to change a single product variant? thanks
You could create a separate product template in your theme files and use it only for the products that you like :-) If you don't know how to create a seperate template you could see that in the beginning of my video on custom products. Hope that helps 😀
@@samakanan1597 in this case they wont be affected as we don't make any changes to these. You need to copy the product-template.liquid (You can call it product-template-swatches.liquid or something) And you need to copy the product.liquid. (You can call it product-swatches.liquid) in your product-swatches.liquid you will then need to include your product-template-swatches.liquid. You can see that at the beginning of my video on custom products :-)
Hey Great tutorial! My colour swatches are showing twice. I've followed the exact code from the tutorial, everything else works perfect. Do you know why it would be showing twice?
Hey Jan! I can't seem to make the hide sold out or out of stock in mine, (www.annly.com.mx) I would love to only show options with the available stock, however I didn't upload all items, only the ones I have : for example a medium black short (don't have any) so 0. does this make sense?
Hi Jan, The last CSS is not working for me. I still have the check boxes, the border didnt show up and the swatches are still vertical. Nothing changed. Can you help please?
Hey, there it seems that none of the CSS rules are applied to your frontend. Are you using the debut theme and did you add the CSS to the bottom of your theme.scss?
Lets Build Shopify Yes. I am using the debut theme. And I added the css to the bottom of the theme scss. Is there a way I can send you a picture of my page and the code I have now? Website is www.brimsbottles.com
Yes sure, let´s get this to work. I created an Instagram a while back because some other people needed to sent screenshots. Its @coding_with_jan :-) Please send one for the CSS and one for your custom code on the product page
🎯 get personal advice for your developer career. (free for a short time)
codingwithjan.com/career-advice
Dude you deserve x100 more subs!
Hello everyone !
In the first 10 minutes of this video I will explain Shopifys default variant switch mechanism in depth.
If you are into shopify development this might be very interesting/important to you.
If you just want to implement this within the Debut Theme you can also skip to minute 10 and simply copy what I do.
Anyways I hope you have fun watching and hope you learn something new :-)
Hi great video
How to change the color basic colors option in my products
Hi Jan
loved the video it helped so much thanks I just have a question. I have noticed when you upload the assets it does not load double name colours is the a way to get the swatch to display a color such as light blue baby pink etc without adding a - or _ to the variant color so it has a professional look such as Light Blue instead of Light_Blue
Great tutorial Jan. You made my life easy with this to-the-point, step-by-step tutorial. Amazing job! I'll try on my website now. Thanks.
Thanks for all the videos made by you ........smooth and clean concepts.......Please create color swatches for the product page (variant switch explained) for the Dawn 15.2 theme
Great work! Clear and really demonstrates how to break down and solve a shopify issue. Excellent.
Thank you, awesome you liked it :-)
Thanks for sharing information about swatch. It is useful for me and all other. Your look is good and voice is understandable.
Oh finally I found a tutorial for this. Thank you!
Super welcome :-)
Great Tut! Worked perfectly on my project thus far. Now I have to figure out how to change the 'sizes' to boxes instead of a drop-down! lol Great work!
Nice tutorial. Thank you dude. All working great. Even managed to implement it to the size.
Great video! What I found useful was to create a separate template and a separate section. That way I can switch back to the default product template easily if I mess anything up, or if I want to have a product where swatches make no sense :)
I have earned 100$ in 20 minutes by only watching this video Thanks Jan. Always Love your content , A big Heart
how?
@@ggukggukee My client want this feature and I don't know how to do this.
then I see this video and boom, it worked
Dear, you really deserve x1000 subs, thanks
btw, can I ask you some questions? what's your Gmail??
Wonderful tutorial Jan! Thank you!!!
Best tutorial I've ever seen. Thanks!
This video seemed kind of overwhelming but explained well!
Great tutorial, easy to follow and you explain everything very well. Thanks again and keep up the great work!!
Super welcome.
Thank you for your fantastic feedback :-)
Amazing tutorial. Easy to follow and it works perfectly. My page looks 10x better thanks to Jan's tutorial. Looking forward to more of your tutorials. Keep up the good work.
:-)
A very perfect explanation of all the elements that works with color swatches. Your tutorial is much more good than udemy that I purchased a few days ago. Thanks man! Hope you will also start making video tutorial for mega menu & some more complex stuffs as well.
Thanks!!!!
Hey Towhidul !
Fantastic to see you back here and I love that you still enjoy the content :-)
The next 1-2 videos will be some small hacks to increase the average order value and the customer lifetime value. Megamenu is definitely something I want to cover as well soon. I hope to see you back then and have an awesome day!
Hey Jan! Tried to do it but could. I have the SIMPLE theme in shopify, any advice?
AMAZING tutorial. Thank you!
This is pure awesomeness! Thank you for sharing!
glads to hear thanks a lot 😁
That's an awesome tutorial, thank you so much =) Do you also happen to know how to make them look different when the variant is out of stock please?
love your videos Jan
Thank you! This helped so much. Im wondering if I could use a different shape besides a rectangle? Thanks.
My favourite. Very well explained. ❤️
Thanks a lot :-)
Hi, great tutorial, it worked really well. I have a quick question. How can I add a border around the checked color?
Hey Marios, thank your for your great feedback :-)
At 20:40 im adding a border to the label for the currently selected option.
Hope this helps :-)
thanks for this. helped me a bunch
Your tutorials are awesome!!!
Glad you like them! 😃
Its worked, Great like a champ
Thank you so much Jan! Your content made it a no brainer for me to go for Debut as a non-technical guy. I was wondering, what would be required to implement the same design on a "Featured product" section on the homepage?
hello, you have whatsapp ? I can help you
Hey Jan, thanks for the video, this reminds me, please do a video on how to add a bundle just below the add to cart button. Thanks
Sounds good, I think the easiest way is to use an app though :-)
Edit: Fixed my issue. Great tutorial!
Great video, for some reason my colors look different. How to change the appearance of the boxes, for example make them round and how to ad a border (white is invisible atm)?
Hi Jan! Thanks for good video. I need to show products varients in collections page as like the single product page for customers convenient. How could i do can you helpme to do?
Hello Jan!
Awesome! Thank you for such a useful content!
Hey Aziz, great to see you back here! Fantastic that you still enjoy the content :-)
Wow amazing, thank you for this.
you're welcome :)
Your videos are excellent. Can you help me out by telling me how do I hide or display fields based on values filled in other fields?
Hey Jan, so my lines of code from 667 onward don't match yours at all. I don't know why that's the case can you help me? It's at 9:50
hey its great video. I have a question my selection button doesn't show up and how to fix that
Hi Yicheng,
do you mean that your image is not showing, but anything else works?
Thank you for this wonderful tutorial. I am using a theme that is very similar to Debut with some additional features. My issue happens here (minute 15:23 of the video). The SingleOptionSelector of my theme shows up this way: '.single-option-selector__radio'. It doesn't show like yours "single-option-selector + section id". Does this change something? Isn't it possible to do it with this one?
working perfect thank u keep up bro
Hi Jan! Thanks so much for this tutorial, most helpful! Not sure if you're still checking these comments, but I'm having a problem getting two of my swatch images to show... Both file names are more than one word i.e. 'name-name.jpg' and 'name-name-name.jpg'. 'Is there a specific naming convention I should follow?? Usually, using a '-' between each part of the name works fine, but not here. On the front-end I get this
no matter what I try!
Thank you x
Hi Jan! Great tutorial.
I wonder if this would work with Brooklyn theme?
Did you try it on the Brooklyn Theme? looking for a solution as well :)
Tutorial was really helpful.
Could you help as to how variant image can be used for swatches?
Hey Jan, could you please make a video on how to make color as swatches and size as dropdown in dawn theme. I'm implementing this but having errors when i use both swatches but it works correctly when i have only one option.
Many thanks
Hi Jan, Great Video. How do Show featured image on my product page until a variant is selected?
Thank you so much for this amazing description which makes the coding easier and more simple. But I have a question about the number of variants, is there any limit because the variants are coming in one long line which exceeds the page width. So, how to limit the number of images in the line. Thanks.
Hi. Thanks. Would you know how to add deeplinks on shopify?
Hey Jan, thanks for this video but this method doesn't seem to be working with the latest version of debut 17.14.1 Could you recommend and solutions? Thanks !
Hi friend. What is the best solution for i use a small image of product instead color? I am using debut theme.
Hi Alexandre. Basically you could uplaod a small product image instead of a plain single color swatch. This might become difficult if you have a lot of products thought. You could also consider to use an app.
hey, Thank you for the video. You have explained the steps and flow very nicely. I was trying to do the same thing but in the 'Supply' theme. I was able to replicate few steps but I was not able to call the method in 'theme.js' to change the values on the web page. Can you please help me how to call the correct method using radio buttons?
Thanks for the Tutorial ..
What a great tutorial! Very valuable! Is this also working with input type "button" instead of color swatches? We want to create product options ourselves instead of using apps for it.
Hi Johnny :-)
Technically it is very possible but the implementation might be a little bit different from theme to theme. Sorry I can´t provide the full solution here as it really depends on your theme. Basic JavaScript and HTML knowlege will be requiered.
Will this work with the colour sizes too? if we wanted to use buttons rather than drop down?
Thank you so much for this tutorial! The only problem I’m having is that the swatches are present and functioning as buttons, but the variant title is above the swatch (e.g blue, black etc.) and it is shifting the variant swatches downwards. I want to make it look like the example but it still includes the text. Thanks in advance for your help!
Super helpful video, work 10 times better than the precode shopify one which everyone links all the time :D . I'm just curious, how to add a second label under the {{option.name}} which shows the currently selected variant value (the color name)? I assume it does not requer to many digits, maybe someone know the answer? Thank you. Regards :)
Hi Jan amazing tutorial. I almost feel like I could do this coding myself. I wanted to ask you about a typo. At 19:15 there was a typo between was spelled 'bewteen'. It didn't affect the outcome of the code. That was interesting. Or did you change the word while we weren't looking? Or did the computer spell check it for you when you selected Save? I thought little things like that were pretty important in coding. Cheers Howard
Hey Howard,
That's great that you noticed it
That line of code was supposed to create space between the colors, although the margin does the same thing.
Having only one of the two could work actually😀
Have a nice day!
Thank you Jan for another great tutorial, really helpful and clear like all of your videos. Would it be too complicated to add the functionality to display the color name we have selected, next to the word "Color"?
working perfectly. thanks, bro
how can I add the prices In the swatches? As I need to make like a button with the name and price. I developed the button but can't able to display the price
Thanks the video is good. how to create new custom variants to the theme. For example, My Shopify theme does not support the color option how to add new option, when user visit the product page select color for the product and then click add to cart, any link, video link is appreciated
BRO U ARE THE BEST
🙌🏻🔥
Hi, It was a detailed tutorial! thank you for that, however I have a questions. where did you define option.name? that you match to option name "color".
Did not see you adding that anywhere! can you please tell?
Or is it default to that? I mean it is from shopify/theme?
Hey there, when you create a variant for a product you will be asked for the name of that new option.
Hope that helps :-)
Hey there! Thank you very much for you help. Unfortunately it doesn't work for me because I want to build two color swatches at one product and the "endif" and "if"-tags set by you thwo me errors.. could you help me with this one?
PS: german & english is ok
At 18:05 My swatches don't load and instead i get the jpg empty mountain theme picture please help. Other than that Great video and Great tutorial
same
Amazing tutorial
Hi Jan, If I want to use the color set by the name of the color in product.variant.option3 (or option1) to be used as a built in html color, and then for the colors that do not exist, how would I do that?
Hi , Excellent tutorial, thanks. I have done exactly as you explained , but the final color swatches came without hyperlink
Hey Jan, How do I change the "name" or "title" of a variant using code. The (current) default is printed on the checkout page, and want to display something different.Thanks.
Hi Jan, This is a fantastic video, can I hire you bro? I need little customizations like this on my Debut. Thanks.
bro!!!!!!! you are awesome!!!!!!!
Thank you! 😄
@@CodingWithJan I am trying to get alt tag to work with the swatches, I added alt="{{value}}" to the img src, which shows in developer view code but doesnt show when mousing over swatch
How would you choose different colors for different products? Wouldn't the way that you are showing apply those same variants to all products by default?
Any suggestions as to how I could add sliders since I have too many swatches.
Thank you for this amazing tutoral. My product image doesn't seem to change when I change the selector. Please help
I'd suggest you right click on your page and then click on inspect. Within the chrome developer tools you can switch to the console tab. Here you might see some error message when you switch a variant. This might already help :-)
Are you using the debut theme?
Works perfectly now! Thank you so much!
Hey Arsen, could you explain what is not working for you? Maybe we can get this to work :-)
@@CodingWithJan Hi! Thanks for you prompt reply! I have followed all the instructions, except I typed "between" instead of "bewteen" closer to the end cause I though you have misspelled it. The color swatches do appear but they do not function as I am unable to select any of them.
Alright let's get this to work 😀👍
Are you working in the debut theme or any other?
Do you get any javascript error in the developer console when you click on one of the swatches?
@@CodingWithJan Debut
@@CodingWithJan I did not get any javascript errors
works in product-templates but not if you want varients to show up inside the collections page ...per product
Hi Jan, thank you for the video it is very informative. I want to create the swatches for sizes. we have one size just called EU (for shoes i.e 40, 40.5, 41 etc.) and the other one just called size(for t-shirts and stuff i.e. S, M, L etc.). Would I just have to write the code twice once for the EU size and the other for size?
Also, how could i just change the code to radioButton so that I would not have to upload the sizes onto assets.
Hello Jan, kindly help me out. I want the name of the colour swatch to display on hover.
Just amazing!
Change in variant options should change the product image to assigned image of selected variants on collection page.... please make video on this please plzzz
Hello Jan! Thanks for this video, appreciate it a lot. One thing, I followed everything on the tutorial but somehow my product images are now small and weirdly arranged, also they won't change on click, instead, the file (as in the .jpg file) will open up in a new tab. Would you happen to know what did this? I'm using Debut theme as well. Thanks!
can you upload the code you used in he product-template.liquid file ? because for me the radio buttons work but the label is not showing, so there is no "color" besides the radio button.
Hi Lucian, here you can find the markup:
pastebin.com/xrwEXjPH
Also make sure to have swatch images available in your assets folder. Hope that helps :-)
hey, its great video. I have a question in my color swatch, still showing unavailable variant.how can I fix it? thanks
Hi Foysal,
I have a video on hiding unavailable variants in dropdown lists but think it would need some heavy modification to work with swatches.
You might consider to consult with a developer here.
Thank you for this amazing tutorial.
i just want to know that how to show color swatches in round with shadow ...
Waiting For Your Replay.
Hey there, one way to do it on css would be to apply to the class:
border-radius: 50%;
/* some code for Box Shadow */
www.cssmatic.com/box-shadow - i use this site and its amazing, hope it helps !
@@josedavidmotasousa192 can you shear your store link
Danke für das Video.
Leider befindet sich in meinem Assets Order keine "theme.js"
Liegt wohl daran dass es ein themeforest theme ist.
Wüsstest du einen anderen Bereich in dem man die Einstellung finden kann?
Hi, spontan würde ich sagen app.js oder theme.min.js wären noch gängige alternativen.
Das entscheidet allerding der Theme Hersteller. Der Code in diesen Datein wird dann aber vermutlich auch stark abweichen.
Vielleicht lohnt es sich da eher einen Entwickler ins Boot zu holen. Auf Fiverr dürfte man da recht kostengünstig fündig werden :-)
Hi Jan,
first of all thank you for your awesome tutorials! As you are talking in this video about variants and colours, maybe you can help me with a very specific problem regarding that topic.
I sell products with different colour variants called e.g. "glacial ice" (which belongs to the colour family "blue"). In my shop navigation I want the products to be filtered by colour families. As the tag is attached to the product, not to the variant, I'm not able to filter this way.
Question: is there any way to attache the tag "blue" to my variant called "glacial ice"? Or is there any kind of workaround I can accomplish as a person who has no clue about coding?
I would be so happy, if you could give me a hand here! Thank you so much and have a great day,
Maria
Hi Maria, nice to meet you.
Great difficulty you picked there.😄
Your problem description was also pretty good :-)
So in order to add a custom field to your variants I suggest you use Metafields. I also have video on how you can use them.
Metafield per default aren't searchable though. You would need to use an app to bring these to the surface. I know that this one is capable of doing so.
apps.shopify.com/searchanise
That beeing said I also have to mention that I never set that up myself, but the approach sounds pretty promising to me.
Hope that helps :-)
@@CodingWithJan Hey Jan,
thanks for your quick response! I've watched your video tutorial about metafields as you suggested. I was also able to create metafields for a product variation using the app metafield guru.
But then I got stuck... Can't I just hire you for solving that problem for me?
All the best and have a great day,
Maria
Hello
can you show me video with latest debut theme with swatch setup ?
It works in Venture theme. I have tried in Minimal theme but the product-template.liquid code completely different. Can you help me?
Hello I am trying to add color swatch to the subject of venture, I was having a bit of trouble with the color "Light Blue" "Royal Blue", it seems these colors do not work when there is a space. Can you instruct to correct these colors?
Hi,
My products have a lot of variants (we sell phone cases) and there's always a default preselected variant but I don't want that, I want the customer to have to choose their phone model before being able to add to cart. Is there a way I could get this done?
I have the same problem, did you find a solution yet?
I am using debut theme. However I get undefined variable on console. Also I am using the copy theme not the published theme. The swatches will not highlight appropriate color item.
Hi, please upload a video for options swatches on collection page.
I am using the modern Debut theme, the code works perfectly on desktop, but the thumbnails have strange behavior on mobile. are you facing the same issue?
where do i find single-option-selector on suply theme?
how do you open the search button in the edit code part
Amazing tutorial! Thank you for such useful content! 1Q: Will this code change all variants for all products right? Is it possible to change a single product variant? thanks
You could create a separate product template in your theme files and use it only for the products that you like :-)
If you don't know how to create a seperate template you could see that in the beginning of my video on custom products. Hope that helps 😀
@@CodingWithJan ok but what about the other classifications (ASSETS < LOCALES ...)? When adding the code, will it be affected for other products?
@@samakanan1597 in this case they wont be affected as we don't make any changes to these.
You need to copy the product-template.liquid
(You can call it product-template-swatches.liquid or something)
And you need to copy the product.liquid. (You can call it product-swatches.liquid)
in your product-swatches.liquid you will then need to include your product-template-swatches.liquid. You can see that at the beginning of my video on custom products :-)
Hey Great tutorial! My colour swatches are showing twice. I've followed the exact code from the tutorial, everything else works perfect. Do you know why it would be showing twice?
Hey Jan! I can't seem to make the hide sold out or out of stock in mine, (www.annly.com.mx) I would love to only show options with the available stock, however I didn't upload all items, only the ones I have : for example a medium black short (don't have any) so 0. does this make sense?
So is it the same if you’re using big cartel?
Hi Jan, The last CSS is not working for me. I still have the check boxes, the border didnt show up and the swatches are still vertical. Nothing changed. Can you help please?
Hey, there it seems that none of the CSS rules are applied to your frontend.
Are you using the debut theme and did you add the CSS to the bottom of your theme.scss?
Lets Build Shopify Yes. I am using the debut theme. And I added the css to the bottom of the theme scss. Is there a way I can send you a picture of my page and the code I have now? Website is www.brimsbottles.com
Yes sure, let´s get this to work.
I created an Instagram a while back because some other people needed to sent screenshots. Its @coding_with_jan :-)
Please send one for the CSS and one for your custom code on the product page