How to build a free shipping progress bar in Shopify (no app)

A free shipping progress bar is the little cart message that says You're $12.00 away from free shipping and fills up as the shopper adds items. It's one of the most reliable ways to lift average order value on a Shopify store, and you can build it yourself in about ten lines of Liquid (no app, no monthly fee).

This guide covers the whole thing: the core code, the one bug that breaks most copy-pasted versions, how to style it, how to make it update live as the cart changes, where to place it, and how to hand the threshold to the merchant so they can change it without touching code.

What you'll need

• Access to your theme code (Online Store → Themes → Edit code).
• A cart template or cart drawer to drop the markup into.
• Basic comfort with Liquid — if you're new to it, the lesson linked near the end walks the core idea step by step.

The free shipping bar code

Here's the complete snippet. Drop it into your cart template (in Shopify's Horizon theme, that's the cart section). We'll break down every line next.

1{% assign threshold = 5000 %}2{% assign remaining = threshold | minus: cart.total_price %}3 4<div class="free-shipping-bar">5  {% if remaining > 0 %}6    <p>You're {{ remaining | money }} away from free shipping</p>7  {% else %}8    <p>You've unlocked free shipping</p>9  {% endif %}10 11  <div class="free-shipping-bar__track">12    <span style="width: {{ cart.total_price | times: 100.0 | divided_by: threshold }}%"></span>13  </div>14</div>

How it works, line by line

The whole feature hinges on one fact about Shopify: cart.total_price is in cents, not dollars. A $50.00 cart is 5000. So:

• threshold = 5000 is your free-shipping cutoff, $50.00 expressed in cents.
• remaining = threshold | minus: cart.total_price is how many cents are left to qualify.
• The money filter turns those cents back into a properly formatted $12.00 in the store's own currency — never hardcode a $.
• The bar width is the cart total as a percentage of the threshold: cart.total_price | times: 100.0 | divided_by: threshold. Multiplying by 100.0 (a float) forces decimal division so you get a smooth percentage instead of integer rounding.

Styling the bar

The markup is intentionally plain so it inherits your theme. Here's a minimal, themeable starting point — adjust the colors to your brand.

1.free-shipping-bar__track {2  height: 6px;3  border-radius: 999px;4  background: rgba(0, 0, 0, 0.08);5  overflow: hidden;6}7.free-shipping-bar__track span {8  display: block;9  height: 100%;10  background: #1a7f5a;11  transition: width 240ms ease;12}

Making it update live as the cart changes

Out of the box the bar is correct on every full page load, but in a cart drawer the total changes without a reload — so the bar can go stale. The fix is to re-fetch the cart and re-render the bar whenever the cart updates. Most modern themes dispatch an event you can listen for; the universal fallback is to read /cart.js after any add/update.

1const THRESHOLD = 5000; // keep in sync with the Liquid threshold2 3async function refreshShippingBar() {4  const res = await fetch('/cart.js');5  const cart = await res.json();6  const remaining = THRESHOLD - cart.total_price;7  const bar = document.querySelector('.free-shipping-bar');8  if (!bar) return;9 10  bar.querySelector('p').textContent =11    remaining > 012      ? `You're ${(remaining / 100).toFixed(2)} away from free shipping`13      : "You've unlocked free shipping";14 15  const pct = Math.min(100, (cart.total_price / THRESHOLD) * 100);16  bar.querySelector('.free-shipping-bar__track span').style.width = pct + '%';17}18 19// Re-run whenever the cart changes (drawer add/remove/update).20document.addEventListener('cart:updated', refreshShippingBar);

Where to put the bar

• Cart drawer / slide cart — the highest-converting spot. The shopper sees it the moment they add something.
• Cart page — always worth having for shoppers who navigate straight to /cart.
• Announcement bar — a site-wide "Free shipping over $50" works as a softer, ever-present nudge, though it can't show live progress without the JS above.

Make the threshold a merchant setting

Hardcoding 5000 works, but the merchant can't change their free-shipping threshold without editing code — and they will want to, usually right before a sale. Move it to a section setting so it's editable from the theme editor.

1{2  "type": "number",3  "id": "free_shipping_threshold",4  "label": "Free shipping threshold (in cents)",5  "default": 50006}

Then read it at the top of the section with {% assign threshold = section.settings.free_shipping_threshold %}. Same code, but now the threshold is the merchant's setting to own — which is the difference between a snippet and a feature.

What AI tools get wrong here

Ask Copilot or Shopify Magic for this and you'll usually get one of two mistakes. Spotting them on sight is exactly the judgment that stays valuable when AI writes the first draft:

• Cents vs. dollars — comparing the raw cart.total_price against a dollar number, so the math is off by 100×.
• Hardcoded currency — writing ${{ remaining }} instead of {{ remaining | money }}, which silently breaks every non-USD store.

Wrapping up

Ten lines of Liquid, one cents-vs-dollars gotcha, a touch of JavaScript to keep it live, and one setting to hand control back to the merchant. That's the whole feature — and the gap between code that demos and code that ships.