Loading...
Cart pattern · Lumière
Free Shipping Progress
A progress bar that turns shipping thresholds into motivation — with smart 'just add $X' suggestions tuned to real margin.
Cart UX · Free shipping bar
The free-shipping bar is not a decoration. It's the highest-converting upsell on your site.
Static bars read as noise. A smart bar animates the progress, switches to celebration at the threshold, and quietly suggests the cheapest product to hit the goal. Add $15 and ship free — most customers do it.
Live demo · drive the bar both directions with the qty controls
Add $15.00 for free shipping$60.00 of $75
↑ watch the copy switch the moment you cross $75
Gentle Gel Cleanser
$32.00 each
1$32.00
Peptide Lip Treatment
$28.00 each
1$28.00
Add one of these to ship free — 3 options
Subtotal$60.00
What makes this bar convert
- The colour shift. The bar goes amber while you're below the threshold and emerald at 100%. Customers feel the change.
- The gap dollar amount. “Add $15” is concrete. Percentages are not.
- The one-click suggestion row. Below-threshold carts get 2-3 products priced to clear the gap. Above threshold, the suggestions hide — no pestering the converted customer.
- Celebration at threshold. Confetti micro-burst, emerald flash, and copy that confirms. Same experience used by Allbirds, Glossier, Arc'teryx.
Try it above — adding the cheapest suggestion ($38) clears the bar immediately, and dropping a quantity walks it back below the threshold so the suggestions return.