Create Your Own Hamper
Case study — Domain-Specific Software Platforms
About Petersham Nurseries
Over a twenty-year period, the Boglione family have created a world-renowned brand from a small nursery on land bordering their garden. An imaginative and creative journey, whereby owners Francesco and Gael, along with their four children, have developed the nurseries in line with their commitment to nature, integrity and family.
Instead of creating a complex new page template from scratch, the feature leverages Shopify’s native Collection structure.
Restaurant table with glasses
Backend: The Collection Strategy
Source Collection: All eligible products — candles, jams, lotions — are tagged or added to a specific collection, for example `petersham-nurseries-box-products`. This allows the client to easily manage inventory and add or remove products from the hamper options simply by editing the collection in the Shopify Admin.
The "Base" Product: The "Gift Box" itself (£10.00) is a standalone product or a mandatory add-on that initializes the bundle.
Frontend: Custom Box Builder UI
We built a custom interface that overrides the standard collection grid. This is built using vanilla JavaScript embedded within the Liquid theme to handle the real-time state without refreshing the page.
- Sticky Sidebar: On the top, there is a sticky "Box Summary" module.
- State Management: As users click "Add to Box," the JavaScript updates a local state object — the "virtual box" — rather than the actual Shopify cart immediately. This allows for instant UI updates, price totals, and item counts without API lag.
- Product Cards: Standard "Add to Cart" buttons are replaced with "Add to Box" buttons.
- Visual Feedback: When clicked, the button changes state, for example "Added", and the item appears in the summary.
Petersham table and flowers
Logic & Validation rules
Before the user can checkout, the system enforces specific business logic defined by Petersham Nurseries.
- Minimum Quantity: The "Add to cart" button in the sidebar remains disabled or triggers an alert until the condition — minimum selection per box: 3 items — is met.
- Single Hamper Constraint: The text "One hamper can be purchased per transaction" is a validation rule that prevents adding multiple "Box" bundles to the main cart simultaneously, simplifying fulfillment logistics.
Cart Integration — The Handshake
When the user clicks "Add to cart" in the sidebar, the system performs a bulk action.
- Payload Creation: It gathers the IDs of all selected products plus the ID of the £10.00 "Gift Box".
- Line Item Properties: It attaches a Line Item Property, for example `_HamperID: 12345`, to every item. This is crucial for the warehouse team; when they print the packing slip, these properties group the items together, signaling that they belong inside the gift box rather than loose in the shipping package.
- AJAX API: The system uses Shopify's AJAX Cart API to push all these items to the cart in a single request, redirecting the user to the checkout flow seamlessly.
Backend Flow
- User visits `/collections/petersham-nurseries-box-products`.
- Shop initializes a "Virtual Cart" at the top.
- User selects items; JavaScript adds them to the Virtual Cart, preventing page reloads.
- Validation checks: is count >= 3?
- User clicks "Add to Cart"; JavaScript sends all items plus the Box Product to Shopify's actual cart with grouping tags.