Add a Free Shipping Progress Bar to Your Shopify Cart

November 11, 2026

Set the free shipping threshold at your median order value plus the price of one typical add-on, rounded to a clean number, then show the gap in the cart with a progress bar. Use an app like BlueCart at $4 a month for a no-code setup, or add the bar with a theme app block that reads your existing Shopify free shipping discount.

The threshold math comes first

A free shipping bar with the wrong threshold does nothing, or worse, it trains customers to ignore it. The rule from Zipify's AOV guide is simple: set the threshold at your median order value plus the price of one typical add-on, rounded to a clean number. Use the median, not the average, because a few large orders pull the average up and set a threshold most customers will never reach. Littledata's Shopify benchmarks from October 2026, across 438 stores, put the median Shopify store's AOV at $111, which is a useful sanity check, but your own median is the number that matters.

Once the threshold is set, the bar has one job: show the gap. A message like you are $13 away from free shipping beats a bare progress bar every time, because it names the amount and the reward in one line. The bar should sit in the cart drawer, where the shopper sees the total, and it should update in real time as items are added or removed. A bar that only updates on page reload is a bar that lies to the customer for a whole session.

In Shopify, set the threshold itself as a free shipping discount with a minimum purchase, in Settings, then Shipping and delivery, or through a discount code. The bar is only the display. If the discount and the bar disagree, the customer finds out at checkout, and that is the moment trust breaks. Test the full flow, from an empty cart to a completed checkout, before you call it done.

Way one: an app, in about ten minutes

This is the fastest route and the right one if you do not want to touch theme code. Most shipping bar apps install as a theme app embed, so you can preview the bar without publishing anything. BlueCart is a common pick at $4 a month with a free trial, and it adds a free shipping bar, discount milestones, and tiered rewards to the cart drawer, with one-click upsell recommendations alongside the bar. Loto Cart is another, a slide-out cart drawer with free shipping bars, discount goals, free gifts, upsells, and bundles, and it runs as an app embed so your theme files stay untouched.

Install the app, open its settings from Apps in your Shopify admin, and set the goal to match the free shipping discount you already created in Shopify. Several of these apps can import the goal from your existing Shopify offers, so the bar and the discount agree by construction. Match the colors and fonts to your theme, turn on the floating cart button if you want buyers to track progress from any page, and preview on both mobile and desktop before you publish.

Two rules for the bar itself. Do not show it on every page by default: it belongs in the cart, where the total is visible, and a bar that follows the shopper around the whole store reads as a popup. And do not stack three bars at once. One threshold, one bar, one message. A cart that shows a shipping bar, a discount bar, and a free gift bar at the same time is a cart that asks the customer to do arithmetic, and customers do not.

Way two: theme code, for a store that wants no app

This keeps the store lean and gives you full control, at the cost of editing the theme. Always duplicate your theme first, in Online Store, then Themes, then Actions, then Duplicate, and work on the copy. If your theme is Online Store 2.0, look for an app block or a custom section in the cart drawer first: many themes let you add a progress bar section to the cart template without touching Liquid, and a dedicated cart drawer app can add the bar the same way.

The approach is simple: the bar reads the cart total, compares it to the threshold you set in the section settings, and shows the remaining amount. Keep the threshold in one place, the section settings, and make it match the free shipping discount in your Shopify admin exactly. A bar that says $13 away when the discount needs $15 is worse than no bar, because the customer discovers the lie at checkout.

One detail most guides skip: the bar must update when the cart changes without a page reload. If your cart drawer uses AJAX, the bar needs to listen for the same cart update event the drawer uses, or it will show a stale total after the customer adds an item. Test it by adding an item, removing it, and changing a quantity, and watch the bar each time. The cart drawer versus cart page guide covers the drawer choice itself: the bar is only as good as the cart it lives in.

Frequently asked questions

How do I set the free shipping threshold for a progress bar?

Set it at your median order value plus the price of one typical add-on, rounded to a clean number. Use the median, not the average, because a few large orders pull the average up and set a threshold most customers will never reach.

Do I need an app for a free shipping progress bar?

No. Apps like BlueCart at $4 a month are the fastest route and need no code, but you can also add one with a theme app block or a small section in the cart drawer. Check your theme first: some themes ship a progress bar section already.

Where should the free shipping bar go?

In the cart drawer, where the shopper sees the total, with a message naming the gap, like you are $13 away from free shipping. It should update in real time as items are added or removed, not only on page reload.

What if the bar and the discount disagree?

Fix it before you publish. Set the threshold as a free shipping discount with a minimum purchase in Shopify, then set the bar to the exact same number. If the bar promises free shipping the discount does not deliver, the customer finds out at checkout and trust breaks.