Free Shipping Bar Generator for Shopify
Create a free-shipping progress bar that reads your live Shopify cart and shows shoppers exactly how much more to spend. Lifts average order value. No app.
- 100% free
- No sign-up
- Runs in your browser — nothing is uploaded
Settings
Live preview
Preview is a mock store — colours and text match the code below exactly.
How to add it to your Shopify store
No app, no developer. Takes about two minutes.
- Copy the code above. Adjust the settings on the left first — the code updates as you type.
- In Online Store → Themes → Customize, add a Custom Liquid section and drag it to the very top of the page, above your header.
- Paste the code into that section.
- Click Save. That's it — check your live store to see it working.
Prefer it site-wide and always-on? Paste the same code into theme.liquid just before the closing </body> tag (Online Store → Themes → Edit code).
Why a free shipping bar works
"Free shipping over $50" is one of the most reliable ways to lift average order value. A progress bar makes the goal concrete — a shopper with $41 in their cart can see they're one small item away, and often adds it. The key is that the number is live: it has to update the moment they add or remove something.
What the generated code does
- Reads your real cart total from Shopify's
/cart.js— no fake numbers. - Shows "spend X more" with a progress bar, then switches to your success message at the goal.
- Refreshes automatically after common add-to-cart and cart-drawer events, and exposes
window.zhShipBar()so your theme can refresh it manually if needed. - Sticks to the top or bottom of the page. Pure HTML, CSS and JavaScript.
Setting the right threshold
- Look at your current average order value and set the bar 10–20% above it. Too high and it discourages people.
- Make sure the number matches a real free-shipping rate in Settings → Shipping and delivery, or shoppers will hit checkout and feel misled.
- Multi-currency store? This bar shows one symbol — set it to your primary market, or hide the bar for other markets.
Frequently asked questions
Quick answers to what people ask most.
How does it know my cart total?
It reads the live cart from Shopify's /cart.js, so the number is always your shopper's real subtotal.
Is the free shipping bar free?
Yes. No app, no monthly fee.
The total does not update when I add to cart, why?
Some themes do not fire a standard cart event. The code listens for the common ones and refreshes after add-to-cart clicks; if yours is unusual, call window.zhShipBar() from your theme after a cart change.
What threshold should I set?
Around 10 to 20 percent above your current average order value. Make sure it matches a real free-shipping rate in your shipping settings.
Does it work with a cart drawer?
Yes, it refreshes on common drawer events. Place the bar at the top of the page so it is visible when the drawer opens.
Does it support multiple currencies?
The bar shows one currency symbol. Set it for your main market.
More free Shopify tools
Free, no sign-up, built by the Zohanify team.
Want higher average order value?
Bundles, thresholds, upsells and a faster checkout flow — see how we can lift revenue per order on your store.