Motivate larger orders by showing a progress bar toward free shipping and nudging customers to add more items to qualify
A free shipping threshold motivates customers to add more to their cart to avoid paying for shipping — one of the highest-converting tactics for increasing average order value. The key is showing a dynamic progress bar ("Add $12 more for free shipping") that updates as items are added. Most platforms support this natively or via an app without writing any code.
| Platform | Recommended Tool | Why |
|---|
| Shopify | Built-in shipping settings + Hextom Free Shipping Bar app | Shopify handles the rule; Hextom or similar apps add the visible progress bar |
| WooCommerce | WooCommerce Shipping (built-in free shipping method) + WooCommerce Free Shipping Bar plugin | WooCommerce has native free shipping rules; plugins handle the bar UI |
| BigCommerce | Built-in free shipping promotion + free shipping bar app | BigCommerce has native promotional rules for free shipping thresholds |
| Custom / Headless | Build a rule resolver + progress bar component | Full control over threshold logic, per-segment rules, and UI |
Create the free shipping rate (required first):
Add the progress bar (Hextom Free Shipping Bar app — free tier available):
{{amount}} is replaced dynamicallyAlternative — Shopify Plus: use Scripts for per-segment thresholds:
Create the free shipping method:
Add the progress bar:
For customer-tier-based thresholds:
Create the free shipping promotion:
Add the progress bar:
For geographic variation (domestic vs. international):
Regardless of platform, these messaging best practices apply:
// Server-side: resolve free shipping status for a cart
function resolveShippingThreshold(params: {
cartSubtotalCents: number;
shippingCountry: string;
customerTags: string[];
thresholdRules: ShippingThresholdRule[];
}): { isFree: boolean; thresholdCents: number; amountNeededCents: number; progressPct: number } {
// Find the highest-priority matching rule
const rule = params.thresholdRules
.filter(r => r.isActive)
.filter(r => !r.countries?.length || r.countries.includes(params.shippingCountry))
.filter(r => !r.customerTags?.length || r.customerTags.some(t => params.customerTags.includes(t)))
.sort((a, b) => b.priority - a.priority)[0];
if (!rule) return { isFree: false, thresholdCents: 0, amountNeededCents: 0, progressPct: 0 };
const isFree = params.cartSubtotalCents >= rule.thresholdCents;
const amountNeededCents = Math.max(0, rule.thresholdCents - params.cartSubtotalCents);
const progressPct = Math.min(100, Math.round((params.cartSubtotalCents / rule.thresholdCents) * 100));
return { isFree, thresholdCents: rule.thresholdCents, amountNeededCents, progressPct };
}
// React component for the progress bar
function FreeShippingBar({ amountNeededCents, progressPct, isFree }: {
amountNeededCents: number; progressPct: number; isFree: boolean;
}) {
const formatted = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
.format(amountNeededCents / 100);
return (
<div className="free-shipping-bar">
{isFree ? (
<p>You've unlocked FREE shipping!</p>
) : (
<p>Add <strong>{formatted}</strong> more for FREE shipping</p>
)}
<div className="progress-track">
<div className="progress-fill" style={{ width: `${progressPct}%` }} />
</div>
</div>
);
}
The threshold should be above your average order value (AOV) but achievable:
| Problem | Solution |
|---|---|
| Progress bar shows "free shipping" but checkout still charges | Double-check that the free shipping rate is active in your platform's shipping settings AND that no other rule is overriding it |
| Free shipping fires when a coupon reduces the cart below threshold | In WooCommerce, set the free shipping method to require "minimum order amount" after discounts; in Shopify, ensure the shipping rate uses post-discount subtotal |
| International customers see the free shipping bar | Scope your shipping rate to domestic zones only; configure the app to only show the bar for domestic visitors |
| Progress bar shows 100% but order is below threshold | Ensure progress calculation uses the same subtotal as the shipping rate rule (post-discount, excluding non-qualifying items) |