Bundle builder

A guided way to shop by goal instead of by product. The shopper picks one or more things they want — better sleep, daily focus, calm and recovery — and the section builds a personalised set for them, grouped by time of day, with a running total and one button that adds the whole set to the cart.

• Turns "I don't know what to buy" into a ready cart — the shopper chooses outcomes, not SKUs, and the right products assemble themselves.
• One tap adds everything — the whole stack goes in the bag together, and the cart drawer opens.
• Quantities and pack sizes built in — each line has a quantity stepper, and you can offer quick "1 / 3 / 6 month supply" chips that set the amount for that line.

It's the ideal section for any store where people shop by need rather than by name — wellness routines, skincare regimens, supplement stacks, starter kits, or any "build your own set" offer.

Try it

Pick a preset to see its style, select one or more goals to watch the set assemble, change the heading or color scheme, and use the screen-size and light/dark buttons in the preview header to check a phone and dark mode. The example below is the Neart (wellness) "Build Your Ritual" builder — but the same section works for any store: a skincare regimen, a supplement stack, a coffee-ritual kit.

←Bundle builder

Color scheme

Eyebrow

Short kicker text rendered above the heading in smaller, uppercase type.

Heading

Subheading

Storefront preview

BUILD YOUR RITUAL

Shop by goal

Tell us what you’re working toward and we’ll assemble your daily ritual.

Better SleepWind down and rest deeperDaily FocusSteady, clear-headed energyCalm & RecoveryEase tension and resetGlow & HydrationSkin-deep daily hydrationMorning EnergyA bright, gentle lift

Your ritual

Preview your routine — nothing's added to your bag until you tap below.

Select a goal to start building your ritual.

Ritual total€0.00

How it works

Add the Bundle builder section, then add a Goal block for each outcome you want to offer. Each goal is one choice: a title, a one-line description, the product it recommends, and the time of day it belongs to (Morning, Evening, or Anytime). When a shopper selects a goal, its product appears in the "Your ritual" panel under the matching time-of-day heading; deselect it (or tap the × on its row) and it leaves the set. The running total updates live, and the "Add my ritual to cart" button adds every selected goal's product in one go, then opens the cart drawer.

Until the shopper taps that button, the panel is only a preview — nothing reaches the bag — so a quiet helper line under the panel title says exactly that, and the section never gets confused with the cart.

The section ships with no goals by default — you add your own — so it never shows placeholder content on a live store. The Neart preset's homepage comes pre-filled with a five-goal wellness example you can edit or replace.

Pack / duration options

Each product line always has a quantity stepper (minus / number / plus). On top of that, you can add Pack / duration option blocks to offer quick one-tap quantities — a "3 months" chip, a "Family pack" chip, whatever you like. Each option block has just two fields:

• a Chip label — the text shown on the chip, in your own words (e.g. "3 months", "Family pack"); and
• a Quantity — how many units that chip adds when it's tapped.

Tapping a chip sets that line's quantity to the chip's number, and the stepper and chips stay in sync. The same options apply to every product line in the set. Add no option blocks and each line simply shows the quantity stepper — bad or blank options are skipped, so nothing can break the section.

Composition

                       [ Eyebrow ]
                      Section heading
                       Subheading
┌─────────────────────────┐  ┌─────────────────────────────────────┐
│  ☐ Better Sleep         │  │  Your ritual          2 PRODUCTS     │
│  ☑ Daily Focus          │  │  Preview — nothing's added yet       │
│  ☐ Calm & Recovery      │  │  ── MORNING ───────────────────────  │
│  ☐ Glow & Hydration     │  │  ▢ Adaptogen Focus Blend     €28.00  │
│  ☑ Morning Energy       │  │     [1 month][3 months][6 months] −1+ │
│                         │  │  ▢ Sunrise Energy Elixir     €30.00  │
│  ┌───────────────────┐  │  │     [1 month][3 months][6 months] −1+ │
│  │  lifestyle image  │  │  │  ─────────────────────────────────   │
│  └───────────────────┘  │  │  Ritual total              €58.00    │
│                         │  │  [   Add my ritual to cart   →    ]   │
└─────────────────────────┘  └─────────────────────────────────────┘

On the left: the goal chips (a keyboard multi-select) and a lifestyle image. On the right: the assembled set grouped by time of day, with each line's duration chips and quantity stepper, the running total, and the one add-to-cart button. When no goal is selected, the panel shows an inviting empty prompt instead.

Section settings

Setting	What it does
Color scheme	Colors the whole section — background, text, chips, panel, and CTA — from one scheme, so contrast stays legible in light and dark mode.
Eyebrow	A short kicker above the heading (e.g. "BUILD YOUR RITUAL"). Optional.
Heading	The section title (e.g. "Shop by goal", "Build your routine"). Optional.
Subheading	One line under the heading. Optional.
Image	A lifestyle photo shown in the left column under the goal chips. Optional — describe it in the image's alt text.

