Quantity breaks that raise average order value

We asked two models with web search enabled for a React component for "buy 2, save 15%". ChatGPT wrote a stepper from scratch and cited no source at all. Perplexity wrote a stepper with min, max, step and a bundleSize prop, citing generic quantity-selector patterns.

Both are wrong in the same way, and the reason they are wrong is the useful part: there is no source for them to consult. The commerce mechanics have no canonical spec on the open web, so the model falls back on the nearest thing it has read a thousand times — a numeric input with plus and minus buttons.

Stepper versus quantity break

A stepper asks how many do you want. It is an input. The default is one, the customer sets a number, and the price multiplies. Nothing about it suggests that two is a better idea than one.

A quantity break asks which of these. It is a choice between named, pre-composed offers. The customer is not entering a quantity; they are picking a package, and one of the packages is visibly the sensible one.

That is not a styling difference. It is a different question asked of the buyer, and the second question is the one that raises the basket. A stepper makes buying more an act of arithmetic the customer has to perform. A quantity break makes it an act of recognition.

If you take one thing from this page: it is a radio group, never a number input.

The rules that decide whether it works

Three tiers, four at most. One is the baseline, one is the one you want chosen, one is the ceiling that makes the middle look reasonable. A fourth is tolerable when the product has a genuine heavy user. Five is a new decision problem and it converts worse than three.

Non-linear gaps. If tier one is one unit, do not make the tiers 1 / 2 / 3. Make them 1 / 2 / 4, or 1 / 3 / 6. Even steps read as a price list. Uneven steps read as composed offers, because they are.

Name the tiers. Not "Quantity: 3". Something the customer can picture: One tin, Three tins — the usual reorder, Six tins — the year. The name does the work the number cannot.

Mark the middle, and mark it honestly. A badge on the tier you want selected — Most chosen, Best value — plus slightly more visual weight: a heavier border, a lifted surface, never a different colour scheme that breaks the set. The badge must be true. Most popular on a tier nobody picks is a false statement about your own shop, and it is the kind that gets noticed.

Show the saving in money, not only in percent. Save 15% is a ratio the customer must convert. Save $12.60 is the answer. Show both if you like, currency first.

Show the unit price under the total. $48.00 · $16.00 each. This is the number that makes the comparison instant, and it is the single most-skipped line in every implementation we have looked at.

Pre-select the middle tier. Not the cheapest. The selected state is a recommendation, and defaulting to the smallest package is a recommendation to spend the least.

Update the add-to-cart button with the selected total. The button reads Add 3 tins — $48.00. One glance, no scrolling back up to check what was selected.

One block, above the fold on mobile. If the tiers sit below the button, they are a footnote. On a 390px screen the tiers and the button belong in the same view.

What it must not do

• Never a carousel. Three tiers fit vertically on a phone. A horizontal scroll hides the tier you want chosen.
• Never a pre-ticked add-on inside the tier. In the EU, an extra payment the customer must un-tick to avoid is refundable under Article 22 of Directive 2011/83/EU. Several bundle widgets ship this as a factory default.
• Never a countdown attached to the discount unless the discount genuinely ends. A timer that resets on reload is a misleading commercial practice, not a growth tactic.
• Never a fake anchor. A struck-through price that was never charged is prohibited in the EU under the price-indication rules on prior-price announcements. Strike through the real single-unit price and nothing else.

Where it sits relative to everything else

The quantity break is the first of four pieces that move a basket, and it is the one to build first because it operates before the cart exists:

1. The quantity break, on the product page. Raises the line value.
2. The free-shipping threshold bar, in the cart, showing the remaining amount in currency. Raises the basket toward a number you chose.
3. The complement, one item, below the add-to-cart or as an unchecked line in the cart. Never a grid of six. Placement rules in where to place an upsell on a product page.
4. The sticky add-to-cart on mobile, so the decision is never more than a thumb away.

None of the four ships in a general React or Tailwind component library — we checked each registry component by component and wrote the inventory in shadcn ecommerce blocks: what exists and what's missing. Every one of them stops at the SaaS pricing table, which is a quantity break for seats and nothing else.

Where the code lives

The implementation is a RadioGroup over an array of tiers, and it is a page of its own: bundle quantity selector component for React carries the props, the accessibility markup, the states and the mobile layout. It is also in the public repository, MIT, at uxgen-commerce-kit.

This page is about the offer. That one is about the component. If you are deciding how many tiers to price and at what gaps, stay here; if you are writing the markup, go there.

If you want an agent to build it without being told each time, that is what uxgen hands it.

FAQ

What is a quantity break?

A quantity break is a set of pre-composed offers at different quantities, presented as a choice. Buy one, buy three at a lower unit price, buy six at a lower one still. It is not a discount rule applied silently at checkout: the point is that the buyer sees the ladder and picks a rung.

Should a quantity break be a stepper or a radio group?

A radio group, always. A stepper asks how many, which is arithmetic the customer has to do. A radio group asks which package, which is recognition. Ask a coding agent and it will build the stepper, because that is the pattern it has read most often.

How many tiers should a quantity break have?

Three, or four when the product has a genuine heavy user. One baseline, one you want chosen and mark as such, one ceiling that makes the middle look reasonable. Five tiers turns a recognition into a comparison and converts worse.

Is a struck-through price on a bundle legal in the EU?

Only if the struck-through price was actually charged. EU price-indication rules govern prior-price announcements, so the comparison must be the real single-unit price. A compare-at figure invented to make the saving look larger is a prohibited practice, not merely an aggressive one.