Free shipping is the single most effective incentive in ecommerce. Research consistently shows it outperforms percentage discounts and fixed-amount offers in driving conversions. A free shipping bar takes this incentive and makes it active rather than passive — showing customers exactly how much more they need to spend to qualify for free delivery.
The result is a measurable increase in average order value. Instead of checking out at £38, the customer sees "You are £12 away from free shipping" and adds another item to their cart. It is one of the simplest and highest-ROI features you can add to your Shopify store, and this guide shows you exactly how to implement it.
For more strategies on increasing basket size, see our guide on increasing average order value on Shopify.
Why free shipping bars increase AOV
The psychology behind free shipping bars is well-understood. They leverage several behavioural principles simultaneously to encourage larger orders.
Loss aversion
Customers perceive shipping costs as a loss — money spent on nothing tangible. The free shipping bar frames the situation as "you are this close to avoiding a loss", which is a stronger motivator than "you could save this much". This loss aversion effect is one of the most powerful forces in consumer psychology.
Goal gradient effect
People accelerate their behaviour as they approach a goal. A progress bar that shows 70% completion toward free shipping creates a psychological pull to reach 100%. The closer they are, the more motivated they become. This is why showing a visual progress bar (not just text) is so effective.
Anchoring
The free shipping threshold anchors the customer's perception of a "normal" order value. If your threshold is £50, customers start thinking of £50 as the standard order size rather than whatever they originally intended to spend. This subtle reframing shifts spending behaviour upward.
Quantified results
Stores that implement free shipping bars typically see a 15-30% increase in average order value. The exact impact depends on your threshold setting, customer demographics, product pricing, and how well the bar is designed and positioned.
How a free shipping bar works
A free shipping bar is a persistent UI element — typically a banner at the top of the page or within the cart — that shows the customer how far they are from qualifying for free shipping. It has three states.
Below threshold
Shows a message like "You are £15 away from free shipping!" with a progress bar indicating how close they are. The progress bar fills proportionally based on the current cart value relative to the threshold.
At or above threshold
Shows a success message like "You have qualified for free shipping!" typically with a visual change such as a green colour and a checkmark icon. This reinforcement feels rewarding and discourages removing items from the cart.
Empty cart
Shows either the full threshold amount needed ("Spend £50 for free shipping") or hides the bar entirely when the cart is empty.
Setting the right threshold
The threshold is the most important decision in your free shipping bar strategy. Set it too low and you give away free shipping without meaningfully increasing AOV. Set it too high and customers feel the goal is unachievable and ignore it entirely.
The formula
Take your current average order value and add 20-30%. If your AOV is £40, set your threshold between £48 and £52. This is achievable for most customers with the addition of one small item, making it feel attainable rather than aspirational.
Testing your threshold
A/B test different thresholds to find the optimal balance. Track not just AOV change but also conversion rate — if a high threshold increases AOV but decreases conversion, the net effect on revenue might be negative. Use our A/B testing guide for methodology.
Method 1: Using a free shipping bar app
The fastest implementation is a dedicated app. Several well-maintained options are available in the Shopify App Store.
Popular options
- Free Shipping Bar by Hextom. The most popular option with over 10,000 reviews. Offers progressive messaging, geotargeting, scheduling, and multi-currency support. Has a generous free tier.
- Essential Free Shipping Upsell. Combines the shipping bar with upsell recommendations. Shows product suggestions for items that would push the customer over the threshold.
Setup steps
- Install the app from the Shopify App Store
- Set your free shipping threshold amount
- Customise the bar's appearance: colours, font, position, and animation
- Configure messages for each state (below threshold, achieved, empty cart)
- Set currency handling if you sell internationally
- Preview and test on both desktop and mobile
- Check page speed impact after installation
Method 2: Custom Liquid implementation
For stores that want to avoid app dependencies and have full control over the design and behaviour, a custom Liquid implementation is straightforward. Here is a production-ready approach.
The Liquid snippet
{%- assign threshold = 5000 -%} {%- comment -%}£50 in pence{%- endcomment -%}
{%- assign cart_total = cart.total_price -%}
{%- assign remaining = threshold | minus: cart_total -%}
<div class="free-shipping-bar" data-threshold="{{ threshold }}">
{%- if cart_total >= threshold -%}
<div class="shipping-bar-success">
✓ You have qualified for free shipping!
</div>
{%- elsif cart.item_count > 0 -%}
<div class="shipping-bar-progress">
<p>You are {{ remaining | money }} away from free shipping</p>
<div class="shipping-bar-track">
<div class="shipping-bar-fill"
style="width: {{ cart_total | times: 100 | divided_by: threshold }}%">
</div>
</div>
</div>
{%- else -%}
<div class="shipping-bar-empty">
Free shipping on orders over {{ threshold | money }}
</div>
{%- endif -%}
</div>CSS for the progress bar
.free-shipping-bar {
background: #f8f8f8;
padding: 10px 20px;
text-align: center;
font-size: 0.9rem;
font-weight: 500;
}
.shipping-bar-track {
background: #e5e5e5;
height: 6px;
border-radius: 3px;
margin-top: 8px;
overflow: hidden;
}
.shipping-bar-fill {
background: #2D5A27;
height: 100%;
border-radius: 3px;
transition: width 0.3s ease;
}
.shipping-bar-success {
color: #2D5A27;
font-weight: 600;
}Integrating with the cart drawer
The free shipping bar is most effective when it appears in the cart drawer or cart page, where the customer is already thinking about their order total. Many themes include a cart drawer (slide-out cart) that can be customised to include a shipping progress bar at the top.
Place the shipping bar snippet at the top of your cart drawer template (typically cart-drawer.liquid or a similar file). This ensures customers see their progress toward free shipping every time they add an item or open their cart.
Dynamic updates without page reload
When a customer adds an item to their cart using AJAX (which most modern themes do), the shipping bar needs to update without requiring a full page reload. Add JavaScript that listens for cart update events and refreshes the bar content.
// Listen for cart changes and update the shipping bar
document.addEventListener('cart:updated', function(event) {
var cartTotal = event.detail.total_price; // in pence/cents
var threshold = 5000; // £50.00
var remaining = threshold - cartTotal;
var bar = document.querySelector('.free-shipping-bar');
if (cartTotal >= threshold) {
bar.innerHTML = '<div class="shipping-bar-success">✓ Free shipping unlocked!</div>';
} else if (cartTotal > 0) {
var pct = Math.min((cartTotal / threshold) * 100, 100);
var moneyRemaining = (remaining / 100).toFixed(2);
bar.innerHTML = '<p>£' + moneyRemaining + ' away from free shipping</p>' +
'<div class="shipping-bar-track"><div class="shipping-bar-fill" style="width:' + pct + '%"></div></div>';
}
});
Multi-currency considerations
If you sell internationally with Shopify Markets, your free shipping bar needs to display the threshold in the customer's local currency. Shopify's built-in currency conversion handles this if you use the | money Liquid filter, which outputs prices in the customer's selected currency.
For custom JavaScript implementations, use the Shopify Currency API to get the current currency and conversion rate. Most free shipping bar apps handle multi-currency automatically as part of their Shopify Markets integration.
Designing an effective shipping bar
Colour and contrast
Use your brand's accent colour for the progress bar fill and a neutral colour for the track. The success state should be visually distinct — a green tone works universally. Ensure sufficient contrast against the background for readability.
Typography
Keep text concise and action-oriented. "£12 away from free shipping" is better than "You need to spend £12 more to qualify for our free standard shipping offer". Every word should earn its place.
Animation
Smooth CSS transitions on the progress bar fill (using transition: width 0.3s ease) provide satisfying visual feedback when the bar updates. Avoid flashy animations or bouncing effects that feel cheap and distract from browsing.
Mobile design
On mobile, the bar should be compact — one line of text plus the progress indicator. Avoid multi-line messages that take up too much vertical space. Consider making the bar sticky so it remains visible as the customer scrolls.
Optimal placement options
- Top of page (announcement bar area). Maximum visibility but takes up space above the navigation. Works well for site-wide awareness.
- Inside the cart drawer. Most contextually relevant placement. The customer is already reviewing their cart and thinking about spending. This is the highest-converting placement.
- On the cart page. Similar to cart drawer but for stores using a dedicated cart page instead of a drawer.
- Below product add-to-cart buttons. Reminds customers of the incentive right at the moment they are adding items. Shows how the item they are about to add moves them toward the goal.
Measuring the impact on AOV
Track these metrics before and after implementing your free shipping bar to quantify its impact.
- Average order value. The primary metric. Compare AOV from the period before implementation to after. Account for seasonal variations by comparing the same time period year-over-year if possible.
- Conversion rate. Ensure the shipping bar is not reducing conversions. If you set the threshold too high, customers who cannot reach it might be discouraged rather than motivated.
- Revenue per visitor. The ultimate metric — AOV multiplied by conversion rate. This tells you the true revenue impact of the feature.
- Shipping cost as percentage of revenue. Track whether the increase in free shipping orders is offset by the increase in order values. The goal is net positive.
- Cart addition rate. Are more customers adding additional items to their cart after seeing the bar? Track add-to-cart events and compare to baseline.
For detailed analytics setup, see our Shopify analytics guide.
Advanced strategies and A/B testing
Threshold A/B testing
Test different thresholds to find the optimal balance between AOV increase and conversion rate. Even a £5 difference in threshold can meaningfully impact both metrics.
Personalised thresholds
Advanced implementations can show different thresholds to different customer segments. First-time visitors might see a lower threshold (easier to qualify) while returning high-value customers see a higher one.
Product recommendations
When a customer is close to the threshold, suggest specific low-cost add-on products that would push them over. "Add [Product] for £8 and get free shipping" is more actionable than "You are £8 away". This combines the shipping bar with upselling for maximum impact.
A free shipping bar is one of the simplest features to implement and one of the most reliably profitable. The key is setting the right threshold — high enough to meaningfully increase AOV, low enough that most customers can reach it with one additional item. Get that balance right and the feature pays for itself many times over.
Andrew Simpson, Founder
Setting up a free shipping bar on Shopify is straightforward whether you use an app or build it custom. The real value comes from setting the right threshold, placing the bar where it has the most impact, and measuring the results to optimise over time.
If you need help implementing a custom free shipping bar or optimising your store's conversion strategy, our Shopify development team can help. Get in touch to discuss your project.
