Build Your Own Bundle

The Task

Create a "Build Your Own Bundle" page where a user can create their own bundle from a provided set of products.

Result

https://www.livingproof.com/pages/build-your-own-bundle

Implementation

• Product Interface: The available products are displayed as Product Grids, separated into different Collections.

• Progress Tracking: A panel on the right displays the already selected items (with the ability to remove them) and tracks the bundle "fill" progress, highlighting the available rewards.

• Reward Types: The system supports two types of rewards for a completed bundle: a % Discount or a Free Product.

• Metaobject Architecture: The entire system is managed via Shopify Metaobjects. A "Bundle" Metaobject is assigned to the "Build Your Own Bundle" section. Inside the Metaobject, merchants can set the products for the bundle, configure the rewards (discount, free item), and adjust minor settings, including how the bundle appears in the cart.

• Checkout Validation: The Metaobject logic works in conjunction with a Cart Transform Extension. This enables a complex validation system at the Checkout level, applying the Bundle Discount only if all conditions are fully met.