E-commerce

Product Bundles

Two bundle mechanics in one demo: tier cards for a single product (Single, Duo −15%, Trio −25%) with per-bottle flavour picks, and a build-your-own box where every item moves a progress bar toward the next discount tier, with a live price breakdown and an animated savings counter.

Full screen Add this to my project

Use the Live / Loading / Empty / Error switch at the top of the demo to see every state.

Why it matters

Bundles raise average order value without blanket discounts: shoppers see exactly what the next item saves them, and the store controls the tiers.

How it works

01Tier cards show total, per-unit price and saving; choosing Duo or Trio reveals a flavour picker for each unit and counts the saving up.
02In the box builder, item steppers fill slots and a milestone bar (2 → 10%, 4 → 15%, 6 → 25%) with a 'add 1 more to unlock' nudge.
03Subtotal, discount, delivery (free above $40) and total recompute live; unlocking a tier triggers a small celebration and toast.