Key takeaways
- The cart is the primary surface. If the bar is not visible when the basket is open, nothing else you do with it matters.
- A product-page bar is a preview, not a second cart. It should use the same remaining amount as the cart, including the item they are looking at if you can do that honestly.
- A site-wide header bar is optional. It helps when the threshold is a brand promise; it nags when it follows the shopper into blog posts and the account page.
- Never run two different numbers in two places. Desync is worse than no bar.
A progress bar that the shopper cannot see at the moment they are deciding whether to add one more item is a settings page, not a conversion feature.
Start in the cart. Add other surfaces only if they share the same number.
The cart comes first
In a drawer, the bar goes at the very top, above line items. In a cart page, the same: full width, first. This is the moment of highest intent and the moment the remaining amount is real.
If you only have engineering time for one placement, this is it.
Product page as a preview
A slim bar on the product page is useful when it answers "if I add this, do I get free shipping?" That requires either:
- Showing remaining without the current item, clearly labelled, or
- Showing remaining with the current item, clearly labelled as a preview.
An unlabelled number that assumes they have added something they have not is how you get angry emails and a support macro.
Header bars
A header announcement works for a campaign ("Free shipping over $50 this weekend") and poorly as a forever element. Permanent header bars become wallpaper. Wallpaper does not move AOV.
If you use one, hide it on cart and checkout so you do not show the same message twice, and hide it on content pages where it has nothing to do.
The desync problem
Two bars with two remaining amounts — because one includes discounts and one does not, or one is cached — will be noticed. Shoppers compare. When they do not match, they believe neither, and they will not add the extra item.
One calculator. Many views. That is the whole architecture.
Frequently asked questions
Should the bar be on every page?
No. Cart, product, collection if you must. Not the blog, not the policy pages, not checkout (Shopify owns checkout).
Can the product-page bar include the current item before it is added?
Only if you make that obvious ("If you add this, you'll be $8 away"). A silent hypothetical remaining amount is a lie when they have not added it yet.
Sticky header bars — good or bad?
Good on collection and product during a shipping promotion. Bad as a permanent chrome element. Shoppers learn to ignore chrome.
What if I use a cart page, not a drawer?
Put the bar at the top of the cart page, full width, before line items. The same remaining-amount copy applies.



