Combine Shopify Product Listings for Better Conversion Rates

[@em_pasin]

I was looking for this. You're awesome! Please keep us posted when the color swatch option will be available.

[@theprompted]

Will do!

[@TriumphTube]

Hi, thanks for your instructions. Important note: while creating metafields, you left out a crucial step. You also have to create a second product metafield with content type metaobject, so that you can select the metaobject entries on a product level. EDIT: later in the video and on the Notion page you do mention creating a second product metafield that refers to the metaobject. YOU'RE A LEGEND, Works like a charm on my store. Before I used the complementary products block but with many products that becomes too many images.

[@haarigeddon]

sorry at 17.17 he adds the product metafields

[@ingridsegarra8302]

Hi, thank you for your vid, you missed a step at minute 10, which is adding a definition for the product grouping option 1 metaobject, took me a while to realize what I was missing and why it wasn't working for me, until I saw that part was missing, in case anybody else has this issue

[@alkeline]

This is great! But how do I change the text to colour swatches or images instead? Or have my colour swatch, just click to the other product? Please help. Thank you!

[@koreappinesmusic]

Very Underated Shopify Developer KZbin Channel, Keep it up man, soon you'll get more than what you deserve, Thanks.

[@theprompted]

Thank you - I appreciate it!

[@claudialg19]

Thank you so much, this is awesome! Is it possible to combine both swatches with the pickers for product-as-variants?

[@theprompted]

That's something I will be working on for a future video!

[@adeisaac]

Ohh man, thank you, you read my mind on this one....🥳🥳🥳🥳

[@theprompted]

🔮🧠

[@pabloalvezmanoli7964]

I just wanted to drop by and say a huge thank you! Your tutorials have been an absolute lifesaver for me. I recently made the switch from having variants to individual products, and it's made a world of difference. Most of the issues I was facing have been resolved now. However, there's one small "bad thing " - I have lost the color swatch feature in the process. I was wondering if you could create a tutorial on how to incorporate the color swatch functionality into the Product Grouping Picker. It would be incredibly helpful! Once again, thank you for all the amazing content you put out. Your tutorials have been invaluable to me, and I can't wait to see what you come up with next. Keep up the fantastic work!

[@theprompted]

I appreciate the kind words! Adding the color swatches to this customization is on the roadmap - stay tuned!

[@pauladiaz7497]

thank you SO MUCH!! it was super helpful and well explained!!

[@theprompted]

Glad it helped!

[@leoragi001]

Amazing video, exactly what I was looking for. Thank you sir.. just one question, this is my escenario: Collection = 10 designs 1 Design = 2 or 3 garments Your code and instructions worked flawlessly, but in the webpage I’m still showing two different garments w the same design , example : “tshirt and hoodie with apple logo” both w the meta options to see the other one. Is there a way to have only one item in there?

[@theprompted]

You could set your collection to only contain one of the products only. For example, you can set t-shirt as the primary product, and only show that one in the collection. And once they go into the product, they'll see the option to switch to Hoodie.

[@leoragi001]

@@theprompted ohhh I will try that! Thank you so much. 🙏🏼

[@bradedwards7830]

Brilliant tutorial - is it possible to do this on the warehouse theme?

[@theprompted]

Thank you! The code was designed for the free Shopify themes like Dawn, Refresh, Sense, etc. I haven't tested it on Warehouse but there's a high likelihood it would have to be modified for it to work properly.

[@bennysblanks]

This was fantastic thank you! Is there any way to then make those new variant pills swatches?

[@theprompted]

Yes - this is coming soon. Stay tuned!

[@steverahman8543]

I dont get the second meta field on my products. What can the problem be?

[@alekodimitrov2635]

He mentioned it in the description: "NOTE: the step to create the "Product Grouping Option 1" metafield was accidentally cut out of the video. Please see 16:34 instead since a second set of metaobjects and metafields are created with identical steps (except it's "2" instead of "1"). You can also visit the code link for the metafield details."

[@bennysblanks]

