Offer add-on products specific to size of main product, at a discount

[JS312]

We sell belts in various colors and widths, and also buckles that go with them in various colors and widths. You can choose any color buckle for any color and width of belt, but the buckle must be the same width as the belt in order to work. We want to offer the buckles as an add-on to the belt on the product page, but we want the SKU of the correct width buckle (also a product in our store) to be added to the cart automatically depending on what width belt has been chosen.

For instance, you select a 1" wide belt and it comes with a silver buckle. We want to offer an add-on of a buckle in your choice of gold, gray, or black, and if you choose to add one on, the 1" version of that buckle is added to the cart automatically. The 0.75" and 1.25" buckles won't work with your belt so we don't want to offer those unless the customer switches their product selection to one of those sizes.

In addition, we want to offer the buckle add-on at a lower price than we normally sell the buckles for. If we normally sell them for $10 on their own, we want to offer them for $5 as an add-on if you are buying a belt.

I have played around with several upsell/add-on/bundle apps, but so far haven't found one that has all. this functionality. There seem to be countless options so it is hard to narrow them down to try them out. Does anyone know of any app that would work with this situation?

[Taknify]

I don't know any app that I can recommend but this can be done with custom coding. I would prefer you provide that upsell in cart page rather that product page. The way the custom coding works is: you tag the buckles and belt with one tag and on the backend we can see if X belt with "x" tag is added, then show the users Y buckles which have the same "x" tag. There are different apps that may provide this for you if you want to go with that way, you just have to go with trail and error until you get the "app" that works for you.

If you prefer custom code to accomplish this, we can help. 

[JS312]

I prefer it on the product page, because I want the discounted add-on price and the selection of buckle colors to be visible before they add the belt to their cart. The purpose is not so much to make extra money by adding on the buckle, but to make it clear to the customer that the belt will work for them because they can get exactly the look they want by adding on a buckle for cheap. In other words, it's more a way to get the belt to convert better than to get the extra buckle sale. That's why I think having the add-on on the product page makes more sense. Is that possible? Plus, we may want to add additional add-ons or up-sells on the cart page.

I think the idea of suggesting the add-ons using tags makes sense. I am not completely opposed to custom coding but want to avoid doing it in a way that makes it hard for me to edit or enable/disable it, customize the theme, or move it around on the product page, etc. I have had that problem with custom coding in the past and recently switched to a Shopify 2.0 theme and want to maintain the flexibility of the customization options and modularity. That is why my first instinct was to try to find an app to do it. Thoughts?

[Taknify]

It is possible to do that on product page too. The comment below me suggest an app that does what you want. If you want to go custom coding, please DM me your collaborator code. 
You will still be able to control what product upsell will show up using tags when you go custom coding route. 
The discount can be done with metafields where you assign a price to it as long as the price of the buckle is not more than your original price. 

[iCart_App]

Hello @JS312,

To achieve dynamic product bundling, conditional add-ons, and custom pricing for your belts and buckles on Shopify, you can use Bold Product Options combined with iCart Cart Drawer Cart Upsell for a seamless user experience.

• Install Bold Product Options -

1. Create a new option set for your belt product.
2. Add options for Belt Width and Buckle Color.
3. Use conditional logic to show only the buckles that match the selected belt width.
4. Link each buckle color to the corresponding SKU and set a discounted price for add-ons (e.g., $5).

• Install iCart Cart Drawer Cart Upsell -

1. Set up the cart drawer to show when an item is added to the cart.
2. Add upsell offers for the buckles based on the belt width selected.
3. Ensure that the upsell is displayed at the discounted price.
4. Add a belt to the cart and select a width.
5. Check that only the corresponding buckle options appear.
6. Confirm that the correct buckle SKU is added at the discounted price.

This setup will allow customers to easily add matching buckles, with the correct width and at a special add-on price, to their belt purchases directly from the product page and the cart drawer.