Shopify free shipping bar generator
Last updated
One click and a working bar appears below. The wording, colours and threshold are ours to begin with, and step 2 is where they become yours.
Pick one of the three designs above. The bar, drawn in a placeholder cart, and the Liquid you paste both appear here.
What you set, and what Shopify fills in
A Shopify free shipping bar is a progress strip in the cart that tells each shopper how much more they need to spend before delivery becomes free, and this generator writes it as a Liquid snippet that reads the live cart total, so a 75 dollar threshold with 52 dollars in the basket reads 23 dollars to go.
No benchmark is quoted on this page. Nobody publishes what a free shipping bar does to basket size with a disclosed sample, so there is no figure here to hold you to, and none is invented.
You choose four things. Shopify supplies the fifth, the cart total, every time the cart is drawn, which is why the bar needs no script and no app.
- Threshold
- The order value that earns free delivery, typed in whole units of one currency. It should match the free shipping rate you set up in your shipping settings. The bar only describes that rate; it does not create it, and a mismatch between the two is the fastest way to lose a shopper at checkout.
- Cart total
- Read from the cart itself when Shopify renders the page, after any cart-level discount has been applied. That is usually the figure a free shipping rate is checked against, but check how your own rate is set before trusting it.
- The [amount] token
- Where the remaining figure is printed in the progress message, formatted in your store money format. Leave it out and the bar still fills, but the sentence no longer tells anyone what to spend, and the generator warns you.
- Three messages
- One for an empty cart, one on the way to the threshold, one once it is passed. Each is capped at 110 characters so it fits a phone-width cart drawer on two lines. Braces and angle brackets are escaped so a message cannot turn into Liquid or markup.
- Currency guard
- The snippet renders only when the cart is in the currency you picked. A shopper paying in another currency would otherwise read a figure that is not what your shipping rate checks, so for them the bar stays hidden rather than wrong.
Nudgesmart is available on the Shopify App Store. Browse the template library or see what it costs.
Five carts, and what the bar tells each one
Invented stores and baskets. The message, the fill and any warning in each row come from the same function the generator above runs.
| Scenario | Threshold | Basket | The bar reads | Fill | What the generator says |
|---|---|---|---|---|---|
| Apparel store, cart drawer, 75 dollar threshold | $75.00 | 52.00 USD | You are $23.00 away from free shipping | 69% | Nothing to flag |
| Skincare store in euros, threshold already passed | €49.90 | 64.00 EUR | Free delivery unlocked | 100% | Nothing to flag |
| Sitewide bar in pounds, empty cart | £40.00 | empty | Free UK shipping over £40.00 | 0% | A bar at the top of every page is drawn when the page loads. After an add to cart it keeps the old figure until the shopper opens another page, which is why the cart is the better home for it. |
| Progress message with no amount token | CA$60.00 | 30.00 CAD | Keep going for free shipping | 50% | The progress message has no [amount] in it, so shoppers will not see how much is left to spend. Type [amount] where the figure should go. |
| Threshold left blank | — | 30.00 AUD | nothing | — | Enter the order value that earns free shipping on your store, as a number above zero. |
What a theme bar cannot do
It describes a shipping rate; it does not make one
Free delivery is set in your shipping settings, as a rate with a minimum order price. If that rate says one figure and the bar says another, the shopper reaches checkout, sees a charge, and trusts nothing else on the page.
Every shopper reads the same offer
The threshold is fixed in the snippet. A first visit, a returning customer and a shopper from a paid ad all see the same target, and the bar cannot choose to stay quiet for someone already well past it on their usual order.
Drawers built in JavaScript lag behind
Themes that rebuild the cart drawer from their own script, instead of asking Shopify to re-render it, only show a fresh figure after the next page load. Test an add to cart on your theme before publishing.
One currency per snippet
Stores selling in several currencies need one threshold per currency. Paste the snippet once per currency with its own amount, or accept that shoppers in other currencies see no bar.
Nothing is measured
A theme snippet has no idea how many shoppers saw it or whether any basket grew because of it. If you need to know, compare average order value in your own reports before and after, over a long enough stretch to mean something.
Free shipping bar questions
How do I add a free shipping bar to Shopify without an app?
Create a snippet in your theme code, paste the generated block into it, and render that snippet inside the cart page and the cart drawer. The generator writes the snippet and the exact render line. Duplicate your theme first and make the change on the copy.
Does the bar update when a shopper adds to cart?
On Online Store 2.0 themes such as Dawn, yes, as long as it sits in the right spot. Those themes ask Shopify to re-render only certain parts of the cart after each change, not the whole section, so the render line has to go inside one of those parts. The install steps name the exact spot for Dawn. A bar placed elsewhere, or pasted at the top of every page, keeps its old figure until the page reloads.
Which total does it compare against the threshold?
The cart total after cart discounts, in the smallest currency unit, exactly as the cart holds it. If your free shipping rate is based on something else, such as the total before discounts, adjust the threshold you type so the two agree.
What happens for shoppers paying in a different currency?
The bar does not render for them. The threshold you type is one currency, and printing it against a cart in another would show a figure your shipping rate does not use.
Can I change the colours and wording later?
Yes. Everything sits in one snippet file, so you can edit the words or the colours there, or come back here, change them and paste the new block over the old one.
Is anything sent to Nudgesmart when I use this?
No. The code is written in your browser from the values in the form, and the preview is drawn on this page. No account, store connection or install is involved.
A bar in the theme talks to every basket the same way.
In Nudgesmart, cart value and items in cart are named triggers, so a shipping offer can wait until a basket is close to the line before it says anything.
