What should a cart progress bar show at each stage?
A cart progress bar should always show the next reward and the exact remaining amount, confirm each unlocked reward by name, and switch to a clear “all rewards unlocked” state at the top tier, using the same calculation as the reward rule.
A progress bar has one job: tell the shopper what they get next and exactly how much more it takes. It should show the next reward and the remaining amount, confirm each reward once unlocked, and switch to a clear final state at the top tier. The amount must come from the same calculation the reward rule uses, or the bar will promise rewards the cart does not deliver.
What are the four states of a progress bar?
| State | What to show | Example message |
|---|---|---|
| Empty or below first tier | Next reward and remaining amount | “Add 18 more for free shipping” |
| Between tiers | Unlocked reward plus next goal | “Free shipping unlocked. Add 22 more for a free gift” |
| Reward just unlocked | Confirmation naming the reward | “Your free tote has been added” |
| Top tier reached | Final confirmation, no further goal | “You’ve unlocked every reward” |
Design every state, including the ones shoppers see rarely. An undesigned top-tier state often shows a broken “Add 0 more” message.
What do apps let you show?
Monk Commerce lists progress-bar display options for a banner, milestones, rewards, ineligible carts and confetti. (How to set up a free gift pop up offer using the progress bar? — Monk Help Center) BOGOS describes a live bar that shows how close customers are to the next gift, with a message such as “spend $20 more to unlock.” (Tiered gift with purchase — BOGOS) Check which states each app lets you edit and translate.
Which number should the bar use?
The remaining amount should match the rule’s definition. Shopify’s Cart API exposes fields such as items_subtotal_price, total_discount and the customer’s presentment currency. (Cart API reference — Shopify Dev Docs) A theme can display any of those numbers, but the reward rule may use a different one. A Shopify free shipping minimum counts discounted prices only when the discount combines with free shipping. (Free shipping discounts — Shopify Help Center) If your free shipping tier and your gift tier measure different subtotals, the bar needs to reflect each correctly or describe them in words.
What should the bar avoid?
- Vague goals: “Spend more to unlock rewards” does not say how much.
- Wrong currency or rounding: show the shopper’s currency with sensible rounding.
- Hidden rewards: name the reward; a mystery reward may intrigue but rarely motivates as well as a known item.
- Stale numbers: the bar must update after every cart change, including changes made by apps.
- Ineligible carts with no explanation: if excluded items do not count, say so.
How should the bar look?
Use a visible fill that moves as the cart grows, with tier markers if there is more than one tier. Keep text to one line on mobile where possible. Ensure the text has sufficient contrast and that the bar’s meaning is conveyed in text, not color alone, so it works with screen readers.
What should you test?
Walk a cart through every state in each currency you sell in. Check the message and the remaining amount against your own calculation at each step, including with a discount code applied.
Limits of this guide
Message examples are editorial. App display options were checked on November 9, 2026 from documentation. Accessibility of specific app widgets was not audited.
Frequently asked questions
- What should a cart progress bar say?
- It should name the next reward and the exact remaining amount, confirm rewards once unlocked, and show a clear final state when every reward is unlocked.
Sources
- How to set up a free gift pop up offer using the progress bar? — Monk Help Center (checked Nov 9, 2026)
- Tiered gift with purchase — BOGOS (checked Nov 9, 2026)
- Cart API reference — Shopify Dev Docs (checked Nov 9, 2026)
- Free shipping discounts — Shopify Help Center (checked Nov 9, 2026)
Found an error? See the corrections policy.
More research on progress bars & messages
- How do cart reward thresholds work across currencies?
Shopify converts fixed amounts from the store currency at checkout exchange rates, so a converted threshold can drift and look odd; per-market thresholds, documented by Monk Commerce, Appal and others, keep amounts clean and stable.
- How should progress bar messages be worded?
Progress bar messages work best when they lead with the remaining amount, name the specific reward, use the shopper’s currency, mention exclusions plainly and confirm unlocked rewards; keep each message to one short line.
- Where should a cart reward progress bar appear?
Place the reward progress bar where shoppers decide to add items: in the cart drawer and cart page first, optionally on product pages or as a sitewide bar; checkout placement is mainly a Shopify Plus option.