Free-shipping threshold bar
The cart progress meter that says how much more to add before delivery becomes free.
See it
What it is
A free-shipping threshold bar shows how close the cart's eligible subtotal is to the amount that unlocks free delivery. Below the target it says something like 'Add $12 more'; at or above it, the message flips to 'Free shipping unlocked'. The progress makes an abstract cart rule feel like a reachable goal.
Reach for it when free shipping already has a clear minimum and adding one more useful item can bridge the gap. Put it in the cart drawer and full cart near the subtotal, then update it immediately as quantities, discounts, or eligible items change.
Gotcha: the bar must use the same eligibility rules as checkout. Gift cards, discounts, currencies, destinations, or oversized products may change which subtotal counts. A bar that celebrates and then charges shipping one screen later is worse than having no bar at all.
Ask AI for it
Add a free-shipping threshold bar to the cart drawer and full cart. Read the threshold and eligible subtotal from the same server-side shipping rule used by checkout, after discounts and excluding gift cards or ineligible items. Compute progress as a value clamped from 0 to 100, format the remaining amount with `Intl.NumberFormat`, and render a semantic `role='progressbar'` with aria-valuemin, aria-valuemax, and aria-valuenow. Below the target say 'Add <amount> more for free shipping'; at the target say 'Free shipping unlocked'. Draw the fill with `transform: scaleX()` and a 200ms CSS `transform` transition, disable that transition under `prefers-reduced-motion`, and replace the bar with an honest destination message when the current address cannot qualify.