This was fantastic thank you! Is there any way to make the variant pills for the different products swatches?

[@theprompted]

Yes - have that one in the queue!

[@SimonS188]

Good extension for this would be to pass the variant properties selected as params to the product links, so that when you click them and move to the different product, it then remembers the variant properties like colour, or size and selects them on page load when you move page. Would make the transition between products much more seamless.

[@theprompted]

Absolutely. We actually have a solution for our Skool members: www.skool.com/the-prompted/about Check it out if you're interested!

[@Esteban352]

I just updated to Dawn 13.0.1 and lost the color swatch you taught me. Notifications ON for your color swatch video on the new update.

[@theprompted]

If you go back to the swatch video (kzbin.info/www/bejne/Y6PElmeve5ahg7M), the code link has been updated to be compatible with v13. Let me know if it works for you

[@Esteban352]

@@theprompted I'll check the video! Thank you very much. Would you be interested to do work as a freelance?

[@theprompted]

No problem! Not actively taking on clients this very moment but am considering opening something up. Feel free to fill out this form to let us know what you're looking for: forms.gle/CxGxEbSyemGdJzeVA

[@amandashaffer7278]

Thanks so much for this info, man! Truly helpful! Subbed!

[@davidogaming6689]

Why is there a limit of 3? I was able to find and change it but I was just wondering is there was a reason for it being there in the first place.

[@theprompted]

You’re free to increase it! There’s no technical issues with having more than 3

[@shmex4172]

Hey! Great video. Quick question.. what if I am using a different theme and there is a "main-product.liquid" but it does not contain the "'variant_picker'".. I am very uncertain where to insert the 2nd bit of code. Thanks in advance!!

[@theprompted]

This customization was designed for Shopify developed themes (Dawn, Sense, Taste, Refresh, etc). If your theme doesn't have main-product.liquid, then it's likely a third party theme. If this is the case, then the code would need to be adapted to work with your theme.

[@hafrankhauser2805]

Huge thanks for your detailed tutorial. Is it possible to hide some individual products in the front store? It is one design, but printed in different product types, like your demo product. It'd be less confusing for my customer to see only 1 listing instead of 5 displayed.

[@theprompted]

Do you mean the products showing in your collection? If so, you can simply change your collection to show only 1 of the 5 products.

[@safsofine]

Thanks so much! cann you please explane how to add images for these buttons to this new function like in your previous video "How To Add SWATCHES To Any VARIANT PICKERS In Shopify"?

[@theprompted]

You're welcome! Yes, this update is on our to-do list.

[@hemangsharma9358]

Great video. Is there a way to show a small product image alongside the pill on the product page? (Like on the main image of the video.)😀

[@theprompted]

Do you mean variant swatches? You can check out this video: kzbin.info/www/bejne/Y6PElmeve5ahg7M

[@reneeliu7598]

The best tutorials for this solve the problem! Although missing the part to "Create Product Metafield with type Metaobject above," I'm sure it's an easy fix. Can you do one to allow customers to select multiple values under the same option? When selecting multiples, the price automatically adds to the display price. I'm not sure if that's achievable?

[@theprompted]

The instructions to create the product metafields and metaobjects are in the video, which is fairly straightforward set of steps (no code). As for selecting multiple values - do you have an example website with this feature so I can get a better visual idea of what you're looking for?

[@quyenho2722]

Thanks, How do you set the price for each variant?

[@theprompted]

Price is managed in the product admin. For each product, you should see a box to add the price.

[@Ramalho25]

Hey great video, thanks for sharing! Is it possible to add images for these buttons to this new function like in your previous video "How To Add SWATCHES To Any VARIANT PICKERS In Shopify"?

[@theprompted]

Definitely possible, and will be part of a future video :)

[@safsofine]

​@@theprompted I really need this tutorial

[@4XDestinations]

Love your videos great assistance to new Shopify user. Your presentation style and providing code is so easy to follow. Would love to know how to create a Percentage Off sale storewide, without an app, with SALE image on products and price crossed out and sale price. I know I can do this manually but would love to be able to do it dynamically storewide.

