Shopify free shipping bar generator
Last updated
Each one fills in a sample amount and messages. Swap in your own in step 2 and the checks update as you type.
Pick one of the three use cases above. The amount check, each message as a shopper reads it and a live preview of the app’s bar appear here.
The parts of a free shipping bar
A Shopify free shipping bar is a line on the cart page or product pages that tells each shopper how much more to spend before delivery is free, and this generator checks your order amount and the three messages the bar shows before you set it up in the Nudgesmart app, so a 75 dollar amount with 52 dollars in the cart 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. To choose the amount itself, use the free shipping threshold calculator. Both bar layouts are on the store widgets page, and the steps to publish the bar are in the free shipping bar help article.
You decide the amount and the words. The cart supplies the rest, every time a shopper adds or removes something. These are the pieces the tool looks at, in the words the app uses for them.
- Order amount for free shipping
- The order value that earns free delivery, in your store currency, as a plain number above 0 with at most two decimals, such as 50 or 49.99. It should be the same amount as the free rate in your Shopify shipping settings. If you have filled in Store details in the app, the amount is filled in from there.
- On orders over an amount, or on every order
- The two ways the bar can work. Over an amount shows how close the cart is and fills a bar as it grows. On every order has no amount and no progress, just one message saying shipping is free.
- The {{ amount }} placeholder
- Where a figure appears in the text. While shopping it is the amount still to spend; in the empty-cart text it is your order amount. It has to be written exactly like this, with two curly brackets on each side, and it does not work when shipping is free on every order.
- Three texts
- Text while shopping, text once it is unlocked, and text when the cart is empty. Each takes up to 120 characters. Leave one empty and the app uses its own wording for it.
- Shopper currency
- You set one amount in your store currency. A shopper paying in another currency sees it converted at the rate Shopify uses for your prices, so the figure they read is rarely a round number.
- Line and progress bar, or between two lines
- The two layouts in the app. The first puts the message over a thin bar that fills; the second sets the same message between two thin dividers, which sits more quietly on a product page.
Nudgesmart adds widgets like this one to your store from the theme editor, in your theme’s fonts and colours by default, and is available on the Shopify App Store. See every widget layout or see what it costs.
Five bars as merchants set them up
Invented stores and amounts. The amount for the app, the sample texts and every flag come from the same check the tool above runs.
| Scenario | Amount typed | Amount for the app | The bar reads | What the tool says |
|---|---|---|---|---|
| Apparel store, amount typed with its symbol | $75 | 75 | Add $23.00 more for free shippingwith $52.00 in the cart | Nothing to flag |
| Skincare store in euros, comma before the cents, every text left empty | 49,90 € | 49.90 | You’re 15.90 away from free shippingwith 34.00 in the cart | Nothing to flag |
| Placeholder typed in square brackets | 60 | 60 | You are [amount] away from free deliverywith 42.00 in the cart | The text while shopping has something that looks like the amount placeholder but is not spelled the way the app reads it. Write it as {{ amount }}, with two curly brackets on each side, or shoppers see the brackets. |
| Amount below what most orders already spend | 30 | 30 | Only 9.00 to free shippingwith 21.00 in the cart | Your typical order already reaches this amount, so most shoppers see the unlocked text from their first add to cart and the bar nudges very few of them. |
| Free on every order, placeholder left in the text | on every order | none needed | Free shipping on orders over {{ amount }} | {{ amount }} does not work when free shipping is on every order, because there is no amount to show. Reword the text without it. |
What the bar cannot do
It describes a shipping rate; it does not make one
Free delivery is set in your Shopify shipping settings, as a rate with a minimum order price. The bar does not read that rate, so when you change one you have to change the other. If they disagree, the shopper reaches checkout expecting free delivery, sees a charge, and trusts nothing else on the page.
One amount for every market
The bar holds one amount. If you set different free shipping amounts for different countries in Shopify, it does not pick those up; every shopper sees your one amount, converted to their currency. Pick wording that stays true wherever you sell.
Not inside a slide-out cart drawer
Themes do not let apps place blocks inside a slide-out cart. Put the bar on the cart page, above the checkout button, or on product pages near Add to cart, where it updates as the cart changes.
A code at checkout can undo it
A discount code entered at checkout can drop an order back under the amount after the bar said it was clear. If that happens often, say so in your shipping policy rather than leaving shoppers to find out at the last step.
Nothing is measured here
This page cannot tell whether a bar grows your orders. Compare average order value in your own reports before and after, over a long enough stretch to mean something, before deciding it works.
Free shipping bar questions
How do I add a free shipping bar to Shopify?
In the Nudgesmart app, create a Free-shipping bar, set your order amount and the three texts, and publish it. Add to store then opens your theme editor on the cart page or on product pages with the block added; drag it where you want it, such as above the checkout button, and save.
Does the bar update when a shopper adds to cart?
Yes. The bar reads the live cart and changes when a shopper adds, removes or changes an item, without reloading the page. Once the cart passes the amount it switches to the unlocked text.
Can the bar go in my slide-out cart drawer?
No. Themes do not allow apps inside a slide-out cart. The cart page and product pages are where it can go, and both are places shoppers decide whether to add one more item.
What do shoppers paying in another currency see?
Your amount converted to their currency at the rate Shopify uses for your prices. You set it once, in your store currency, and the bar does the rest.
Does it follow my Shopify shipping rates?
No. The bar uses the one amount you set in the app. If you change your free shipping rate in Shopify, or set different amounts per country, update the bar to match and publish it again.
What should my free shipping amount be?
That depends on your typical order and your margin, not on the bar. The free shipping threshold calculator on this site helps you test a figure before you commit to it; this tool then checks the bar that shows it.
Is the bar in the preview my own?
No. The preview is the real Free-shipping bar from the app with sample content, there so you can judge the layout, style and colours. The amount and texts checked above are the ones you type into the app.
A free shipping offer works only when shoppers can see how close they are.
The Nudgesmart free-shipping bar goes on your cart page or product pages from the theme editor, updates as the cart changes, and shows your amount in each shopper’s currency.
