why build this without an app?

Free shipping bars typically cost $9–$20/month on the Shopify app store. The liquid version costs nothing, runs natively, and adds zero page weight.

the snippet

{% assign threshold = settings.free_shipping_threshold | default: 10000 %}
{% assign remaining = threshold | minus: cart.total_price %}
{% assign progress = cart.total_price | times: 100 | divided_by: threshold %}

{% if cart.total_price >= threshold %}
  <p class="fs-bar fs-unlocked">✓ free shipping unlocked!</p>
{% else %}
  <div class="fs-bar">
    <div class="fs-fill" style="width:{{ progress }}%"></div>
    <p>add {{ remaining | money }} more for free shipping</p>
  </div>
{% endif %}

wiring up the threshold

Add a number setting called free_shipping_threshold to your settings_schema.json. Shopify stores prices in cents — so enter 5000 for $50.00. This lets merchants change the threshold without touching code.

where to place it

Render it at the top of cart-template.liquid or inside your drawer cart snippet. Use {% render 'free-shipping-progress' %} to include it from a snippet file.

styling tips

  • Animate the progress bar width with transition: width 0.4s ease.
  • Use a green accent when unlocked and a neutral grey when not yet reached.
  • On theme load, the bar reflects the current cart total — no JavaScript needed for the initial render.