Winston Chow

Shopify Hardware

Winter 2019
TWG Team
1 Front End Developer
1 Technical Lead (Front-End)
1 Project Manager
1 Designer
Shopify Hardware Team
1 Retail Supply Chain Lead


In February 2019, the Shopify Hardware team partnered with TWG for custom theme development work on their Shopify store ahead of their Retail Kit release later that spring. As the sole full-time, front-end developer on the project, my focus was on building a solution to enable the sale of product bundles, a non-native Shopify feature.

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.