Hi, I have tried this for V15 and also did on a new fresh dawn theme but the pills dont show up. I have followed this multiple times. When I change from pills to dropdown it shows up but with error of icon-caret, this is due to changes in V15 where this is now svg file. This is understandable and not an issue as this is not used but it shows that the block does shows up on product page. It just that pills doesnt. Not sure if it is Dawn 15 issue or am I only one having issues with it. thanks
Really enjoying your videos - thank you SO much for putting all of these together. I've just completed this video but annoyingly the custom swatches isn't working as expected for me - it works as expected for when used for variants but when I tick the Use Custom Swatch box from within the Product Grouping Picker, the images are defaulting to the product image (when using the variant-swatch-mapping Metaobject and a custom one). Also, I've also found that when there are no variant options the custom swatches end up being stacked vertically and are almost oval in shape. Can you only group products which have variants with this code? Any suggestions as to which bit of code might need checking/tweaking would be greatly appreciated.
Thanks for pointing that out! A quick fix was added to the code: theprompted.co/blogs/tutorials/combine-separate-products-together-as-variant-options-free-tutorial
@@theprompted thats fab. Thank you so much. I have two more (hopefully) quick questions if that's okay... Lines 10 and 11 of the product-grouping-picker-custom.liquid file reference two assets 1) component-product-variant-swatch.css and 2) component-product-variant-picker.css. I don't have a component-product-variant-swatch.css file, but I do have a component-product-variant-swatch-custom.css (i.e., the one created as part of the prerequisite video). Is there a difference? The second file (component-product-variant-picker.css) exists but I don't remember creating it so assume it's an original file - is that correct?
Ah, yes you should use the one created in the pre-requisite video, component-product-variant-swatch-custom.css. As for the second file, component-product-variant-picker.css, you are correct that it is part of the original theme files.
@@theprompted absolutely no apology needed - thank you for replying so quickly and helping! I am just so so grateful that you have put together such fantastic videos and code for anyone to use. It's just incredible. You are a legend!
I came across the "complementary products” option in metafields, which seems to be a much simpler solution. This option displays images of other t-shirts as variants on the main t-shirt's page. However, I would like these images to appear without their names and prices since they are repetitive with the text on the main t-shirt page, making them redundant and less visually appealing. Could you make a video about it?
13:24 I am running Dawn v15, I have followed along the tutorial but when i open products. I have only one option "Product Grouping Option 1 Value" and the second option is missing "Product Grouping Option 1 Entries". eventhough I had added its definition.
Did you create it as a product metafield (ie. not variant or other object type)? If so, could it be unpinned? When you go to your products, you can check the "view all" under your metafields to see all the ones, including the unpinned metafields.
Is a section missing in the video?? I just went through the code link, it contains an additional entry. Video contains 2 entries: (One meta object definition and One metafield definition) where as the code link contains 3 entries (One metaobject definition and TWO metafield definitions)
You're right, looks like it was cut out during editing. Sorry about that. In the tutorial instructions page, follow the step "Create Product Metafield with type Metaobject above" to create the missing metafield.
@@theprompted Thanks for clarification. I have enabled the custom swatches and changed the json file in metaobject accordingly but still the swatches show only 1st product swatch others are blank white. I had addded all the entries in Json file (4 colors in my case and only black has a swatch) 2ndly when I also enable the variant swatch, the listing swatch goes wierd. Pills become blank and all are shown vertically.
Hey, Great video! by having set up a different product page for each color of the same item, will it be possible in my case to show the color swatch on a collection page? will you make a video about it? Thanks!
So on the collection page you would want to combine them and show only one product with swatches instead of the multiple products with different colors?
@@theprompted On the collection page, I would like each color variant of a product to be displayed separately as individual products. However, I want to include color swatches below each product. Clicking on a color swatch should lead directly to the product page of that specific color variant. Do you think that's possible?
Yes - should be possible now with the newest version (v3) of the collection page swatches, which incorporates the variant swatch map override metafield introduced in v3 of the product swatches. Check it out here: ruclips.net/video/nZuDkf-T2og/видео.html
Good afternoon and i am sorry if i may disturb you during this period of vacation. I am just wondering, in the beginning of this video you mentioned that before doing this one is mandatory to implement the variant swatches for this video to be of use. If i was not interested on swatches and such of the sort should i just skip part of this video or should i still follow the previous one even if i won't be using it?
for instance, if i wanted to modify the collection page and not the product page, how should i go about it? because i'd like for the variants to show on the collection page, not to have multiple products without variants linked together
If you're looking to combine the products together but don't need the swatches, the code should still work so long as you don't activate the swatches on the product page. And since you're creating separate products instead of variants, each option can be seen in your collections.
Is it possible that you forgot to show how to add the Metafield in the Product page for the Selection of the Items with add defenition of Metaobject? because I did this myself, so the field shows up, however my solution doesnt work. It wont show the Swatches nor a selection in the grouping picker
I found out that when setting up the missing (you didnt show it in the video but I saw it hence tried it myself) metaobject I selected it to be a list rather than a single object. I corrected it now it shows.. I see the pills now, however the same problem occures like with first entry. still pills with "appearently" the pictures inside. these are stacked on top of each other.
@@theprompted Yes, the swatches are working but the linking the products doesn't seem to be working. Version 1 that you did 7 months ago worked but version 2 (2 months ago) and version 3 don't seem to be working
Can you try installing a fresh new version of Dawn as a sandbox troubleshooting/testing area and try the customization there and see if you get the same problem? If it works, then you can work backwards to see what is different between the two.
Another Great tutorial. You are a savior. Can you please create a tutorial on customization of customer account/profile/order section as well? It will be of great help. :)
Just added a video on the new checkout and accounts editor here: ruclips.net/video/rGurTuN7C3E/видео.html. Options are a bit limited, but you do have access to drag and drop app blocks on the Thank You and Order Status pages.
It should still work with Dawn v15 - just make sure that you're using the Dawn 15 product swatches video (ruclips.net/video/JIn4Ac5LLjg/видео.html), to make sure swatches work with it
@@theprompted actually i have different colours as separate products… i want to combine the different colours using the grouping tool… is that possible?
Ok nvm figured it out but now my swatches are blank. there's no color. I have them set to the json and changed everything to include my variant names and color hex but still nothing
@@bennysblanks I was able to solve the problem. It was a CSS problem that didnt display the pictures in a circle (or Square) and therefore you didnt see anything. the thing is, if you add a relating JSON file all you do is change the image (or not) and the image still has the same dimensions.
I encountered the same problems. You can paste this at the end of the base.css file or directly in the Custom CSS within theme customization (it also has a hover effect). Hope it works for you: .product-form__swatch label { display: flex; flex-wrap: wrap; width: 20px; /* Adjust for desired swatch size */ height: 20px; /* Adjust for desired swatch size */ border: 1px solid #eae8e4 !important; border-radius: 50% !important; /* 50% for circle 0% for square */ background-size: cover; cursor: pointer; transition: border-color 0.3s ease; padding: 1rem !important; } .product-form__swatch label:hover { border-color: #333 !important; } .product-form__swatch { display: inline-block; margin-right: 5px; }
Hi, I have tried this for V15 and also did on a new fresh dawn theme but the pills dont show up. I have followed this multiple times. When I change from pills to dropdown it shows up but with error of icon-caret, this is due to changes in V15 where this is now svg file. This is understandable and not an issue as this is not used but it shows that the block does shows up on product page. It just that pills doesnt. Not sure if it is Dawn 15 issue or am I only one having issues with it. thanks
Really enjoying your videos - thank you SO much for putting all of these together.
I've just completed this video but annoyingly the custom swatches isn't working as expected for me - it works as expected for when used for variants but when I tick the Use Custom Swatch box from within the Product Grouping Picker, the images are defaulting to the product image (when using the variant-swatch-mapping Metaobject and a custom one). Also, I've also found that when there are no variant options the custom swatches end up being stacked vertically and are almost oval in shape. Can you only group products which have variants with this code? Any suggestions as to which bit of code might need checking/tweaking would be greatly appreciated.
Thanks for pointing that out! A quick fix was added to the code: theprompted.co/blogs/tutorials/combine-separate-products-together-as-variant-options-free-tutorial
@@theprompted thats fab. Thank you so much. I have two more (hopefully) quick questions if that's okay...
Lines 10 and 11 of the product-grouping-picker-custom.liquid file reference two assets 1) component-product-variant-swatch.css and 2) component-product-variant-picker.css. I don't have a component-product-variant-swatch.css file, but I do have a component-product-variant-swatch-custom.css (i.e., the one created as part of the prerequisite video). Is there a difference? The second file (component-product-variant-picker.css) exists but I don't remember creating it so assume it's an original file - is that correct?
Ah, yes you should use the one created in the pre-requisite video, component-product-variant-swatch-custom.css.
As for the second file, component-product-variant-picker.css, you are correct that it is part of the original theme files.
Made another update to the code. Sorry for the trouble, but should work properly now.
@@theprompted absolutely no apology needed - thank you for replying so quickly and helping! I am just so so grateful that you have put together such fantastic videos and code for anyone to use. It's just incredible. You are a legend!
You are amazing! Thank you so much! This will help me a lot and it will be online today on my website!
Great great feature!
I really needed it, Thank you 🫶♥️
You are the goat!
would love to implement this, but my theme file structure does not have the main-product.liquid
I came across the "complementary products” option in metafields, which seems to be a much simpler solution. This option displays images of other t-shirts as variants on the main t-shirt's page. However, I would like these images to appear without their names and prices since they are repetitive with the text on the main t-shirt page, making them redundant and less visually appealing. Could you make a video about it?
If you want to do this, you could hide the values you don't want to show by using css and setting their elements as display: none
13:24
I am running Dawn v15,
I have followed along the tutorial but when i open products. I have only one option "Product Grouping Option 1 Value" and the second option is missing "Product Grouping Option 1 Entries". eventhough I had added its definition.
Did you create it as a product metafield (ie. not variant or other object type)? If so, could it be unpinned? When you go to your products, you can check the "view all" under your metafields to see all the ones, including the unpinned metafields.
@@theprompted I actually added it in metaobject definitions with 2 fields.
1. Single Line text
2. List of objects
As shown in the video
Is a section missing in the video?? I just went through the code link, it contains an additional entry.
Video contains 2 entries: (One meta object definition and One metafield definition)
where as the code link contains 3 entries (One metaobject definition and TWO metafield definitions)
You're right, looks like it was cut out during editing. Sorry about that.
In the tutorial instructions page, follow the step "Create Product Metafield with type Metaobject above" to create the missing metafield.
@@theprompted Thanks for clarification.
I have enabled the custom swatches and changed the json file in metaobject accordingly but still the swatches show only 1st product swatch others are blank white. I had addded all the entries in Json file (4 colors in my case and only black has a swatch)
2ndly when I also enable the variant swatch, the listing swatch goes wierd. Pills become blank and all are shown vertically.
Hey, Great video! by having set up a different product page for each color of the same item, will it be possible in my case to show the color swatch on a collection page? will you make a video about it? Thanks!
So on the collection page you would want to combine them and show only one product with swatches instead of the multiple products with different colors?
@@theprompted On the collection page, I would like each color variant of a product to be displayed separately as individual products. However, I want to include color swatches below each product. Clicking on a color swatch should lead directly to the product page of that specific color variant.
Do you think that's possible?
Yes - should be possible now with the newest version (v3) of the collection page swatches, which incorporates the variant swatch map override metafield introduced in v3 of the product swatches. Check it out here: ruclips.net/video/nZuDkf-T2og/видео.html
Good afternoon and i am sorry if i may disturb you during this period of vacation. I am just wondering, in the beginning of this video you mentioned that before doing this one is mandatory to implement the variant swatches for this video to be of use. If i was not interested on swatches and such of the sort should i just skip part of this video or should i still follow the previous one even if i won't be using it?
for instance, if i wanted to modify the collection page and not the product page, how should i go about it?
because i'd like for the variants to show on the collection page, not to have multiple products without variants linked together
If you're looking to combine the products together but don't need the swatches, the code should still work so long as you don't activate the swatches on the product page.
And since you're creating separate products instead of variants, each option can be seen in your collections.
Is it possible that you forgot to show how to add the Metafield in the Product page for the Selection of the Items with add defenition of Metaobject? because I did this myself, so the field shows up, however my solution doesnt work. It wont show the Swatches nor a selection in the grouping picker
I found out that when setting up the missing (you didnt show it in the video but I saw it hence tried it myself) metaobject I selected it to be a list rather than a single object. I corrected it now it shows.. I see the pills now, however the same problem occures like with first entry. still pills with "appearently" the pictures inside. these are stacked on top of each other.
Just to confirm, did you get swatches working with the pre-requisite video yet (ruclips.net/video/W8uucYykGI8/видео.html )? I discuss this at 06:15
same
@@theprompted Yes, the swatches are working but the linking the products doesn't seem to be working.
Version 1 that you did 7 months ago worked but version 2 (2 months ago) and version 3 don't seem to be working
Can you try installing a fresh new version of Dawn as a sandbox troubleshooting/testing area and try the customization there and see if you get the same problem?
If it works, then you can work backwards to see what is different between the two.
Another Great tutorial. You are a savior.
Can you please create a tutorial on customization of customer account/profile/order section as well? It will be of great help. :)
Just added a video on the new checkout and accounts editor here: ruclips.net/video/rGurTuN7C3E/видео.html. Options are a bit limited, but you do have access to drag and drop app blocks on the Thank You and Order Status pages.
👇Vote for v4 of this customization for Dawn version 15
It should still work with Dawn v15 - just make sure that you're using the Dawn 15 product swatches video (ruclips.net/video/JIn4Ac5LLjg/видео.html), to make sure swatches work with it
pls continue
Does this work with Dawn 15.0?
Should work! Just make sure to use the v15 swatch videos if you want to use swatches with it.
@@theprompted actually i have different colours as separate products… i want to combine the different colours using the grouping tool… is that possible?
Yes, you can combine products in any way you want, including by color
@@theprompted actually i coded a custom section specifically for this… if yu want i can share it… most of your subscribers will appreciate it…
Sure! If you share it here others can see it
My swatches come out looking super weird. They're on top of each other vertically and still look kinda like pills
Ok nvm figured it out but now my swatches are blank. there's no color. I have them set to the json and changed everything to include my variant names and color hex but still nothing
@@bennysblanks I was able to solve the problem. It was a CSS problem that didnt display the pictures in a circle (or Square) and therefore you didnt see anything. the thing is, if you add a relating JSON file all you do is change the image (or not) and the image still has the same dimensions.
I encountered the same problems. You can paste this at the end of the base.css file or directly in the Custom CSS within theme customization (it also has a hover effect). Hope it works for you:
.product-form__swatch label {
display: flex;
flex-wrap: wrap;
width: 20px; /* Adjust for desired swatch size */
height: 20px; /* Adjust for desired swatch size */
border: 1px solid #eae8e4 !important;
border-radius: 50% !important; /* 50% for circle 0% for square */
background-size: cover;
cursor: pointer;
transition: border-color 0.3s ease;
padding: 1rem !important;
}
.product-form__swatch label:hover {
border-color: #333 !important;
}
.product-form__swatch {
display: inline-block;
margin-right: 5px;
}
You are the goat!
You are the goat!