Cart & checkout Free

Free-shipping progress bar

Shows how much more a shopper needs to add to unlock free shipping, with a live progress bar in the cart.

{%- comment -%} Set your free-shipping threshold in cents (e.g. 5000 = 50.00) {%- endcomment -%}
{%- assign threshold = 5000 -%}
{%- assign remaining = threshold | minus: cart.total_price -%}
<div class="ship-bar">
  {%- if cart.total_price >= threshold -%}
    <p class="ship-bar__msg">You've unlocked free shipping. 🎉</p>
    {%- assign pct = 100 -%}
  {%- else -%}
    <p class="ship-bar__msg">Add {{ remaining | money }} more for free shipping.</p>
    {%- assign pct = cart.total_price | times: 100 | divided_by: threshold -%}
  {%- endif -%}
  <div class="ship-bar__track"><div class="ship-bar__fill" style="width: {{ pct }}%"></div></div>
</div>
<style>
  .ship-bar{margin:12px 0;font-size:14px}
  .ship-bar__track{height:8px;background:#eee;border-radius:99px;overflow:hidden;margin-top:8px}
  .ship-bar__fill{height:100%;background:#1a7f37;transition:width .3s ease}
</style>

Nudges shoppers toward a larger basket by making the free-shipping gap visible and closeable. Paste into cart.liquid, main-cart-items.liquid, or your cart-drawer snippet.

Notes

Set threshold to your real free-shipping minimum, in the store’s currency subunits (cents/öre).
Re-render this on cart update (Ajax carts already re-fetch the cart section), or the bar will show the pre-update total.
cart.total_price is always in cents, so no unit conversion is needed before comparing.