Key takeaways
- A free shipping progress bar is not a native Shopify feature. Some themes include one; otherwise you need an app or custom code.
- 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.
To add a free shipping progress bar in Shopify, install a free app such as Free Shipping Bar by Hextom, use a cart drawer app that includes one, or build it into your theme with a small Liquid and JavaScript section. The bar turns your free shipping threshold into a visible goal: “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, the AI operator for Shopify stores, with a 4.9 rating on the Shopify App Store. Cart messages like this are one of the small features it builds into a theme instead of an app.
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, it costs the store little and gives shoppers a concrete reason to add one more item.
To measure the bar’s effect, see Track Conversions in Shopify.
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.
For a code version that updates as the cart changes, see Add a Dynamic Free Shipping Bar in Shopify.
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.
For other cart offers, see Add Upsells in the Shopify Cart.
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, the AI operator for Shopify stores, 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. After it goes live, Fudge compares order value in the weeks before and after, so you can see whether the bar moved it. The same before-and-after view covers bundles, upsells and free gifts in its merchandising work.
For where theme scripts live, see Add Custom JavaScript in Shopify.
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.
FAQ
Should I use a free shipping bar app or build my own?
If you want it live in 5 minutes and don't care about exact styling, use Hextom's free app. If page speed matters or you want the bar to match your theme exactly, build it as native code — describe what you want to Fudge ("a sticky free shipping progress bar in the cart drawer with a $75 threshold") and it generates the section native to your theme. No app overhead, no external scripts.
Can the free shipping threshold differ by country or region?
Yes. Most apps support per-market thresholds, and a custom implementation can read the visitor's country (via Shopify.country or geo-IP) and switch the threshold accordingly. Make sure the bar's threshold matches your actual shipping settings (Settings → Shipping and delivery), or you'll show a promise you don't honour at checkout.
Will a free shipping bar work on my cart drawer?
It depends on the theme and the implementation. Apps that inject themselves into the cart drawer work for most modern Online Store 2.0 themes. Custom implementations need to listen for the cart-update event your theme dispatches when items are added (Dawn publishes its own PUB_SUB_EVENTS.cartUpdate event; other themes dispatch DOM events such as cart:updated). If the bar doesn't update when items are added, the wrong event is being listened for.
Does a free shipping progress bar work on mobile?
Yes, and mobile is where it has the biggest impact - cart abandonment is highest on mobile, and a clear "Add $X for free shipping" message keeps shoppers focused. Make sure the bar is responsive: progress bar at full width, message wrapping cleanly, and tappable rather than relying on hover states.
How does the bar update when discount codes are applied?
Most apps and well-built custom bars compare the cart's total_price (post-discount) against the threshold. So if a code drops the total below the threshold, the bar reverts to "Add $X more". This is the right behaviour - you don't want to grant free shipping on an order that no longer qualifies. Test this with your actual shipping rules, since some merchants set free shipping on the pre-discount subtotal.
