Shopify Product Bundle Builder

A custom Shopify Online Store 2.0 bundle-building experience developed on top of Shopify's Dawn 11.0.0 theme. The implementation lets customers assemble a fixed-size product bundle, filter available items, review their selections, and add the completed configuration to the cart.

Motivation

Standard product pages do not always support build-your-own-kit experiences. This project explores a theme-native approach that keeps bundle selection inside the Shopify product page while storing the customer's choices as line-item properties.

Goals

• Let merchants define a bundle size and eligible product collections through metafields.
• Prevent incomplete or duplicate selections.
• Give shoppers immediate feedback as they build a bundle.
• Preserve selected items with the cart line item.
• Keep the experience responsive across desktop and mobile layouts.

Implemented work

• Dedicated product.bundle.json product template.
• Custom main-bundle-product.liquid section.
• Bundle quantity controlled through custom.bundle_qty.
• Eligible collections supplied through custom.bundle_collections.
• Optional related bundle links supplied through custom.bundle_list.
• Product filtering by collection or design style.
• Duplicate-selection prevention and maximum-selection enforcement.
• Selection counter and disabled Add to Cart state until the bundle is complete.
• Remove-and-replace flow for selected items.
• Hidden line-item properties that preserve selected product names in the cart.
• Flickity carousel and responsive bundle-specific styling.

Accomplishments

• Extended a production-grade Shopify theme without changing the standard product template.
• Built the selection workflow across Liquid, JavaScript, CSS, JSON templates, metafields, and cart properties.
• Connected merchant configuration with a shopper-facing interactive bundle experience.
• Limited bundle assets to the custom template so standard product pages avoid unnecessary scripts.

Technology stack

Shopify Liquid JavaScript CSS JSON Templates Shopify Metafields Flickity Dawn 11

Key files

assets/
├── bundle-kit.js
└── bundle-kit.css
sections/
└── main-bundle-product.liquid
templates/
└── product.bundle.json
layout/
└── theme.liquid

Store configuration

1. Upload or push the theme to a Shopify development store.
2. Create product metafields in the custom namespace:
   • bundle_qty - number of selections required.
   • bundle_collections - comma-separated collection handles used as selection sources.
   • bundle_list - optional links or supporting bundle content.
3. Assign the bundle product template to the parent bundle product.
4. Add eligible component products to the configured collections.
5. Preview the storefront and confirm the selected values appear as cart line-item properties.

Local development

With Shopify CLI installed and authenticated:

git clone https://github.com/sajeda1311/bundle-test.git
cd bundle-test
shopify theme dev --store your-development-store.myshopify.com

Current status and limitations

This repository contains a theme-level prototype. It depends on store metafields and collection handles, uses browser alerts for some validation states, loads Flickity from a public CDN, and does not include automated browser tests. Product availability, pricing rules, inventory behavior, accessibility, and compatibility with third-party cart apps require store-specific validation before production use.

Next goals

• Add automated end-to-end tests for selection, removal, filtering, and cart submission.
• Replace alert-based feedback with accessible inline messages.
• Validate inventory and unavailable variants during selection.
• Add configurable bundle rules and merchant-facing documentation.
• Remove external CDN reliance or pin and self-host the required library.

Theme attribution

This project extends Dawn 11.0.0, originally developed by Shopify. Shopify retains ownership of the upstream Dawn theme code; the bundle template, section, JavaScript, and CSS document the custom work in this repository.

Author

Sajeda Patel