Create Your Own Hamper

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.

• Source Collection: All eligible products (candles, jams, lotions) are tagged or added to a specific collection (e.g., petersham-nurseries-box-products). This allows the client to easily manage inventory and add/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 (The "Hamper State"):

• 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, 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 (e.g., "Added") and the item appears in the summary.

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:

1. Payload Creation: It gathers the IDs of all selected products plus the ID of the £10.00 "Gift Box".
2. Line Item Properties: It attaches a Line Item Property (e.g., _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.
3. 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.