Average order value tactics don't get simpler than this: a strip that says "You're $18 away from free shipping" with a progress bar. It reframes adding one more item from "spending more" to "unlocking something" — and unlike most growth widgets, it's giving the customer real information they'd want anyway.
Velocity X's free-shipping-progress-bar is the whole pattern in one component: threshold in, cart total in, remainder and bar out.
The Money Pattern
const remaining = Math.max(0, threshold - subtotal);
const pct = Math.min(100, (subtotal / threshold) * 100);
{remaining > 0 ? (
<p>Add <strong>{formatCurrency(remaining)}</strong> for free shipping</p>
) : (
<p>🎉 You've unlocked free shipping</p>
)}
<div role="progressbar" aria-valuenow={Math.round(pct)}
aria-valuemin={0} aria-valuemax={100}
class="h-1.5 rounded-full bg-ink/10">
<div class="h-full rounded-full bg-green-500 transition-[width] duration-500"
style={`width: ${pct}%`} />
</div>Two details carry the conversion: the transition on width (the bar visibly moves when an item is added — that's the dopamine), and the celebration state. Crossing the threshold must be acknowledged, not just silently un-rendered; the unlock is the reward the bar promised.
The Catch
The math has to be the checkout's math. If the bar computes on subtotal-before-discounts and checkout applies the threshold after discounts, the customer who "unlocked" free shipping sees a shipping charge at the worst possible moment — and that single inconsistency is a refund request and a lost repeat buyer. One source of truth for the eligible total, shared with the checkout.
Second rule: don't show it to customers who already qualify on arrival — opening a strip that says "you've unlocked free shipping!" before anything is in the cart is noise wearing confetti. Render only when the cart is non-empty and below threshold, then keep the celebration state visible once crossed.
The Verdict
One honest strip, a live remainder, a moving bar, a celebrated unlock, and checkout-identical math. The component is in Velocity X's E-Commerce category beside the cart surfaces it docks to — source you own, measured in AOV, not vibes.