"Free shipping over $75" in the header is a fact. "$12 more for free shipping" next to the order summary is an invitation. Same offer, different moment. The progress bar is how you make the second one, and putting it in checkout catches the buyer at the exact point where adding one more item is a single tap.
Why checkout, not just the cart
Most stores show a threshold bar in the cart drawer. That is fine, but many buyers skip the cart entirely and land in checkout from a buy-now button or a campaign link. Checkout is also where the shipping cost first appears as a number, which is when the threshold suddenly matters. A bar there, with the upsell widget under it, closes the loop: see the gap, see a product that fills it, add it, done.
Setting up the cart value progress widget
- In Smart Checkout Widgets, create a Cart value progress widget.
- Set the threshold. Use the same number as your free-shipping rate so the two never disagree.
- Write the two messages: one before the threshold ("Add $12 more for free shipping") and one after ("You've unlocked free shipping").
- Place the app block in Settings → Checkout → Customize, ideally above the order summary where the shipping line will appear.
- Enable the widget. Changes publish as soon as you save.
The bar reads the live cart, so it updates when the buyer changes a quantity with the line item options widget or adds an upsell, without a page reload.
Picking the threshold
Look at your order value distribution, not your average. Find the point just above the largest cluster of orders. If most carts land between $55 and $70, a $75 threshold pulls a large share of them up by one item. A $120 threshold on those carts is out of reach and the bar reads as a taunt. Recheck this quarterly; prices and mix drift.
Two thresholds beat one
The bar can mark more than one goal: free shipping at $75, a free gift at $120. The buyer who clears the first sees a second reason to keep going. Pair the second goal with an automatic gift rule at the same amount so the gift appears the moment the bar fills. If you offer several gifts, customer choice lets them pick, and the selection message is editable to match the bar's copy.
What to put next to it
- Upsell widget with products priced close to the typical gap. If the gap is usually $10 to $15, a $12 add-on converts; a $40 one does not.
- Custom banner for the cut-off time if the reward is fast shipping rather than free shipping.
- Shipping rule that re-orders the free rate to the top once the threshold is met, so the reward is visible in the delivery list too.
Copy that works
Say the number, not the percentage. "$12 more" is concrete; "84% there" is a maths problem. Keep the unlocked message short and specific, and never show a zero-gap bar with the pre-threshold message still on it. Test on a phone, because the bar shares the screen with the order summary and both need to be legible at once.
Measure it
Track average order value and the share of orders at or above the threshold before and after. A good bar moves the second number first. If AOV rises but total conversion falls, the threshold is too high for your traffic and the bar is pushing people away rather than up.
Frequently asked questions
Can I show a free shipping progress bar inside Shopify checkout?
Yes. The cart value progress widget renders in checkout via Shopify checkout extensibility and updates live as the cart changes. In-checkout widgets require Shopify Plus.
What threshold should I use for free shipping?
Set it just above the largest cluster of your order values, so most buyers can reach it with one extra item, and align it with the free-shipping rate in your shipping settings.
Can the progress bar unlock a free gift as well as free shipping?
Yes. Mark a second goal on the bar and pair it with an automatic gift rule at the same cart value so the gift appears when the bar fills.