[@theprompted]

I'm glad you find the videos helpful! Th simplest and most common method for a store-wide sale is to use a discount code that's added to the cart (and can be paired with a banner saying - "use code 25OFF to get 25% off your entire order". The discount code can be manually added or you can set it to be automatically applied. However the price won't show the discount until you're on the cart or checkout page. If you want the products themselves to show this sale price in the compared-at price, then each product would need to be updated, as you're aware. For bulk price edits like that, you could use a bulk editing app like Hextom BPE or Matrixify. There should be other apps that are designed specifically for pricing updates, but I've never used any of them.

[@genius_maker]

Hello Sir! You're doing a fantastic work. Thank you so Much I have a request if possible please make a small video on this. I have disable add to cart button on my store. I want to keep only "Buy it Now" button on the product page and make this Buy it Now button STICKY. Please make a video on this. I would really help me. Thanks

[@TallneckTech]

You are THE BEST!

[@EmamStudent191]

Where is the code that you paste???

[@LGG_Jewelry_Official]

Hi, just wondering, does it work for the theme from Themeforest?

[@theprompted]

This tutorial was designed for the free Shopify themes (ex: Dawn, Sense, Refresh, etc), so most likely it would not unless the Themeforest theme was built using Dawn as its base.

[@4XDestinations]

Have implemented a number of your guides, most of which are invaluable. Few questions - can I combine more than 3 products eg 5 products using "Combine Separate Products Into The Same Listing (2024 version)". Also want to limit the "You may also like" on bottom of Product page to products from same collection only, any ideas. Keep up the good work!

[@theprompted]

Glad they've been helpful! Yes, you can combine 5 products (and more) together. If you want the suggested products to be from the same collection, instead of using the "Related products" section, you'll likely have to implement featured collections that are dynamically set by the product metafields. Check out this video to learn how: kzbin.info/www/bejne/qZTGc51ujJV7qcU

[@4XDestinations]

@@theprompted Thank you once again.

[@ItsAlejandropere]

Hey man great as always, my surprise was when I realized I was looking for something slightly different, my jewelry brand is all about bundles and what I want is people in the same product page choosing the chain (variant 1), the charm (variant 2) and the color (variant 3), how can I do that? I thought this way I could but it goes directly to another product, I cannot make a bundle this way. Please help

[@theprompted]

So if I understand correctly, you want to bundle 3 different products together, and each product has their own variant options? That's not a customization I currently have on the channel, but I'll add it to the list!

[@ItsAlejandropere]

@@theprompted that’s right, thanks a lot! I’ll keep an eye on the next videos! :)

[@PureSpark-wc1su]

can i instead of color swatches add product image swatch?

[@theprompted]

You can use this to combine any products together in whichever way you want. But the variant picker style will have to be dropdown or pills. If you want swatches, you can watch this video: kzbin.info/www/bejne/Y6PElmeve5ahg7M. In the future I will have a tutorial that combines both swatches with the pickers for product-as-variants.

[@Yousports-xl8fh]

Great stuff! But the link for the code is broken.

[@theprompted]

Thanks for letting me know! Should be fixed now.

[@chefdavel]

I'm doing the same but I have a lot of products that I'm selling myself that I want to upload but is so much and a want way that I can bulk upload 60 variants

[@theprompted]

You can create the metaobject groupings and set the metafields with a bulk updater app like Matrixify

[@racheldykes8529]

Good stuff. One thing I would like to see is the ability to show the options that are not available as that selection. For example, you showed the three different graphic designs, but only the shirt has all three. If you are viewing the hoodie it would be nice to see the other design options, but greyed out or crossed out. I just tried this on Amazon with a shirt that has a lot of colors, but not all the colors are available in all sizes. If you select a size and then select a crossed-out color, it unselects the size and makes you choose a size the color is available in. I'm betting that is much more complicated to implement.

