Free Shipping Bar

A progress bar that shows how close the cart is to free shipping. Reads the real cart total, updates live.

Copied 0 times.

You're $19 away from free shipping

Members only

This design needs a membership.
Today's price: $1/month, locked forever once you join.

Get it for $1/month Log in

Build a free shipping progress bar for my e-commerce site. Match my existing design system, colors, and fonts.

STRUCTURE
- A slim full-width bar, about 44-52px tall: one line of text stating progress toward the threshold, and directly under it a thin progress track (4-6px) with a filled portion.
- Stick it to the top of the viewport, below my sticky header if I have one, with the page padded so nothing hides behind it.

DATA
- The free shipping threshold lives in one config constant. The cart total comes from my store's cart state or API: leave a clearly marked TODO where that read goes, with the expected shape typed (subtotal as a number, currency).
- The bar recomputes whenever the cart changes (hook into my store's cart update event; TODO marked). Never animate a fake number.

STATES
- Empty cart: "Free shipping on orders over [threshold]" with an empty track.
- Partial: "You're [amount] away from free shipping" with the track filled to the exact percentage.
- Reached: "You've unlocked free shipping!" with a full track and a brief one-time celebratory pulse (respect prefers-reduced-motion).
- For the initial static build, render the partial (about 60% of the threshold) state with placeholder numbers clearly marked as placeholders.

BEHAVIOR
- Fill changes animate smoothly (300ms ease-out), text swaps without layout shift (fixed bar height).
- If the cart total cannot be read, the bar does not render at all: never show wrong math.

QUALITY
- The track uses role="progressbar" with aria-valuemin, aria-valuemax, and aria-valuenow; the text line doubles as the accessible label.
- Currency formatting matches my store's locale (Intl.NumberFormat).
- WCAG AA contrast between fill, track, and background.

QUESTIONS
- Before you build, find or ask for: my real free shipping threshold and which store platform holds my cart. Check my project and site first; whatever you cannot find there, ask me for. Never invent these or ship placeholders.
- If anything else about my brand or content is unclear, ask me before inventing.

Members only

What it does

The free shipping bar gives shoppers a little goal to chase: you're 19 dollars away, keep going. It reads the real cart total, states exactly how much is left to your threshold, and fills a slim progress track as the cart grows. Stores love it because chasing the goal makes carts bigger.

Every number is live math; the moment the cart changes, the bar recomputes.
The track fills to the exact percentage, never rounded up for effect.
Can't read the total? The bar doesn't show, because a wrong number is worse than none.
Crossing the line flips the message to you've unlocked free shipping, with a quick one-time celebration.
Less-motion visitors skip the celebration; no fake filling, no pretend progress.

How it works

1Pick which state the preview shows, empty cart, partway there, or unlocked, to see all three messages.
2Choose where the bar lives, stuck to the top of the screen or resting above your footer.
3Copy the prompt, a block of plain build instructions for your AI, into whichever AI you use.
4Set your free shipping threshold in the one marked spot, using whatever amount your store really honors.
5Connect the other marked spot to your store's cart, so the bar always works from the shopper's true total.
6Add something to a test cart and watch the fill move smoothly, then clear it to see the empty state.

What you can customize

Preview state: empty shows the invitation, partway shows the amount left with a partly filled track, unlocked shows the full celebration.
Where it sits: top keeps the goal in sight while people shop; above the footer keeps it out of the way until they scroll.
Currency format, wording, and colors all adapt to your store automatically, because your AI builds the bar right inside your own design.

You'll also like

Exclusive offer

Claim itLearn more

Offer CTA Section

The closing pitch: a dark offer card with a badge, a big title, and the button you want pressed.

On this page

Getting started

How it works

Pricing

FAQ

Sticky Table of Contents

A table of contents that follows the reader and highlights the section they are in.

iHow this works

Note Box

A calm callout block for the things readers need to know: how it works, why to trust you, what to watch for.