Free shipping progress bar in online store cart illustration

HOW2 SHOPIFY: Free-Shipping Progress Bar, No App

aop3d tech
HOW2 SHOPIFY

HOW2 SHOPIFY: Free-Shipping Progress Bar, No App

"You're $14 away from FREE shipping" is a conversion machine. Build that progress bar with a few Liquid snippets — no app, no monthly fee.

Why progress bars lift order value

Behavioral science calls it the goal-gradient effect: the closer people get to a goal, the harder they work to finish it. A visible bar turns your free-shipping threshold from fine print into a finish line — shoppers add one more item instead of abandoning the cart. Apps charge monthly for this; your theme already has every data point needed.

Build it in 5 steps

  1. Set your threshold. Decide the number (e.g. $75). Write it in cents — $75 becomes 7500.
  2. Open the cart drawer file. Online Store > Themes > ... > Edit code. Find your cart drawer snippet (often snippets/cart-drawer.liquid; Dawn-style themes put it there, older themes use templates/cart.liquid).
  3. Paste the progress snippet right above the checkout button:
    <div class="fs-bar">
      <div class="fs-bar__fill" style="width: {{ cart.total_price | divided_by: 7500.0 | times: 100 | at_most: 100 }}%;"></div>
    </div>
    <p class="fs-bar__msg">
      {% if cart.total_price < 7500 %}
        You're {{ 7500 | minus: cart.total_price | money }} away from FREE shipping!
      {% else %}
        You've unlocked FREE shipping!
      {% endif %}
    </p>
  4. Add the styling in assets/base.css (or your theme's main stylesheet):
    .fs-bar{height:10px;background:#e5e7eb;border-radius:999px;overflow:hidden}
    .fs-bar__fill{height:100%;background:linear-gradient(90deg,#10b981,#34d399);transition:width .4s}
    .fs-bar__msg{font-size:14px;font-weight:600;margin:8px 0 0}
  5. Test it. Add items to the cart and watch the bar fill. Swap 7500 for your own threshold everywhere it appears. Test on mobile — most carts are abandoned on phones.

App vs. DIY: the honest comparison

Free-shipping app This DIY bar
Cost $5–15/month forever $0
Page speed Extra scripts = slower Zero added requests
Design match Generic widget styling Your theme's exact fonts/colors
Setup time 10 minutes 15 minutes once

Pair it with more conversion boosts

A progress bar works best alongside other cart nudges. Pair it with a sticky add-to-cart bar so the buy button is always one tap away, add a low-stock scarcity banner for urgency, and sweeten the threshold with a discount code that actually converts.

Always work on a duplicated theme first — test the bar there, then publish the copy.

The takeaway

  • The goal-gradient effect makes visible thresholds pull shoppers across them.
  • cart.total_price + a little Liquid = a free-shipping bar in 15 minutes.
  • No app means no fee, no extra scripts, no speed penalty.

What's your free-shipping threshold — and did shoppers start crossing it faster after adding a visual nudge?

Found this useful? Bookmark it and share it with someone who'd love it.

Disclaimer: The tech tips provided in this article are for informational purposes only. AOP3D TECH is not responsible for any data loss or hardware damage. Always back up your devices before attempting troubleshooting.

Back to blog