This tutorial was designed for v15 of the free Shopify themes (ex: Dawn, Refresh, Sense, Origin, etc). If you are using the previous v14 themes, then use the previous version here: ruclips.net/video/W8uucYykGI8/видео.html
When I put up my JSON in the custom data I copy and paste ur code exactly into version 15 of dawn but it says "Validations value for option schema is invalid JSON: unpacked token at ....."
I'm hoping you still come back to old videos! This tutorial is AMAZING but I have the same problem as someone else in that all of my swatches are showing up vertically. You said you check the divs and spans but where should I look for those? I'm brand new to Shopify and haven't figured out yet where everything is hidden. Additionally, when I click to change my swatch shape or size, nothing happens. I just have very small ovals no matter what. I am using Dawn 15.0.1 so possibly something is slightly altered with the mini update?
The tutorial still works with the newest versions of Dawn. I suggest installing a fresh version of your theme and trying again from the beginning. It's possible that there was an issue with the installation process, and trying it again often times reveals the issue. However, if that still doesn't work, then it's difficult to troubleshoot from the RUclips comments. If you're interested in more support, we offer that in our newly created Skool community, The Prompted Insiders. In there, not only do we offer technical support, but you can also download theme files with these customizations already added in, and other exclusive customizations. We also share marketing strategies to help grow your business. If you're interested, check it out here: www.skool.com/the-prompted/about
And Shopify broke it again with Dawn v15.1 ... Tried to redo the process like I did in v15.0 but something doesn't work, not good enough with code to find out where it breaks
It should still work with 15.1.0 themes. If you're still unable to figure it out, you may want to consider our downloadable theme files with this feature (and many others) already added to the code. You can get it here: www.skool.com/the-prompted/about
I found your video because I need to create a "design" variant for multiple products (i.e. there are several designs for the same t-shirt, etc.). I only need the "design" option to show up on the product listing. I'm following the steps in the video but when I get to the part to add the JSON entries that reference the uploaded images, I'm assuming that I will need to alter the code you provided to list the name of each design option that I will have for the product. Is this correct?
Love your work guys! Curious if you guys have any tutorials to optimize shopify site speed or decrease LCP loading times? Not many other videos out there for speed optimization
You would need to adjust some of the css styling for this. If you want specific instructions and the actual code on how to do that, then we share personalized support for customization requests like this in our Skool community: www.skool.com/the-prompted/about. Hope to see you inside!
That might be something about your html structure. Double check the or that wrap the swatch code and make sure it matches the tutorial. If it's still not working, then I suggest installing a fresh new version of your theme (ex: Dawn v15) as a sandbox testing area and try the tutorial again. If you get a different result, you know there was an issue in the installation. If you get the same result, it's possible you have a compatibility issue.
Are you using a compatible theme? This tutorial was designed for v15 of the free Shopify themes. If you are, then the most common reason is missing a step in the installation process. I suggest installing a fresh new version of your theme (ex: Dawn) as a test theme and trying again from the beginning. If you get a different outcome, then it’s likely an installation issue. If you get the same result, it could be a more complex problem.
I am watchin all your videos and you always have more options in the Variant Picker? Why is so?? I can just select the shape of the picker and that's it! In multiple of your videos you have different options where do i get those?
If you're talking about the custom swatch options, then those were added in by following the instructions in this very video. Instructions start at 05:11.
@@theprompted At this point of the video 4:00 you just say "we have this CUSTOM SWATCH that we added" but you didn't really add something before in the video. I don't have the "custom swatch" section how do i implemnt it? IS there another video? Thank you so much
That portion of the video is a demo of the finished customization. Later in the video there's instructions on how to add the settings in. You can review the video chapters as a guide.
I have followed everything on this video and have got pretty much everything to work… But it just gives the options as the Colour Name, not Colour Swatches. I have spent a lot of time going through your videos including the videos on colour swatches to figure out why and I can’t find it. Also, they’re appearing in vertical order not horizontal (not as important). I have checked and replied to comments as people seem to be having this same issue. Also, in both my variant picker section and the Product Grouping Section, one of the dropdown labels says “Missing translation: t:sections.main-product.blocks.variant_picker.settings.swatch_shape.options._2. label" is not present in any of the ["en-GB", "en”] It says this for each of the labels.
For the translation piece, instead of adding the translation into the label "t:sections.main-product.blocks.variant_picker.settings.swatch_shape.options._2. label" you can hard code it to "Circle" and "Square" instead so it's not trying to translate. For the other issues, it could be a number of reasons, and without being able to properly debug it's difficult to tell. What I would suggest is you install a fresh new version of your theme (ex: Dawn) and try again. If you get a different result, it could be an issue with the installation. If you get the same result, then it's a more difficult problem to diagnose.
Hi. Great work but then along comes Dawn version 15.0.2 and messes it all up. I copied back in the assets/snippets etc but don't have the images showing in the swatches as before.. Ill keep looking!
This customization should still work with v15.0.2. To help troubleshoot, you can install a fresh new version of Dawn as a test theme and try again from the beginning to see if you get a different result.
how to add conditional logic between two varient with same product or different froduct... please tell me because i want to done this without using app .is it possible or not?
Definitely possible to add conditional logic, it's just a matter of clearly defining what it is that you want that logic to do. Once that's been defined, you then add custom code to add that logic in. For example, this video (ruclips.net/video/1Bop16kts1k/видео.html) adds logic to display different description information depending on the selected variant.
Very nice video. What is the reason I can't update main product. And even when you do add to cart, you can't add the color you want, only the first color.
What I would suggest is to double check that you're using a compatible theme and version. If it checks out, then what you can try is installing a fresh new version of a compatible theme (ex: Dawn v15) as a sandbox testing theme and try again from the beginning. If you get a different result, then there might be something wrong with the steps you've taken. If you get the same result, there might be a deeper issue at play.
Please double check the theme and version. Shopify has changed how variants are handled over the previous few versions (v13, 14, 15), so you will need to make sure you install the proper version of this customization.
I did exactly as you did in the video and everything was good and I finished doing everything and came to see how it turned out I had the sawtches but they were without color at all (only black when is selcect and white where is not)they didn't pick up either the image or the code can you help me solve this please
There's a few common errors: 1. Wrong theme/version used. Make sure you're on v15 of one of the free Shopify themes (ex: Dawn, Sense, Refresh, etc) 2. Make sure there's no mismatch in your lookups. It's case-sensitive, so watch out for that too. In your JSON, you have to exactly match the variant option name (ex: Color) and the variant option value (ie. Blue, Red, White, etc) for it to pick up the options. It also has to exactly match the filename of the file being referenced, including the file extension (ex: blue.jpg). If it's still not working, I suggest installing a fresh new version of your theme (ex: Dawn) as a sandbox testing area and try the customization again. This can test the installation process. If you get a different result, then there's an issue with the installation. If you get the same result, there might be a systemic issue.
If you want more colors or options, you just need to add them into your JSON file. The example I gave is a template. You can add your own options by following the same structure.
There shouldn't be any issue with the json. Please just start with the template and schema exactly as I have shared. It should save properly. Then using the template format, you can make your adjustments from there.
Hard to know where things went wrong, but my suggestion is generally to install a fresh new version of your theme as a sandbox testing area and try again. Often times that helps us see if we did something wrong in the steps or confirms there’s an issue. The other thing to check is that you’re using the correct version of a free Shopify theme (Dawn, Refresh, Sense, etc)
@@theprompted I'm looking to manually choose add-ons and list other products as add-ons to 1 product. The different add-ons should be below the variant selector on the product page.
Looks like you found the video based on your other comment! For anyone else looking for this tutorial, you can find the customization here: ruclips.net/video/1ZN3wGVlPuQ/видео.html It's not compatible with v15 yet though - we're working on a newer version for that.
Warehouse theme does take a bit of a different approach with bulk adding of variants. But so long as you’re using the variant picker block then it should work.
This tutorial was designed for v15 of the free Shopify themes (ex: Dawn, Refresh, Sense, Origin, etc). If you are using the previous v14 themes, then use the previous version here: ruclips.net/video/W8uucYykGI8/видео.html
When I put up my JSON in the custom data I copy and paste ur code exactly into version 15 of dawn but it says "Validations value for option schema is invalid JSON: unpacked token at ....."
I'm hoping you still come back to old videos! This tutorial is AMAZING but I have the same problem as someone else in that all of my swatches are showing up vertically. You said you check the divs and spans but where should I look for those? I'm brand new to Shopify and haven't figured out yet where everything is hidden. Additionally, when I click to change my swatch shape or size, nothing happens. I just have very small ovals no matter what. I am using Dawn 15.0.1 so possibly something is slightly altered with the mini update?
The tutorial still works with the newest versions of Dawn.
I suggest installing a fresh version of your theme and trying again from the beginning. It's possible that there was an issue with the installation process, and trying it again often times reveals the issue.
However, if that still doesn't work, then it's difficult to troubleshoot from the RUclips comments. If you're interested in more support, we offer that in our newly created Skool community, The Prompted Insiders. In there, not only do we offer technical support, but you can also download theme files with these customizations already added in, and other exclusive customizations. We also share marketing strategies to help grow your business.
If you're interested, check it out here: www.skool.com/the-prompted/about
And Shopify broke it again with Dawn v15.1 ...
Tried to redo the process like I did in v15.0 but something doesn't work, not good enough with code to find out where it breaks
It should still work with 15.1.0 themes. If you're still unable to figure it out, you may want to consider our downloadable theme files with this feature (and many others) already added to the code. You can get it here: www.skool.com/the-prompted/about
Same, didn't work for me and I'm doing it in v15.1
Same here! I thought I was doing sth wrong so I tried it a bunch of times. Glad I read your comment
I found your video because I need to create a "design" variant for multiple products (i.e. there are several designs for the same t-shirt, etc.). I only need the "design" option to show up on the product listing. I'm following the steps in the video but when I get to the part to add the JSON entries that reference the uploaded images, I'm assuming that I will need to alter the code you provided to list the name of each design option that I will have for the product. Is this correct?
Yes that’s correct. You have to adapt the JSON for your own store to match the variant option and value names, and source image filenames
Love your work guys! Curious if you guys have any tutorials to optimize shopify site speed or decrease LCP loading times? Not many other videos out there for speed optimization
Glad you like the videos! We don't currently have a tutorial for site speed, but we've noted it down as a potential future video.
How can I center the Color Swatches? I want them to show up in the middle of my product page instead of the left. Thanks in advance!
You would need to adjust some of the css styling for this. If you want specific instructions and the actual code on how to do that, then we share personalized support for customization requests like this in our Skool community: www.skool.com/the-prompted/about. Hope to see you inside!
Thanks Waiting For Variant Swatches On Collection
So timely, thanks again
Great video! Any idea why my color options on product page line up vertically instead of horizontally?
That might be something about your html structure. Double check the or that wrap the swatch code and make sure it matches the tutorial.
If it's still not working, then I suggest installing a fresh new version of your theme (ex: Dawn v15) as a sandbox testing area and try the tutorial again. If you get a different result, you know there was an issue in the installation. If you get the same result, it's possible you have a compatibility issue.
Hey everything works but the swatches dont shop up when i select circle on the custom swatch could u please assist me
Are you using a compatible theme? This tutorial was designed for v15 of the free Shopify themes. If you are, then the most common reason is missing a step in the installation process. I suggest installing a fresh new version of your theme (ex: Dawn) as a test theme and trying again from the beginning. If you get a different outcome, then it’s likely an installation issue. If you get the same result, it could be a more complex problem.
I am watchin all your videos and you always have more options in the Variant Picker? Why is so?? I can just select the shape of the picker and that's it! In multiple of your videos you have different options where do i get those?
If you're talking about the custom swatch options, then those were added in by following the instructions in this very video. Instructions start at 05:11.
@@theprompted At this point of the video 4:00 you just say "we have this CUSTOM SWATCH that we added" but you didn't really add something before in the video. I don't have the "custom swatch" section how do i implemnt it? IS there another video? Thank you so much
That portion of the video is a demo of the finished customization. Later in the video there's instructions on how to add the settings in. You can review the video chapters as a guide.
Thanks so much
I have followed everything on this video and have got pretty much everything to work…
But it just gives the options as the Colour Name, not Colour Swatches.
I have spent a lot of time going through your videos including the videos on colour swatches to figure out why and I can’t find it.
Also, they’re appearing in vertical order not horizontal (not as important).
I have checked and replied to comments as people seem to be having this same issue.
Also, in both my variant picker section and the Product Grouping Section, one of the dropdown labels says
“Missing translation: t:sections.main-product.blocks.variant_picker.settings.swatch_shape.options._2. label" is not present in any of the ["en-GB", "en”]
It says this for each of the labels.
For the translation piece, instead of adding the translation into the label "t:sections.main-product.blocks.variant_picker.settings.swatch_shape.options._2. label" you can hard code it to "Circle" and "Square" instead so it's not trying to translate.
For the other issues, it could be a number of reasons, and without being able to properly debug it's difficult to tell.
What I would suggest is you install a fresh new version of your theme (ex: Dawn) and try again. If you get a different result, it could be an issue with the installation. If you get the same result, then it's a more difficult problem to diagnose.
It says invalid JSON in tag schema for the main product liquid code could u help me out
Did you miss a comma by any chance?
@@theprompted I've just double checked and I have wow thanks 😅
Hi. Great work but then along comes Dawn version 15.0.2 and messes it all up. I copied back in the assets/snippets etc but don't have the images showing in the swatches as before.. Ill keep looking!
This customization should still work with v15.0.2. To help troubleshoot, you can install a fresh new version of Dawn as a test theme and try again from the beginning to see if you get a different result.
how to add conditional logic between two varient with same product or different froduct... please tell me
because i want to done this without using app .is it possible or not?
Definitely possible to add conditional logic, it's just a matter of clearly defining what it is that you want that logic to do. Once that's been defined, you then add custom code to add that logic in. For example, this video (ruclips.net/video/1Bop16kts1k/видео.html) adds logic to display different description information depending on the selected variant.
Very nice video. What is the reason I can't update main product. And even when you do add to cart, you can't add the color you want, only the first color.
What I would suggest is to double check that you're using a compatible theme and version.
If it checks out, then what you can try is installing a fresh new version of a compatible theme (ex: Dawn v15) as a sandbox testing theme and try again from the beginning.
If you get a different result, then there might be something wrong with the steps you've taken. If you get the same result, there might be a deeper issue at play.
same for me :/
Please double check the theme and version. Shopify has changed how variants are handled over the previous few versions (v13, 14, 15), so you will need to make sure you install the proper version of this customization.
How can you switch the priority to variant color first then variant image second?
You would re-order the variant options in your product admin.
I did exactly as you did in the video and everything was good and I finished doing everything and came to see how it turned out I had the sawtches but they were without color at all (only black when is selcect and white where is not)they didn't pick up either the image or the code can you help me solve this please
I had the same issue. Please help
There's a few common errors:
1. Wrong theme/version used. Make sure you're on v15 of one of the free Shopify themes (ex: Dawn, Sense, Refresh, etc)
2. Make sure there's no mismatch in your lookups. It's case-sensitive, so watch out for that too. In your JSON, you have to exactly match the variant option name (ex: Color) and the variant option value (ie. Blue, Red, White, etc) for it to pick up the options. It also has to exactly match the filename of the file being referenced, including the file extension (ex: blue.jpg).
If it's still not working, I suggest installing a fresh new version of your theme (ex: Dawn) as a sandbox testing area and try the customization again. This can test the installation process. If you get a different result, then there's an issue with the installation. If you get the same result, there might be a systemic issue.
it says invalid JSON in tag schema when i try to do product main liquid, also u only gave like 4 colors?
If you want more colors or options, you just need to add them into your JSON file. The example I gave is a template. You can add your own options by following the same structure.
Did u find a solution to the Invalid JSON
@@dngineerI use a theme that gives all swatches and home page swatches its an amazing theme. if u want dm i can help
There shouldn't be any issue with the json. Please just start with the template and schema exactly as I have shared. It should save properly. Then using the template format, you can make your adjustments from there.
Thank you.
Hi! I'm not sure what has happened with my theme but it seems to have just duplicated the variants but not changed the colour names to colours 😅
Hard to know where things went wrong, but my suggestion is generally to install a fresh new version of your theme as a sandbox testing area and try again. Often times that helps us see if we did something wrong in the steps or confirms there’s an issue. The other thing to check is that you’re using the correct version of a free Shopify theme (Dawn, Refresh, Sense, etc)
@@theprompted I had the same issue
Can you make a video on how to have upsell product add-ons?
Thanks for the suggestion! Are you looking for manually defined or auto recommended product upsell?
@@theprompted I'm looking to manually choose add-ons and list other products as add-ons to 1 product. The different add-ons should be below the variant selector on the product page.
This tutorial might help with what you're looking for: ruclips.net/video/E5PJ_f6mibc/видео.html
What if we want to use multiple pictures for each variant?
Looks like you found the video based on your other comment!
For anyone else looking for this tutorial, you can find the customization here: ruclips.net/video/1ZN3wGVlPuQ/видео.html
It's not compatible with v15 yet though - we're working on a newer version for that.
...and swatches for collection page ??
It's coming :)
Would this work for the Shopify them Warehouse?
Warehouse theme does take a bit of a different approach with bulk adding of variants. But so long as you’re using the variant picker block then it should work.
It's nuts you have to go through all this to make swatches work.
Didn't work for me. but thanks for putting up videos