Widget layouts

A quantity-breaks campaign shows its discount levels on the product page through the storefront widget. This page covers the layouts you can choose between and how the level list behaves once it’s live — see Add the widget to your theme for turning the widget on and placing it.

Layouts

Open a campaign’s Widget tab and pick a layout from the grid. Four are free on every plan; five more need the Card layout widget feature, included from the Starter plan up:

Layout	Plan
Option cards	Free
Clean rows	Free
Table — rows	Free
Table — columns	Free
Bold fill cards	Starter and up
Tile columns	Starter and up
Segmented picker	Starter and up
Coupon stubs	Starter and up
Unlock timeline	Starter and up

A locked layout still shows its thumbnail in the grid, with an inline prompt to upgrade — you can see what it looks like before paying for it.

Buy X get Y and Cart goals campaigns pick from their own layout sets instead, built around a reward or a progress bar rather than a level table, and follow the same free/paid split.

How the level list behaves

The widget pre-selects a level for the shopper: whichever one you badged (for example “Most popular”), or the second level if none is badged. From there:

• Clicking a different level updates the price and savings shown, with a highlight effect on the card itself.
• If the campaign’s levels are based on quantity and Auto-sync with the quantity selector is on (the default, under Display options), clicking a level also fills in the theme’s own quantity box to match it — and the reverse: typing a quantity moves the selection to whichever level that quantity lands in.
• Every click counts toward Tier clicks on Analytics, deduplicated to one per shopper session, the same way a page view is.

Tip

If a countdown is configured, it can replace the level list entirely before the sale starts, and sit alongside it once the sale is live. See Widget text and translations for the countdown text.

When a campaign’s end date passes, the widget removes itself from the page rather than continuing to advertise a discount checkout no longer applies.

Reading the price

Under Display options, you choose whether the selected level shows Discount only, Price per item, or Total price, plus an optional “You save” line and a struck-through compare-at price. Every layout in the table above respects the same choice — it changes what the numbers say, not which layout you’re using. See Quantity breaks for the levels themselves: minimums, discount types, and how a level’s price is worked out.