[@ShoneTheGenije]

If I understood you correctly, I think you would need to add those ”missing” options to other of your product and set availability to 0. then those variants would show as crossed.

[@racheldykes8529]

@ShoneTheGenije Interesting...but then I would have to make sure that product doesn't show on internal or external search. And the "product" would not have an image or a description so would need to test it to see how the page behaves.

[@theprompted]

That's an interesting idea. I'll have to think about how this would be implemented because depending on the scenario, you may want it to be showing out of stock or unavailable, and in other cases you may not want it to show at all.

[@racheldykes8529]

@@theprompted I assume it's very complicated, probably too complicated. It's a shame that Shopify already has this solution, but it's on the variant side instead of whole products like what we see here. (Actually perhaps they have the solution for plus users, because I know they have or will have the ability to combine products like this, but natively).

[@theprompted]

Yes, exactly - Plus users will be getting this feature natively. But for regular Shopify users it's either through apps or customizations like this. But @ShoneTheGenije 's suggestion could work: create each of the products that you want to have a variant selection for and set them as out of stock, group them together with the other products, and then we would add logic to the code to check product inventory and set the picker to show out of stock if necessary. And then if you're concerned about the out of stock product showing up in search, you can set it to "hidden": kzbin.info/www/bejne/b5DdmYmEabqLb5o

[@roiseaux]

@ThePrompted Instead of creating a new grouping row of pills, is it possible to merge in a separate product as a color variant under "Color" instead? For example, I have 2 separate products: Dress (orange), Dress (blue). Both are the same dress, just with a different color variant. I just want to simply group them together into one listing, and have both orange and blue options show up as color variants, without manually creating a variant from scratch and inputting all the sizes, photos, SKUs, inventory, etc

[@theprompted]

I'm not sure what you're hoping to achieve or avoid, but regardless of whether you set up your products as variants or products, you will still need to add sizes, photos, SKUs, inventory, etc. If it's an issue with set up, you can simply duplicate the initial product and then edit it from there, so that you at least have a starting point and not working from scratch. But you would have to choose: it's either a variant (and would be shown in the variant selector) or its a product, and with this customization it can be shown with the custom picker. So whichever way you choose, you will have to be consistent for that product grouping so that color only shows up in one or the other and not both.

[@michaelhirt3915]

hey the notion link doesnt work yet :)

[@theprompted]

Thanks for letting me know! Should be fixed now.

[@MahmoodElahi-y4e]

Can you tell me how can i achieve this on Empire theme. And can i hide a variant option and show the meta field. For example i want to showcase every color of a product, so instead of showing the actual variant option and the product group option i only want to show product group option. Empire theme has added the variant options in a block called form

[@theprompted]

This code was designed for the free Shopify themes. I haven't tested it yet with Empire, so please be careful and make sure to duplicate your theme before starting. To achieve what you're looking for, you can group your products together like in this video, but you will have to make sure your product doesn't have any variants. That way it will only show the product grouping picker.

[@ShoneTheGenije]

Hi, me again. I was just about to brag about how I managed to improve your last tutorial on product grouping to loop trough meta filed instead of Product type, and here you are, making it even better. Now, as usual, the question about default variant picker. When you change new page loads, previously selected variant e.g. Size: L do reset to default Size: S. From the customers point of view, it is still the same product page, in his eyes he hes just selected a different variant, to the Selected Size change might get unnoticed. Do have any idea or workaround that?

[@theprompted]

Glad to see you again :) Keeping the size when changing products is a great point. I'll explore some solutions for this.

[@ShoneTheGenije]

@@theprompted Can I ask you one favour. I have been trying to achieve this for tow days now, but obviously I'm lacking the brain for it. Is there any way you can tell me how to replace Metafield: 'Product Grouping Option 1 Value' with metafield name and value I already have. E.g. I have MF Name: Model and Type with values: Standard and OEM. Since its its already populated on most of the products, it would be unnecessary to double the value in new Mf . It would be same thing twice. p.s. And if you are about to ask logical question why I just don't delete existing MF and replace it with 'Product Grouping Option 1 Value', it is because of the MF name. MF name: Model and Type (and its value) is much more suitable for exporting in the order sheet, as its self explanatory within the fulfilment process. Whole name 'Product Grouping Option 1 Value' is not. and it too long even for use in the product editing page. Thank you in advance.