Goal settings (one block per goal)

Setting	What it does
Heading	The goal title the shopper picks (e.g. "Better Sleep", "Daily Focus").
Text	A one-line outcome under the title (e.g. "Wind down and rest deeper"). Optional.
Product	The product this goal adds to the set. Its first available variant is used; a sold-out goal is shown but excluded from the cart.
Time of day	Which group the goal's product appears under — Morning, Evening, or Anytime. Empty groups are hidden.
Icon	An optional mark for the goal (Moon, Sun, Energy, Heart, Coffee, Droplet, Smile, or None).

Pack / duration option settings (one block per option)

Setting	What it does
Chip label	The text on the chip, in your own words — e.g. "3 months" or "Family pack".
Quantity	How many units to add when this chip is tapped (a whole number, 1 or more).

A realistic example — Neart's "Build Your Ritual"

The Neart (wellness) preset uses this section as its signature opener. Where other discovery sections ask "who are you shopping for?" (shop by category) or "what's your level?" (shop by level), the ritual builder answers "what am I trying to achieve, and what's the routine?" — Better Sleep, Daily Focus, Calm & Recovery, Glow & Hydration, Morning Energy. A shopper picks the outcomes they care about, and the builder assembles a daily routine grouped into Morning / Evening / Anytime, with a running total and a single "Add my ritual to cart". It's the same section you're configuring above; only the goals, products, and imagery make it wellness-specific.

Swap the labels and products and the same builder becomes:

• A skincare regimen — "Clear", "Hydrate", "Brighten", "Protect", each adding the right step.
• A supplement stack — "Energy", "Sleep", "Immunity", "Recovery", built to a daily plan.
• A coffee ritual kit — "Wake up", "Mid-morning", "After dinner", each with the matching roast.
• A starter set — pick the goals that matter and the essentials assemble into one cart.

In each case the builder does the same job: it lets a shopper choose by outcome and walk away with a complete, ready-to-buy set.

Presets

The section is available in every preset, and its treatment matches the active preset's identity. The soft, premium, vital-green "Build Your Ritual" look — the glowing selected chips, the calm "Your ritual" panel, the vital-green add button — is the Neart signature; in the other presets the same builder takes on that preset's colours and type, with the accents tinted from the active color scheme.

Preset	Treatment
Neart	The signature "Build Your Ritual" builder — vital-green selected chips with a soft glow, a calm warm panel, the vital-green add button.
Uisce	Clean, cool, editorial chips and panel; the accent tints to the water teal.
Gaoth	Warm, rounded chips for pet and lifestyle stores; amber accent.
Talamh	Grounded, earthy chips for garden and heritage stores; moss-green accent.
Tine	Bold, industrial chips for hardware and trade stores; signal-red accent.

Responsive & accessibility

• A two-column working layout on desktop, stacking to a single column on tablet and a calm full-width band on a phone, with the total and add button pinned within reach as the set grows.
• The goal chips are a keyboard multi-select — Tab to the group, arrow keys move between goals, Space or Enter toggles one, Home/End jump to the ends, with a clear focus outline on each chip.
• The set is announced as it changes — the "Your ritual" panel and total live in a polite live region, so adding or removing a goal is read out to screen readers.
• Every tap target is large — the chips, the remove ×, the quantity steppers, and the add button all meet the 44 px minimum, so the builder is easy to use on a phone.
• It works without JavaScript — every goal chip is a real link to its product, and the panel lists every product as a link, so the section is a readable, navigable list even before the builder enhances it.
• Prices never drift — the total is summed from exact integer prices, formatted in your store's currency, with no rounding surprises.
• Respects reduced motion — the chip glow and the row fade-in apply instantly, without animating, when a shopper asks for reduced motion.
• Right-to-left ready — the layout, the remove control, and the add-button arrow all flow correctly in Arabic, Hebrew, Persian, and Urdu.
• One color scheme — the whole section is painted from a single scheme, so chip text, panel, and total never land in a low-contrast surprise, in light or dark mode.

Tips

• Lead with your most popular or most aspirational goal.
• Keep each goal's outcome concrete and short — one benefit, not a paragraph.
• Point each goal at a real, in-stock product — a sold-out goal is shown but can't be added, so keep your best routine buyable.
• Use the time-of-day groups to tell a story (a morning-to-evening routine reads as a plan, not a list).
• Offer 2–3 duration chips at most — "1 / 3 / 6 month supply" is plenty; more than that and the choice gets noisy.
• Use a real, in-context lifestyle photo in the left column — it makes the builder feel premium.