Key takeaways
- A free shipping progress bar is not a native Shopify feature - you need an app or Fudge.
- The Free Shipping Bar by Hextom is a widely used free app.
- Progress bars work by showing how much more a customer needs to spend to qualify for free shipping.
- An effective bar uses specific messaging and updates dynamically as items are added to the cart.
Free shipping thresholds increase average order value. A progress bar makes the threshold visible - turning an abstract policy into a real-time incentive. “You’re $12 away from free shipping” prompts buyers to look for one more item to add.
Why you can trust us
We’ve worked on cart conversion strategy for hundreds of Shopify stores. We also built Fudge — an AI storefront editor with a 5.0 rating on the Shopify App Store.
What is a free shipping progress bar?
A dynamic element - usually shown in the cart drawer or cart page - that displays:
- The free shipping threshold (e.g., “Free shipping on orders over $50”)
- The buyer’s current cart total
- A progress bar showing how close they are to the threshold
- A message that updates as they add items (“Add $12 more for free shipping” - “You’ve unlocked free shipping!”)
When implemented well, this is one of the highest-ROI additions to a cart. It costs nothing to the buyer (they just need to spend more) and can meaningfully increase average order value.
Option 1 - Free Shipping Bar by Hextom (most popular app)
This is the most widely installed free shipping bar app in the Shopify App Store.
Step 1. Go to the Shopify App Store and search for “Free Shipping Bar by Hextom”.
Step 2. Install the app.
Step 3. In the app settings, set your free shipping threshold (must match your actual free shipping rate in Settings > Shipping).
Step 4. Customise the message text - the app supports dynamic variables like {amount_remaining} to show the exact gap.
Step 5. Choose where to display: site-wide announcement bar, cart page, cart drawer, or all locations.
Step 6. Save and preview.
The app is free for a basic bar with one display location. Paid tiers add targeting, A/B testing, and multi-location display.
Option 2 - Cart drawer upsell apps with progress bar
Several cart optimisation apps include a free shipping progress bar as part of a broader cart enhancement suite:
Monster Upsells - includes a progress bar plus upsell section in the cart drawer.
iCart Cart Drawer Cart Upsell - progress bar, cart upsells, gift options in one cart module.
If you’re already adding cart upsells or cross-sells, it’s worth getting an app that handles both.
Option 3 - Build a custom progress bar with Fudge
For a progress bar that’s native to your theme - matching your exact brand styles, positioned precisely where you want it, without an app subscription - Fudge can build it.
A custom progress bar is a small piece of JavaScript and Liquid that:
- Reads the current cart total
- Compares it to the free shipping threshold
- Updates a progress bar element and message text dynamically
Example prompt to Fudge:
“Add a free shipping progress bar to the cart drawer. The threshold is $75. Show a progress bar that fills as the cart total increases. Message: ‘Add [amount] more for free shipping’ when below threshold, ‘You’ve unlocked free shipping!’ when above. Style it with the brand’s green accent colour.”
Fudge generates this as a draft. Review and publish.
What makes a free shipping progress bar effective
Set the threshold strategically. The threshold should be set above your average order value (AOV). If your AOV is $45, set free shipping at $60. Too close to AOV and it doesn’t move behaviour. Too far and it feels unachievable.
Use specific, real-time messaging. “Add $12.50 more for free shipping” is far more compelling than “Free shipping on orders over $50”. The specific gap makes the action feel concrete.
Celebrate unlocking. When the threshold is crossed, show a congratulatory message (“You’ve unlocked free shipping!”) and a small visual change (bar fills, green colour). Positive reinforcement keeps buyers happy about their decision.
Show it early. Display the bar even when the cart is empty (“Spend $75 for free shipping”). It sets expectations before the buyer starts adding.
Test placement. For many stores, showing the bar at the top of the cart drawer (before the cart items) outperforms placing it at the bottom.
How to add a free shipping bar to the full site
Many stores also show a free shipping bar as an announcement banner at the top of every page (not just the cart). This is separate from the cart progress bar - it’s a static or semi-dynamic banner informing all visitors of the free shipping policy.
This is handled by the announcement bar in the Theme Editor (if your theme has one) or by an app. The cart progress bar is a separate, cart-specific element.
