How to add a free shipping bar
Show shoppers how much more they need to spend for free shipping, updated as their cart changes and shown in their own currency.
Shoppers will often add one more item to skip a shipping fee. A free shipping bar tells them exactly how close they are.
TL;DR
Go to Store Widgets, click Create Widget and pick Free-shipping bar. Check your free shipping amount, pick a style and a layout, and click Publish. Then add the Nudgesmart widget block in the theme editor, on your cart page or on your product pages, and choose your bar in its Widget setting.
Step 1 · Create the bar
In Nudgesmart, open Store Widgets and click Create Widget. Pick Free-shipping bar.
Widget library with the Free-shipping bar highlighted
Screenshot coming soon
If you've filled in Store details, your free shipping amount is already filled in from Free shipping on orders over. If you haven't, a short Store details screen asks about your shipping first. You can skip it and type the amount in the next step.
Step 2 · Set your free shipping amount
In the Content tab, open the Settings section under Free-shipping bar. Under Free shipping, choose On orders over an amount or On every order.
Free shipping bar settings with the amount field and the progress message
Screenshot coming soon
- On orders over an amount. Type the amount in Order amount for free shipping, in your store's currency, such as 50. Use the same amount as your shipping rates in Shopify.
- On every order. The bar shows a simple message instead of a progress bar.
The bar then shows a message such as "You're $12.00 away from free shipping", and fills up as the cart grows. When the cart reaches the amount, it tells the shopper they've unlocked free shipping.
You can change the wording of each message:
- Text while shopping. Shown while shoppers are still short.
{{ amount }}is the amount they have left to spend. - Text once it's unlocked. Shown once they qualify. With On every order, this is the only message the bar shows.
- Text when the cart is empty.
{{ amount }}here is your order amount for free shipping, such as "Free shipping on orders over $50.00".
{{ amount }} only works with On orders over an amount. With On every order there's no amount to show.
Step 3 · Pick a style
Open the Design tab and choose a Style. The preview shows the bar part-way full.
Under Layout, choose how the message sits:
- Line and progress bar. The amount left, with a thin progress bar under it.
- Between two lines. The same message, set between two thin dividers.
Step 4 · Publish and add it to your store
In the Visibility card, click Publish. Then click Add to store.
Add to store lists the best spots, in order:
- The cart page, where shoppers decide whether to add one more item.
- Product pages, near the Add to cart button, so shoppers see the gap before they add to cart.
Tick the pages you want, then click Add to the cart page or Add to product pages to open the theme editor there. If the bar isn't where you want it, drag it there. On the cart page, drag it above the checkout button. Choose your bar in the block's Widget setting, then click Save. You can add it to your home page, collection pages and other pages the same way.
To add it by hand, go to Online Store → Themes → Customize, open the page, click Add block, then Apps, and pick Nudgesmart widget.
How the bar works
- It updates as the cart changes. When a shopper adds, removes or changes an item, the bar updates without reloading the page.
- It shows the shopper's currency. If you sell in more than one currency, the amount is converted with Shopify's exchange rate, the same one your prices use.
- It uses one amount. If you've set different free shipping amounts for different countries in Shopify, the bar doesn't pick those up. It uses the amount you set here, converted to the shopper's currency.
Tips
- Put it where shoppers decide. The cart page catches shoppers at the moment they choose whether to add one more item. On product pages, it shows the gap before they add to cart.
- Changed your free shipping amount in Shopify? Update it here too, then click Save & publish. The bar doesn't follow your Shopify shipping settings on its own.
Common pitfalls
- I clicked Publish and it didn't publish. Nudgesmart opens the Settings section and shows what's missing. Type your Order amount for free shipping, or choose On every order, then click Publish again.
- The bar doesn't show in my slide-out cart. It can't. Themes don't allow apps inside a slide-out cart. Add it to your cart page or your product pages instead.
- The bar disappeared after I changed my store's currency. Open the bar in Nudgesmart, check the amount, and click Save & publish (or Publish changes if the amount was already right).
What to read next
How to add social media links to your store
Show links to your Instagram, TikTok, Facebook, YouTube and other profiles, matched to your theme's colors or in each network's own colors.
How to show a low stock message on product pages
Show "Only 3 left in stock" on product pages when the option a shopper picks is running low, using your real stock levels.