[@theprompted]

You most definitely are not lacking the brain for it! You're always sharing very insightful comments. It can be difficult to modify code that you didn't write yourself because there are design decisions that you may not be aware of. As for what you're hoping to achieve, it can be fairly simple to modify on the condition that your existing metafields have fields that match the same type as the ones in the customization, ie. the metafield has a field with type "list of products". If so, then in the code product-grouping-picker-custom.liquid, replace {% assign related_products = related_products_metaobject.product_grouping.value %} with {% assign related_products = related_products_metaobject.FIELD_KEY.value %}, where FIELD_KEY is the key used for your 'list or products' field of your metaobject. Next, in the theme settings, make sure to set the "Option Metafield Key" to the key of the metafield that's of your metaobject type above (that contains the 'list of products' field). And then for "Option Value Metafield Key", you will need to point it to the key of your metafield that defines what the button label should be for each product. Hope that helps!

[@ShoneTheGenije]

@@theprompted Thank you very much. I'll let you know how my brain reacted to this input. Haha

[@theprompted]

You got this!

[@stefanopistillo7934]

Hello, I followed step by step but once I add the required metaobjects and metafields, when I go to the product page I only have the Product Option 1 Value, so I cannot then select the product because I do not have the metaobject field below like you. Are you sure you did not skip any step?

[@theprompted]

Some viewers just let me know that the code link was broken and you'll definitely need the code for this customization to work. But the link should be active now!

[@stefanopistillo7934]

@@theprompted no, I meant the step before the code editing, when you go into the product page for the set up. I am missing the field where you can select the product under the Metafields...

[@ShoneTheGenije]

@@stefanopistillo7934 same issue

[@theprompted]

You're right - it got cut out accidentally. You can go to 16:34 instead since I create a second set of metaobjects and metafields. The steps are identical, except it's "2" instead of "1".

[@stefanopistillo7934]

@@theprompted I was able to do everything now, thanks! I just have another small issue: even if I selected the pills format for the variant selection, in some products it shows as a regular pill format like also in your tutorial. However, in other products it shows as a small dot you need to select and on the right side of the dot there is the name of the variant. Do you know how to fix this, so that is always consistent?

[@technav9724]

Nice

[@muom]

Just here to support. 🙌 I had no use for the last Videos you posted but they are great to watch how others solve the same problem I had a year ago. The current problem I have is the "Size Guide" on our product page. You can visit our page and will notice :P Maybe thats a great video idea for you on how to solve such a problem. We did it with a modal opener, but I wasn´t able to get it inside the "variant-title" yet.

[@theprompted]

Appreciate your support! Have you checked out this video for your size chart? kzbin.info/www/bejne/o5vVZKmnn9-ajJI

[@muom]

@@theprompted sure yes it was great but sorry for the misunderstanding. I meant more like „complicated code work“ like to bring elements in areas inside Shopify where they don’t belong to normally ;) Like to bring the size chart link inside the variant picker element header. But I guess there will be more videos coming where we get more into something like that 🙌🏻

[@theprompted]

Ah - so you want the link with the variant title. Should be do-able. Just would require some logic so that it only appears on the variant options and/or products where its relevant.

[@daco9464]

So much water in this video. But it is so easy to do with a lot of other apps. Or even with a little HTML code in the themes. Or with GemPages. You should better show a group listener wich will keep the before preselected size. I see already from the first minutes of the video, that it go to an other product by selecting an other option, but it put you always back to the first size option. It doesn't safe your preselection like it would within a product as variant. Sorry, but this whole video has no real worth.

[@MK-Tech]

😃🤌🏼 great stuff!