How to Add a Free Shipping Bar to Shopify (Without an App)

A threshold only works if shoppers can see it

Plenty of stores offer free delivery above an order value and then mention it once, in the footer or on the shipping policy page. The shopper who is a few items short never finds out. A free shipping bar fixes that by putting the gap in front of them, inside the cart, at the moment they are deciding whether to add one more thing.

This guide covers what the bar should say, where it belongs, and the handful of details that decide whether it helps or confuses. To build one for your theme, use the Shopify free shipping bar generator; it writes the Liquid snippet and tells you exactly where to paste it.

Start with the shipping rate, not the bar

The bar describes a promise. The promise itself lives in your shipping settings, as a free rate with a minimum order price. Set that first, and write down exactly what it checks: most free rates look at the order value after discounts, but it is worth confirming in your own settings.

Then give the bar the same number. If the rate says one figure and the bar says another, the shopper reaches checkout expecting free delivery and sees a charge, which is a worse moment than never having seen the bar at all. If you are still choosing the number, the free shipping threshold calculator helps you test a figure against your average order and margin before you commit to it.

Three messages, not one

A good bar changes what it says as the cart changes. There are three states worth writing separately:

• Empty cart. State the offer plainly, with the threshold in it. There is nothing to be close to yet, so a progress sentence reads oddly.
• On the way. Say how much is left, in money, not in percent. "You are 12 dollars away from free shipping" is a concrete task; a half-filled bar on its own is decoration.
• Reached. Confirm it, briefly. Shoppers who pass the line want to know they did, and then want the bar to get out of the way.

Keep each message short enough to fit two lines of a phone-width cart drawer, where space is tightest. A message that wraps to four lines pushes the checkout button down the screen.

Where the bar belongs

The cart is the natural home: the cart page and, if your theme has one, the slide-out cart drawer. That is where the shopper is looking at their total, and it is where the bar can be accurate.

Accuracy is the reason placement matters so much. Online Store 2.0 themes such as Dawn ask Shopify to re-render parts of the cart after every add, remove and quantity change, but only specific parts, not the whole section. A bar rendered inside one of those parts is re-rendered too, with the new total already worked out, so it stays correct without any script. A bar a few lines away, outside the refreshed part, keeps its old figure until the page reloads. A bar pasted at the very top of every page is drawn once when the page loads, so after an add to cart it keeps showing the old figure until the shopper opens another page.

If you want the offer visible sitewide, a plain announcement line such as "Free shipping over 50 dollars" does that job without pretending to track the cart. The Shopify announcement bar generator builds one, and the progress bar can stay in the cart where it is accurate.

Installing it in a Dawn-style theme

The usual pattern is a theme snippet rendered in two places:

1. Duplicate your live theme and work on the copy.
2. In Edit code, add a new snippet and paste the generated block into it.
3. On the cart page, render that snippet inside the element the theme refreshes. In Dawn that is the div with class js-contents in the subtotal block of main-cart-footer.liquid, just above the estimated total.
4. In the cart drawer, render it inside the part the theme refreshes. In Dawn the whole inner drawer is refreshed, so the top of the div with class drawer__footer works.
5. Preview the copy, change a quantity, and check that the bar shows the new amount without a reload. If it only changes after a reload, it is outside the refreshed part; move it.
6. Publish once it behaves on both the cart page and the drawer.

If your theme builds its drawer entirely in JavaScript instead of asking Shopify to re-render it, the drawer will only show a fresh figure on the next page load. Test an add to cart before you publish so you know which kind of theme you have.

Details that trip stores up

• More than one currency. A threshold is an amount in one currency. Shoppers paying in another would see a figure your rate does not use, so either set one bar per currency or hide the bar for other currencies. The generator does the second by default.
• Discount codes. A code applied at checkout can drop an order back under the threshold after the bar said it was clear. If that happens often, mention it in your shipping policy; the shipping policy generator can write the clause.
• Bulky items. A threshold that is profitable for small parcels can lose money on large ones. If some products ship in big boxes, check what they really cost to send before promising to absorb it.
• Leaving it up after the offer ends. A bar in the theme does not expire. Put a reminder in your calendar for the day the offer changes.

Next step

Confirm your free shipping rate and the figure it checks, then open the free shipping bar generator, set the same threshold and write your three messages. Paste it into a copy of your theme, test it on a phone, and publish.

A theme bar shows one offer to every cart. If you would rather show the offer only when a basket is close to the line, Nudgesmart can trigger a bar or popup on cart value, starting from a ready-made template.