Shopify free shipping bar
without an app.

{% comment %}
  Jelonyx · Free Shipping Progress Bar : no app required
  Compatible with Dawn 12+, Horizon, and most Online Store 2.0 themes
  Source: jelonyx.com/shopify/no-app/free-shipping-bar
{% endcomment %}

{%- comment -%} Change this to your free shipping threshold in your store's currency (e.g. 50 for $50) {%- endcomment -%}
{%- assign jlx_threshold = 50 -%}
{%- assign jlx_threshold_cents = jlx_threshold | times: 100 -%}

<div
  id="jlx-fsbar"
  class="jlx-fsbar"
  data-threshold="{{ jlx_threshold_cents }}"
  data-total="{{ cart.total_price }}"
  data-currency="{{ cart.currency.iso_code }}"
  aria-live="polite"
  aria-atomic="true"
>
  <div
    class="jlx-fsbar__track"
    role="progressbar"
    aria-valuemin="0"
    aria-valuemax="{{ jlx_threshold_cents }}"
    aria-valuenow="{{ cart.total_price }}"
  >
    <div class="jlx-fsbar__fill"></div>
  </div>
  <p class="jlx-fsbar__msg"></p>
</div>

<style>
  .jlx-fsbar {
    padding: 12px 0;
    font-family: inherit;
  }
  .jlx-fsbar__track {
    height: 4px;
    background: var(--color-border, rgba(0, 0, 0, 0.1));
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 10px;
  }
  .jlx-fsbar__fill {
    height: 100%;
    background: var(--color-foreground, #1a1a1a);
    border-radius: 99px;
    transition: width 0.4s ease;
    width: 0%;
  }
  .jlx-fsbar__fill--complete {
    background: #2e7d32;
  }
  .jlx-fsbar__msg {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-foreground, #1a1a1a);
  }
  .jlx-fsbar__msg strong {
    font-weight: 600;
  }
</style>

<script>
  (function () {
    "use strict";

    var bar = document.getElementById("jlx-fsbar");
    if (!bar) return;

    var threshold = parseInt(bar.dataset.threshold, 10);
    var currency = bar.dataset.currency || "USD";
    var fill = bar.querySelector(".jlx-fsbar__fill");
    var msg = bar.querySelector(".jlx-fsbar__msg");
    var track = bar.querySelector(".jlx-fsbar__track");

    function formatMoney(cents) {
      try {
        return new Intl.NumberFormat(undefined, {
          style: "currency",
          currency: currency,
          minimumFractionDigits: 0,
          maximumFractionDigits: 2,
        }).format(cents / 100);
      } catch (e) {
        return (cents / 100).toFixed(2);
      }
    }

    function render(total) {
      var pct = Math.min((total / threshold) * 100, 100);
      fill.style.width = pct + "%";
      track.setAttribute("aria-valuenow", total);

      if (total >= threshold) {
        fill.classList.add("jlx-fsbar__fill--complete");
        msg.innerHTML = "<strong>You get free shipping!</strong>";
      } else {
        fill.classList.remove("jlx-fsbar__fill--complete");
        var remaining = threshold - total;
        msg.innerHTML =
          "Add <strong>" + formatMoney(remaining) + "</strong> more to get free shipping.";
      }
    }

    function fetchCart() {
      fetch("/cart.js")
        .then(function (r) { return r.json(); })
        .then(function (data) {
          currency = data.currency || currency;
          render(data.total_price);
        })
        .catch(function () {});
    }

    // Render initial state from Liquid-rendered data attribute (no flash)
    render(parseInt(bar.dataset.total, 10) || 0);

    // Re-render on cart events fired by Dawn and Horizon
    document.addEventListener("cart:updated", fetchCart);
    document.addEventListener("cart:refresh", fetchCart);

    // Intercept fetch calls that mutate the cart and re-fetch totals
    var _fetch = window.fetch;
    window.fetch = function () {
      var result = _fetch.apply(this, arguments);
      var input = arguments[0];
      var url =
        typeof input === "string"
          ? input
          : input instanceof Request
          ? input.url
          : "";
      if (//cart/(add|change|update)(.js)?/.test(url)) {
        result.then(function (r) {
          if (r.ok) setTimeout(fetchCart, 100);
          return r;
        }).catch(function () {});
      }
      return result;
    };
  })();
</script>