How to Add Product Variant Swatches to Shopify v4 (Dawn v15 Compatible) - 2024 Tutorial
ฝัง
- เผยแพร่เมื่อ 27 ก.ค. 2024
- We update our previous swatches to make it compatible with Dawn v15 (and other themes, like Refresh, Origin, Sense, etc). If you're using v14 themes, then please use v3 of our swatch solution instead.
In this video we show our fourth version of how to add product variant swatches to the Shopify Dawn theme. Works for any variant type, not just for color.
While Shopify has released native swatches into their themes, there are still limitations that are solved with this tutorial.
----------------------------
📄 Code for this video can be found here (includes v13 compatible code): theprompted.co/blogs/tutorial...
🎥 Swatches for Dawn v14 (and v14 of other free Shopify themes): • How to Add Product Var...
🎥 How to use native swatches (second half of video): • What's new with Dawn v...
🚀 Want a FREE personalized action plan to help increase your conversion rate? Complete this simple form: theprompted.co/free-action-plan
👉 Want to hire us for personalized help? Book a consult call: theprompted.co/hire-us
▶️ Subscribe for more videos like this ➡ @theprompted
----------------------------
TIMESTAMPS
00:00 - Updating our swatch solution for v15 themes
01:05 - Should I use the native Shopify swatches instead?
02:28 - Demo of this customization
05:11 - Is my theme compatible with this tutorial?
05:46 - Creating metaobjects and metafields
12:37 - Edit theme code to add swatches
17:38 - Enabling the swatches and how to customize
19:35 - Adding unique swatches per products
21:12 - Final thoughts
----------------------------
#shopify #tutorial #ecommerce
Themes: Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight
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: th-cam.com/video/W8uucYykGI8/w-d-xo.html
Thanks Waiting For Variant Swatches On Collection
So timely, thanks again
Thank you.
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.
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.
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.
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.
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.
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: th-cam.com/video/1ZN3wGVlPuQ/w-d-xo.html
It's not compatible with v15 yet though - we're working on a newer version for that.
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.
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
...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.