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 bundle 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 bundle.

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

Your bundle

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

Select a goal to start building your bundle.

Bundle 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 bundle" 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 bundle 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.

A freshly added section ships with no blocks at all, so it never shows placeholder products on a live store — add your first Goal block and fill it in. Until at least one goal has a product chosen, the section shows only its heading, plus a reminder in the theme editor that the shopper never sees. The Neart preset's homepage comes pre-filled with a five-goal wellness example you can edit or replace.

A goal is only a goal once it points at a product: the product supplies the title, image and price the panel shows and the line the cart receives. A Goal block with the product picker left empty is skipped — no chip, no row — rather than shown as an empty line.

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 bundle          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  │  │  │  ─────────────────────────────────   │
│  └───────────────────┘  │  │  Bundle total              €58.00    │
│                         │  │  [   Add my bundle 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 still shown — marked Sold out on its chip and in the panel — but it is left out of the total and out of the cart, and the add button's count reflects only what it will really add. A goal with no product is not shown at all.
Time of day	Which group the goal's product appears under — Morning, Evening, or Anytime. Empty groups are hidden.
Icon	An icon choice for the goal (Moon, Sun, Energy, Heart, Coffee, Droplet, Smile, or None). Selection on the chip is shown by a plus that becomes a check.

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 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 bundle 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 bundle 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 bundle" 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 and the filled add button falling back to your scheme's own button colour, so its label stays legible whichever scheme you choose.

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 bundle" 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 falls back to a plain list of those products grouped by time of day. The controls only the builder can drive — the quantity stepper, the pack chips, the remove ×, the running total and the add button — are hidden rather than left as buttons that do nothing.
• 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. Every piece of text is inked with the scheme's own text colour and measured at 4.5:1 or better against all twenty shipped preset schemes, not just the one your store happens to run; the accent decorates (the kicker rule, the phase seams, the selected chip's ring) rather than colouring words.
• A shopper's bundle is remembered — the goals and quantities they picked are kept in their browser and restored on their next visit, re-checked against live stock and live prices. Nothing is stored if their browser blocks storage; the builder just starts empty.

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 and clearly marked, 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.