Great video! I have been trying to accomplish this for some time now with no luck. A few questions: 1. Our products currently have 3 options. (Material, Size, and Mounting Option) We have set up the Material and Size to be one Shopify product with under 100 variants and the mounting option as a separate option. Once the customer chooses the material the size options use conditional logic to show the sizes offered in that material. Is conditional logic available for this method? 2. When the order gets to the cart does it come in as separate products? Problems in the past for us here have been that if the customer orders multiple products and each of them have a mounting option we do not know which product goes to which mounting option, and the customer can delete the mounting option and the other product will stay in the cart. 3. When the order processes our system runs it thru Webgility for fulfillment and then on to Quickbooks for accounting so the products really need to be separate and have the SKU so that it passes thru all stages of the process. If they come into the order on the backend as separate products then problem solved, but if not is there a workaround?
First off, thank you for checking out our videos! I wanted to let you know that a new version of this solution was just uploaded today. It generalizes the solution so you can use it in more ways, and also gives you more flexibility to edit some options in the theme editor. Check out the video here: ruclips.net/video/bPDpDnFslVs/видео.html As for your questions: 1: I think what you're describing is something similar to what an app like Infinite Options has, where it uses line item properties to give you additional options instead of using actual variants. However, everything is still contained in a single product listing. Our solution uses completely different listings that are linked together. So the buttons seem like variants, but it actually takes you to a completely different product. 2 & 3: The orders will come in as separate products.
Awesome tutorial. Two questions popped into my head. One, is it possible to add an image to the choices? I have seen websites that have a little hoodie, sweatshirt, etc, icon with the text. Two: is it possible to add a second grouping complexity? Take apparel, you have shirts and sweatshirts but then you also have those in adult, youth and toddler choices. (Note I am only asking if that is possible, not whether or not you should actually have so many groupings together). Thank you if you see this!
Thank you! To answer your questions: 1) those images are called swatches and yes it's possible to add them. I have a bunch of different tutorials on this depending on where you want to add them. Here's the playlist: ruclips.net/p/PL6qd8phVYKw4s670ZLofWrIK0TWQKcLvO 2) Yes, in theory you can add a second grouping that leads to a different set of products. But it's not that straightforward - to do that you'll need to add more code and add a new metaobject to manage the grouping. Hope this helps!
@theprompted Cool, thank you. One other item, I noticed in the video the grouping selection is the third variant. I assume most would want it as the first variant selection since certain items might not have the same color or sizing options. I am assuming that would be a matter of changing where this shows up in the code.
You got it! In main-product.liquid, just add the lines to render product-style-picker-custom above the line to render product-variant-picker instead of below it (ie. immediately after {%- when 'variant_picker' -%}
I'm happy that it's helped! You can find the script here: wescalebrands.notion.site/The-Prompted-Use-Your-Products-As-Variants-4e23b582f958421f9919886112e23e37?pvs=4
Thank for another great tutorial. However... im trying to do this to overcome the 100 variant limit. So I created the code based on your tutorial. But I do NOT want to list them based on the product type. I want to add another Metafield called Color, and on each product I can type the color in this field, like Blue, Black and Green. And then it's this color names that are displayed as options on the product page. Would you be able to assist in how to achieve that last part??? Thanks again!
Another great question - you've shared some really great insights! This should be possible but I would have to modify the code. Will add this to the list.
Great video, but i have one issue. As im using debutify theme i dont have the file "main-product.liquid". in my theme what file corresponds to that one? or how can i do that step? Thanks!
To adapt this method for colors, you can change your product type to the color of that product instead. So for example, instead of "T-Shirt" and "Long Sleeves", you can change the product type to "Blue" and "Red". Keep in mind that this means for those products you wouldn't be able to use the Product Type for other uses.
Thank you for your tutorial, it was a great help to me, however, I have a problem... it tells me in my main product code "product-style-picker-custom does not exist" even though I have just create it in the snippet Thank you for your reply !!
If it's telling you it doesn't exist, then the filename somehow isn't matching. Is there a chance you may have a typo somewhere? One common naming error is adding ".liquid" in the filename since it automatically appends .liquid. This will end up with product-style-picker-custom.liquid.liquid. Hope that helps! ps. there's also a newer version of this very customization. You can check it out here: ruclips.net/video/IY2X4jTeQvA/видео.html
I'm glad you found it useful! You can find the instructions here: wescalebrands.notion.site/The-Prompted-Use-Your-Products-As-Variants-4e23b582f958421f9919886112e23e37?pvs=4
thank you for your knowledge, but i have problem, after completion of all steps i get style rendered, but without any buttons to be able to change pages. dev tools point that
I suggest going to the newer version of this linking products video here: ruclips.net/video/bPDpDnFslVs/видео.html You'll find the code in the description of that video.
We've updated this customization! Check it out here: ruclips.net/video/bPDpDnFslVs/видео.html
For those looking for the script used in this video, you can find it here: theprompted.co/blogs/tutorials/use-your-products-as-variants-free-tutorial
Great video! I have been trying to accomplish this for some time now with no luck.
A few questions:
1. Our products currently have 3 options. (Material, Size, and Mounting Option) We have set up the Material and Size to be one Shopify product with under 100 variants and the mounting option as a separate option. Once the customer chooses the material the size options use conditional logic to show the sizes offered in that material. Is conditional logic available for this method?
2. When the order gets to the cart does it come in as separate products? Problems in the past for us here have been that if the customer orders multiple products and each of them have a mounting option we do not know which product goes to which mounting option, and the customer can delete the mounting option and the other product will stay in the cart.
3. When the order processes our system runs it thru Webgility for fulfillment and then on to Quickbooks for accounting so the products really need to be separate and have the SKU so that it passes thru all stages of the process. If they come into the order on the backend as separate products then problem solved, but if not is there a workaround?
First off, thank you for checking out our videos! I wanted to let you know that a new version of this solution was just uploaded today. It generalizes the solution so you can use it in more ways, and also gives you more flexibility to edit some options in the theme editor. Check out the video here: ruclips.net/video/bPDpDnFslVs/видео.html
As for your questions:
1: I think what you're describing is something similar to what an app like Infinite Options has, where it uses line item properties to give you additional options instead of using actual variants. However, everything is still contained in a single product listing. Our solution uses completely different listings that are linked together. So the buttons seem like variants, but it actually takes you to a completely different product.
2 & 3: The orders will come in as separate products.
Thank you!
Awesome tutorial. Two questions popped into my head. One, is it possible to add an image to the choices? I have seen websites that have a little hoodie, sweatshirt, etc, icon with the text. Two: is it possible to add a second grouping complexity? Take apparel, you have shirts and sweatshirts but then you also have those in adult, youth and toddler choices. (Note I am only asking if that is possible, not whether or not you should actually have so many groupings together). Thank you if you see this!
Thank you! To answer your questions:
1) those images are called swatches and yes it's possible to add them. I have a bunch of different tutorials on this depending on where you want to add them. Here's the playlist: ruclips.net/p/PL6qd8phVYKw4s670ZLofWrIK0TWQKcLvO
2) Yes, in theory you can add a second grouping that leads to a different set of products. But it's not that straightforward - to do that you'll need to add more code and add a new metaobject to manage the grouping.
Hope this helps!
@theprompted Cool, thank you. One other item, I noticed in the video the grouping selection is the third variant. I assume most would want it as the first variant selection since certain items might not have the same color or sizing options. I am assuming that would be a matter of changing where this shows up in the code.
You got it! In main-product.liquid, just add the lines to render product-style-picker-custom above the line to render product-variant-picker instead of below it (ie. immediately after {%- when 'variant_picker' -%}
Great tutorials. Can we get the script that you are using in your videos to copy and paste?
I'm happy that it's helped! You can find the script here: wescalebrands.notion.site/The-Prompted-Use-Your-Products-As-Variants-4e23b582f958421f9919886112e23e37?pvs=4
Thank for another great tutorial. However... im trying to do this to overcome the 100 variant limit. So I created the code based on your tutorial. But I do NOT want to list them based on the product type. I want to add another Metafield called Color, and on each product I can type the color in this field, like Blue, Black and Green. And then it's this color names that are displayed as options on the product page.
Would you be able to assist in how to achieve that last part???
Thanks again!
Another great question - you've shared some really great insights! This should be possible but I would have to modify the code. Will add this to the list.
@@thepromptedthis is a great approach. Normally the color will not change the price so metafield with color apply for all products is the great idea
Great video, but i have one issue. As im using debutify theme i dont have the file "main-product.liquid". in my theme what file corresponds to that one? or how can i do that step? Thanks!
This customization was designed for the Shopify free themes, so unfortunately a developer would have to adapt the code for Debutify.
Hey, wonderful video, appreciated. Is it possible to apply it to variant colors?
To adapt this method for colors, you can change your product type to the color of that product instead. So for example, instead of "T-Shirt" and "Long Sleeves", you can change the product type to "Blue" and "Red".
Keep in mind that this means for those products you wouldn't be able to use the Product Type for other uses.
Thank you for your tutorial, it was a great help to me, however, I have a problem... it tells me in my main product code "product-style-picker-custom does not exist" even though I have just create it in the snippet
Thank you for your reply !!
If it's telling you it doesn't exist, then the filename somehow isn't matching.
Is there a chance you may have a typo somewhere? One common naming error is adding ".liquid" in the filename since it automatically appends .liquid. This will end up with product-style-picker-custom.liquid.liquid.
Hope that helps!
ps. there's also a newer version of this very customization. You can check it out here: ruclips.net/video/IY2X4jTeQvA/видео.html
Hello, nice tutorial. Where can find the script?
I'm glad you found it useful! You can find the instructions here: wescalebrands.notion.site/The-Prompted-Use-Your-Products-As-Variants-4e23b582f958421f9919886112e23e37?pvs=4
thank you for your knowledge, but i have problem, after completion of all steps i get style rendered, but without any buttons to be able to change pages.
dev tools point that
for me helped the solution to change element to
Great! Glad it worked for you. Also - fyi there's a new version of this customization here: ruclips.net/video/bPDpDnFslVs/видео.html
kidhar sai copy karo
code
I suggest going to the newer version of this linking products video here: ruclips.net/video/bPDpDnFslVs/видео.html
You'll find the code in the description of that video.