How can I create a product bundle on my store?

Technical Q&A
1

I am trying to create an experience like this: https://www.wearfigs.com/kits/womens-raspberry-sorbet-best-seller-kit?color=No%20Color&fit=regular

Here’s how it works:

  • Main “Parent A” product is created in shopify. This item has no inventory and has no sku. The customer does not technically order this product
  • Parent A is a kit that references Child B and Child C (both children are other products in the store with inventory
  • When someone clicks add to cart on the Parent A listing, Child B and Child C are added to the cart individually (Parent A is never added)

Essentially, Parent A is just a reference to the 2 children. However, Parent A is able to be added to collection pages and looks like a normal product to the end consumer.

How would I go about accomplishing this goal?

2

You’ll need a custom templates and structure your product handles to either:

  • find the component products based on naming conventions by handles using the all_products global object
  • use metafield definitions of product reference type to explicitly assign references to the products in the Parent A container product.
  • Put them in a collection named after the bundle
  • use linklists to relate the products, with the linklist handle matching the Paraent products handle exactly.

Naming convention example

  • Container Product name = Red Bundle with T-shirt and Pants
  • Container Product handle = red-bundle-with-t-shirt-and-pants
  • So custom template looks for handles “red-t-shirt” and “red-pants”, splitting the container handle into strings in and array based on “bundle”, “with” “and” using string filters
  • i.e. {{ red-bundle-with-t-shirt-and-pants | split:“bundle” | first }} == “red”

Once you’ve figure out a method, to add multiple items to the cart at once using the variant.ids you’ll need to either modify the themes javascript, or update the underlying id inputs the form submits to submit as an array.

I.e.

becomes

Or reference the order form customization

https://community.shopify.com/c/Shopify-Design/Forms-Add-an-order-form-to-your-store/td-p/613671

3

Hi

You could also process the order post purchase and remove the bundle line and replace it with component lines like we do with our bundleup app.

My main concern with doing it before checkout is the buyer is seeing different products in their cart instead of the item they added. They can also remove one of them which would affect pricing if using a discount code to reduce the cost of the kit.

If you do want to do it before checkout then you could have the inventory calculated of Parent A based on the child products. So if one of the child products is out of stock Parent A will also go out of stock. You can do this on our bundle app as well and not worry about splitting the order after checkout. Otherwise if a child product is out of stock and a user is still able to add the parent then probably not ideal.

Regards

Tom