Shopify Hardware

Product Bundle Solution

Working closely with our primary stakeholder through rapid, iterative prototyping, the delivered bundling solution focused on three areas:

1. Configuration (Merchant Experience)

   • The parent-child product relationship is defined via Accentuate Custom Fields, a metafield app that we were familiar with on the development side, and whose UI we felt was intuitive for merchants.

   • The price of the parent product reflected the bundle discount.

   • Each bundle combination is specified in the variants section of the parent product, with each individual variant title containing a series of delimited child variant IDs of the parent bundle. This approach was chosen in order to surface bundle data to Shopify Scripts (see "Validation" section below).

     Example: A bundle product with the variant title 110-123-456 would indicate that this bundle combination has child product variant IDs of 110, 123, and 456

2. Purchasing

   • Customers could either purchase bundles via the Retail Kit PDP, or by individually adding all child products to cart.

   • We extended the PDP template to check if product.type == "bundle" and render additional customization options in the "Add to Cart" section accordingly.

3. Validation

   • Shopify Scripts has no way of accessing a product's metafield property. Thus, in order to validate the existence of a bundle, we check the variant.title property on the parent product to fetch a list of valid child variant IDs.

   • Scripts also checks for quantity, adjusting the number of parent bundle products based on the cart contents.

   • When a valid bundle is detected, the bundle parent is added to cart (if not already present) and the price of all children are set to zero.