Cart-Drawer Progress Bars And The Goal-Gradient Effect On Mobile
Cart-drawer progress bars work on mobile because effort accelerates as a goal nears — but only when the remaining gap feels achievable. Here's what to show, where, and when it breaks.
Quick answer
A dynamic cart-drawer progress bar ("€12 away from free shipping") beats a static threshold banner on mobile because the goal-gradient effect kicks in as the remaining distance shrinks. The lift only holds when the gap is roughly 15–30% of current cart value; past that the goal feels out of reach and the bar demotivates instead.
Cart-drawer progress bars and the goal-gradient effect on mobile
A UX pattern that uses a live progress bar in the mobile cart drawer to exploit the goal-gradient effect — effort accelerates as a reward nears.
The goal-gradient effect, first documented by Clark Hull in 1932 and re-validated in loyalty programs by Kivetz, Urminsky and Zheng (2006), says people expend more effort as they get closer to a goal. A cart-drawer progress bar operationalises that on mobile: as the shopper adds items, a live bar and counter show exactly how far they are from a free-shipping (or free-gift) threshold. The effect is strongest on mobile because the drawer is full-screen — the bar is unavoidable, and one more tap on a product tile visibly moves it.
The pattern lifts average order value only inside a narrow band. Too far from the threshold and the bar feels like a tax; too close and it's redundant.
On desktop, a cart summary sits in the corner and competes with the product grid for attention. On a phone, the cart drawer takes the full viewport — so the progress bar is the first thing the shopper reads after tapping the cart icon.
That framing matters. The bar isn't a passive banner; it becomes the answer to the shopper's actual question — "am I done, or is one more thing worth it?" — which is exactly the decision goal-gradient theory predicts you can nudge.
Why the goal-gradient effect fires harder on mobile
Two things amplify the effect on phones. First, the drawer is modal — there's no product grid distracting the shopper's attention from the bar. Second, mobile sessions are shorter and more emotional; a visible "87% there" cue overrides the analytical "do I really need another top?" question.
The result: on Shopify apparel stores in the €40–€80 AOV band, dynamic progress bars typically lift mobile AOV by 6–14% versus a static "Free shipping over €75" banner. The gap widens as the threshold moves closer to natural cart size — see the AOV lift benchmark by threshold gap for the segmentation.
The mechanism in one line
Effort scales with proximity to reward. A static banner tells the shopper the goal exists; a dynamic bar tells them the goal is almost done — which is the trigger that actually changes behaviour.
The distance band where it works
The bar lifts AOV when the remaining gap is roughly 15–30% of current cart value. A shopper with €48 in their cart seeing "€12 to free shipping" reads it as one more item; the same shopper seeing "€32 to free shipping" reads it as another full order.
Past ~40% of cart value, the effect inverts. Shoppers who see a large gap disengage or feel penalised — the pattern documented in the "€30 away from free shipping" failure mode. If your threshold is fixed and your AOV varies a lot by session, session-personalized thresholds close that gap.
Copy, placement and the details that move the number
Placement above the cart line-items — pinned to the drawer header — outperforms below-the-fold placement on mobile, because the shopper sees the bar before scrolling past the products they've already committed to. See the placement above vs below the fold breakdown for the mobile-specific test results.
On copy: "€12 away from free shipping" is the baseline, but reward-first phrasings ("Add €12 to unlock free shipping") and progress-first phrasings ("You're 84% there") both beat it in specific verticals. The copy patterns that beat the baseline breakdown covers which wins where.
When the bar backfires
Three failure modes. One: the threshold is too high for the vertical — a €75 threshold on a store where median cart is €35 makes every shopper feel behind. Two: the bar appears only after add-to-cart, so first-time shoppers never see the incentive. Three: a tiered bar (shipping then gift) with the second tier set too far out — the shopper hits tier one, feels done, and the second tier reads as greed.
Fix one before fixing two. Start by setting the threshold from your AOV distribution — usually the 60th–70th percentile of mobile carts — then layer tiered rewards only once the base bar is converting. Implementation on Shopify takes about 20 minutes with an app; no theme edit required.
How to test it
The clean A/B is dynamic bar vs static banner, split by device, measured on mobile AOV and mobile checkout-initiation rate. Two weeks is usually enough on stores doing 200+ mobile orders/week; anything less and you'll be chasing noise on a 6–14% effect size.
Segment the readout by starting-cart-value bucket. The lift will concentrate in the "€40–€65 starting cart" bucket on a €75 threshold — that's the goal-gradient sweet spot. Buckets outside that range should show flat or negative lift; if they don't, your baseline banner was already broken.
Don't test the bar in isolation
Progress bars interact with your free-shipping threshold, your AOV distribution, and your product mix. A/B testing the bar without checking the threshold makes sense once — and only once you've confirmed the threshold sits inside the 60th–70th percentile of current mobile carts.
Frequently asked questions
It lifts AOV. Controlled tests on Shopify apparel stores show a 6–14% AOV lift on mobile versus a static banner, with checkout-initiation rate flat or slightly up — meaning larger carts, not fewer orders. The lift concentrates in the segment starting within 15–30% of the threshold.
The closer people get to a reward, the harder they work for it. In a cart drawer, a shopper who's 85% of the way to free shipping is far more likely to add one more item than a shopper who's 40% of the way there — even though the absolute effort is the same.
Roughly the 60th–70th percentile of your current mobile AOV distribution. Set it there and the majority of carts land inside the goal-gradient sweet spot — close enough that one more item unlocks the reward, far enough that most sessions still need to add something.
No — the ratio matters more than the euro amount. €12 works because it's roughly 15–20% of a €60–€75 cart. On a €150-AOV electronics store the equivalent gap is €25–€30. Distance is felt as a percentage of current cart, not as absolute euros.
Start dynamic. Static banners communicate the offer but don't trigger the goal-gradient response — the shopper never feels closer to the goal. The dynamic bar is what makes the mechanism fire, and the implementation cost on Shopify is roughly the same.
Above, pinned to the drawer header. On mobile the shopper sees the drawer header first and only scrolls after evaluating the total — a below-the-fold bar reaches them after the decision has already formed. The placement above vs below the fold comparison shows the specific lift.
Tiered bars work when tier two sits within the same 15–30% band above tier one. Set the gift tier too far above the shipping tier and shoppers hit tier one, feel done, and the second tier reads as pushy. See the tiered cart-drawer bars breakdown for the tier spacing that converts.
Yes. Most cart-drawer apps expose progress-bar settings directly, and Shopify's native cart drawer accepts progress-bar snippets via theme customizer on most 2.0 themes. The no-dev Shopify implementation walkthrough covers the setup end to end.
Use a session-personalized threshold. If paid social sessions have €35 median carts and email sessions have €65, a single €75 threshold demotivates one group and underprices the other. Dynamic thresholds personalized to session AOV solve the split.
Two weeks minimum on stores with 200+ mobile orders/week; longer if traffic is lumpy or you run weekend promotions. You're detecting a 6–14% AOV lift, which needs enough sessions per arm to separate from day-to-day variance — a week rarely does it.
Get an AI expert review of your site
Paste your URL — Metricuno's AI runs the same heuristic checks a senior CRO consultant would, scoring your page and prioritising the fixes that'll move conversion fastest.