Free Shipping Progress Bar UI in Figma

Quick answer

A free shipping progress bar shows how much more the shopper must spend to unlock free delivery—usually as a horizontal meter in the cart drawer, cart page, or sticky checkout summary. Display copy like “Add $12.40 for free shipping” above a fill bar that animates as line items change. Design variants for below threshold, threshold met, already free, and error/retry. Recalculate on every cart mutation; never show stale amounts after coupons or quantity edits. Pair with shopping cart UI and pricing tokens. Start from the Figma guides hub.

Who this is for

Product designers improving average order value without dark patterns.
Design system teams standardizing incentive meters across cart drawer, cart page, and checkout sidebar.
Engineers implementing threshold math, currency formatting, promo exclusions, and analytics events.

Where the progress bar appears

Surface	Component	Purpose
Cart drawer / mini cart	`ShippingProgressBar`	Primary placement; updates on add/remove
Full cart page	Same component, wider	More room for copy + upsell link
Checkout order summary	Compact variant	Confirm benefit before pay
PDP sticky bar	Optional micro-meter	Rare; can feel pushy
Empty cart	Hidden or aspirational	”Free shipping on orders over $50” static line

Verdict: the cart drawer is the highest-impact surface. Checkout should show a confirmed state (“Free shipping applied”) rather than nagging the user to add more.

ShippingProgressBar anatomy

Part	Spec	Notes
Message line	Dynamic currency + remainder	”You’re $8.00 away from free shipping”
Track	Full-width bar, 4–8px height	Rounded ends; use semantic color tokens
Fill	Proportional to subtotal ÷ threshold	Cap at 100%; never overflow visually
Success state	Green fill + check icon	”You’ve unlocked free shipping!”
Upsell link (optional)	“Shop bestsellers”	Opens curated collection, not random PLP
Threshold footnote	”Orders over $75”	Static when bar hidden

ShippingProgressBar
├── Variant: state=below | met | free | loading | error
├── Variant: density=compact | standard
├── Property: threshold=75
├── Property: subtotal=62.60
├── Property: currency=USD
└── Layers:
    ├── MessageText
    ├── ProgressTrack
    │   └── ProgressFill
    ├── SuccessIcon (met only)
    └── UpsellLink (optional)

Use Auto Layout so message and bar stack vertically with 8px gap. Bind fill width as a percentage component property for prototyping.

Threshold math comparison

Rule type	Calculation base	Design note
Subtotal before discounts	Pre-coupon cart subtotal	Show bar drop when large coupon applied
Subtotal after discounts	Post-coupon	More generous; document in spec
Excludes gift cards	Merchandise only	Footnote in Dev Mode
Region-specific threshold	$75 US, $100 CA	Swap copy per locale frame
Member-only free shipping	Logged-in tier	Replace bar with loyalty badge
Always free	No bar	Static banner in header instead

Rule: pick one calculation rule and document it in Dev Mode. Mixed implementations confuse QA when a coupon changes eligibility.

State matrix

State	Trigger	UI
Loading	Cart hydrating	Skeleton bar + placeholder text
Below threshold	`subtotal < threshold`	Partial fill + remainder copy
Threshold met	`subtotal >= threshold`	Full fill + success message
Free shipping already applied	Promo or membership	Check + “Free shipping on this order”
Excluded items in cart	Heavy/bulky SKU	Inline alert explaining exception
Error	API failure	Retry link; hide fake progress

Prototype below → add item → met on a cart drawer frame using interactive components.

Layout comparison

Placement	Best for	Design notes
Top of cart drawer	Immediate visibility	Above line items
Below line items, above subtotal	Context near total	Works on full cart page
Checkout sidebar only	Minimal cart drawer	Weaker AOV lift
Dual: drawer + cart page	Consistency	Same component, different width
With progress stepper	Never combine	Shipping meter ≠ checkout steps

On mobile, keep the bar above the fold inside the drawer—do not bury it below five line items.

Copy and localization

Scenario	Example copy
Below threshold	”Add $12.40 more for free shipping”
One item away	”Add one more item for free shipping” (if math is item-based—rare)
Met	”You’ve unlocked free shipping!”
Member	”Free shipping included with your membership”
Excluded category	”Free shipping does not apply to furniture in your cart”

Bold the dynamic currency amount for scannability. Use typography styles for body + emphasis, not manual bolding per frame.

Interaction with promos and pricing

Module	Relationship
Coupons	Recalculate bar after apply/remove
Gift cards	Usually do not count toward threshold
Pricing / sale badges	Use discounted line price in subtotal
Sticky add-to-cart	Do not duplicate meter on PDP
Checkout	Show final shipping line item $0.00

If a coupon grants free shipping directly, transition bar to success even when subtotal is below merchandise threshold.

Handoff checklist

Item	Dev Mode annotation
Threshold source	CMS / shipping rules API
Calculation	`eligibleSubtotal` definition
Fill percentage	`min(subtotal / threshold, 1)`
Currency format	Locale-aware; no hard-coded `$`
Update triggers	qty change, remove, coupon, login
Animation	200–300ms width transition; respect reduced motion
Analytics	`shipping_bar_impression`, `shipping_bar_threshold_met`, `upsell_click`
a11y	`role="progressbar"`, `aria-valuenow`, `aria-valuemin`, `aria-valuemax`
Edge case	Zero or negative remainder → hide or show met

Use Dev Mode checklist and responsive frames at 375px drawer width.

Common mistakes

Mistake	Why it hurts	Fix
Stale remainder after qty change	Broken trust	Recalculate on every cart event
Bar hits 100% but shipping still costs money	Excluded SKUs	Separate excluded-item messaging
Showing bar when always free	Noise	Static header promo instead
Fake progress on error	Misleading	Skeleton or hide
Combining with checkout stepper	Confusing IA	One progress metaphor per surface
Aggressive PDP meter	Feels manipulative	Keep incentive in cart context
Ignoring tax in spec	QA disputes	Document tax-inclusive vs exclusive

Recommended workflow

Confirm business rules for threshold, eligible subtotal, and regional variants.
Build ShippingProgressBar with below / met / loading variants and fill property.
Place in cart drawer and full cart page at agreed position.
Design success and excluded-item alert states.
Add optional upsell link to a curated collection frame.
Spec calculation, triggers, and a11y in Dev Mode.
Prototype add-to-cart flow crossing threshold on mobile.
Align with checkout summary shipping line at $0.00 when met.

FAQ

Show progress on empty cart?

Use a static threshold message (“Free shipping on orders over $75”) without a fill bar. Hide the meter until subtotal > 0.

Multiple thresholds (express vs standard)?

Design two-tier copy only if product requires it—e.g. “Free standard shipping” at $50, express at $100. Default to one bar for clarity.

B2B net terms carts?

Often skip consumer-style meters. Replace with contract shipping rules or account-manager note.

Does this replace order summary shipping row?

No. The bar is motivation; checkout still shows the shipping line item with final price.

Next steps

Design shopping cart and checkout UI in Figma — drawer layout and summary rows
Design coupons and promo codes UI in Figma — recalculation rules
Design price tags and pricing UI in Figma — subtotal and sale pricing
Design progress indicators and steppers in Figma — do not mix with checkout steps
Design inline alerts and banners in Figma — excluded SKU messaging

Designing free shipping progress bar UI in Figma: thresholds, cart drawer, and handoff