Free Shipping Progress Bar Section for ShopifyNo app. Copy, paste, done.

{%- liquid
  assign threshold_cents = section.settings.threshold | times: 100 | round
  assign same_currency = false
  if cart.currency.iso_code == shop.currency
    assign same_currency = true
  endif
  assign show = false
  if threshold_cents > 0 and same_currency
    assign show = true
  endif
  assign remaining = 0
  assign percent = 0
  if show
    assign remaining = threshold_cents | minus: cart.total_price
    if remaining < 0
      assign remaining = 0
    endif
    assign percent = cart.total_price | times: 100 | divided_by: threshold_cents | floor
    if percent > 100
      assign percent = 100
    endif
  endif
  assign amount = remaining | money
  assign progress_message = section.settings.progress_message | escape | replace: '[amount]', amount
-%}

{%- if show or request.design_mode -%}
  <sf-shipping-progress
    class="sf-ship"
    data-threshold="{{ threshold_cents }}"
    data-currency="{{ shop.currency }}"
    data-money-format="{{ shop.money_format | escape }}"
    data-progress="{{ section.settings.progress_message | escape }}"
    data-success="{{ section.settings.success_message | escape }}"
    style="--sf-ship-bg: {{ section.settings.background_color }}; --sf-ship-text: {{ section.settings.text_color }}; --sf-ship-fill: {{ section.settings.bar_color }}; --sf-ship-py: {{ section.settings.padding }}px;"
  >
    {%- if show -%}
      <p class="sf-ship__message" aria-live="polite">
        {%- if remaining > 0 -%}{{ progress_message }}{%- else -%}{{ section.settings.success_message | escape }}{%- endif -%}
      </p>
      {%- if section.settings.show_bar -%}
        <div class="sf-ship__bar" role="progressbar" aria-label="Progress to free shipping" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ percent }}">
          <span class="sf-ship__fill" style="width: {{ percent }}%"></span>
        </div>
      {%- endif -%}
    {%- elsif threshold_cents <= 0 -%}
      <p class="sf-ship__empty">Set a free shipping threshold in the section settings to show this bar.</p>
    {%- else -%}
      <p class="sf-ship__empty">This bar is hidden when shoppers browse in another currency, because amounts can't be converted in Liquid. It shows for carts in {{ shop.currency }}.</p>
    {%- endif -%}
  </sf-shipping-progress>
{%- endif -%}

{% stylesheet %}
.sf-ship { display: block; background: var(--sf-ship-bg); color: var(--sf-ship-text); padding: var(--sf-ship-py) 16px; text-align: center; }
.sf-ship__message { margin: 0 auto; max-width: 720px; font-weight: 600; }
.sf-ship__bar { position: relative; overflow: hidden; max-width: 480px; height: 8px; margin: 8px auto 0; border-radius: 999px; background: color-mix(in srgb, currentColor 18%, transparent); }
.sf-ship__fill { display: block; height: 100%; border-radius: inherit; background: var(--sf-ship-fill); transition: width 0.4s ease; }
.sf-ship__empty { margin: 0 auto; max-width: 640px; padding: 12px 16px; border: 1px dashed currentColor; border-radius: 8px; font-size: 0.875em; opacity: 0.8; }
@media (prefers-reduced-motion: reduce) { .sf-ship__fill { transition: none; } }
{% endstylesheet %}

{% javascript %}
if (!customElements.get('sf-shipping-progress')) {
  const CART_WRITES = ['/cart/add', '/cart/change', '/cart/update', '/cart/clear'];
  const CART_EVENTS = ['cart:updated', 'cart:refresh', 'cart:change'];

  class SfShippingProgress extends HTMLElement {
    static watchCart() {
      if (window.__sfCartWatch || typeof window.fetch !== 'function') return;
      window.__sfCartWatch = true;
      const originalFetch = window.fetch;
      window.fetch = function (...args) {
        const result = originalFetch.apply(window, args);
        const target = args[0];
        const url = String(target && target.url ? target.url : target);
        if (CART_WRITES.some((path) => url.includes(path))) {
          result
            .then(() => document.querySelectorAll('sf-shipping-progress').forEach((el) => el.refresh()))
            .catch(() => {});
        }
        return result;
      };
    }

    connectedCallback() {
      SfShippingProgress.watchCart();
      this.onCartEvent = () => this.refresh();
      CART_EVENTS.forEach((type) => document.addEventListener(type, this.onCartEvent));
    }

    disconnectedCallback() {
      CART_EVENTS.forEach((type) => document.removeEventListener(type, this.onCartEvent));
    }

    async refresh() {
      try {
        const root = (window.Shopify && window.Shopify.routes && window.Shopify.routes.root) || '/';
        const response = await fetch(root + 'cart.js', { headers: { Accept: 'application/json' } });
        if (!response.ok) return;
        this.update(await response.json());
      } catch (error) {
        // Network errors leave the last rendered state in place.
      }
    }

    update(cart) {
      const threshold = Number(this.dataset.threshold);
      if (!threshold || !cart || cart.currency !== this.dataset.currency) return;
      const remaining = Math.max(0, threshold - cart.total_price);
      const percent = Math.min(100, Math.floor((cart.total_price * 100) / threshold));
      const message = this.querySelector('.sf-ship__message');
      if (message) {
        message.textContent = remaining > 0
          ? this.dataset.progress.split('[amount]').join(this.format(remaining))
          : this.dataset.success;
      }
      const bar = this.querySelector('.sf-ship__bar');
      const fill = this.querySelector('.sf-ship__fill');
      if (bar) bar.setAttribute('aria-valuenow', String(percent));
      if (fill) fill.style.width = percent + '%';
    }

    format(cents) {
      const pattern = this.dataset.moneyFormat || '';
      const match = pattern.match(new RegExp('\\u007b\\u007b\\s*(\\w+)\\s*\\u007d\\u007d'));
      if (match) {
        const group = (n, sep) => String(n).replace(/\B(?=(\d{3})+(?!\d))/g, sep);
        const value = cents / 100;
        const whole = group(Math.round(value), match[1].includes('comma') ? '.' : ',');
        const fixed = Math.abs(value).toFixed(2);
        let amount = null;
        if (match[1] === 'amount') amount = group(fixed.split('.')[0], ',') + '.' + fixed.split('.')[1];
        else if (match[1] === 'amount_no_decimals') amount = whole;
        else if (match[1] === 'amount_with_comma_separator') amount = group(fixed.split('.')[0], '.') + ',' + fixed.split('.')[1];
        else if (match[1] === 'amount_no_decimals_with_comma_separator') amount = whole;
        if (amount !== null) return pattern.replace(match[0], amount).replace(/<[^>]*>/g, '');
      }
      try {
        return new Intl.NumberFormat(document.documentElement.lang || undefined, {
          style: 'currency',
          currency: this.dataset.currency,
        }).format(cents / 100);
      } catch (error) {
        return (cents / 100).toFixed(2);
      }
    }
  }
  customElements.define('sf-shipping-progress', SfShippingProgress);
}
{% endjavascript %}

{% schema %}
{
  "name": "SF free shipping bar",
  "tag": "section",
  "class": "sf-ship-section",
  "settings": [
    { "type": "number", "id": "threshold", "label": "Free shipping threshold", "info": "In your store currency, e.g. 50. Use the same amount as your shipping rate rules.", "default": 50 },
    { "type": "text", "id": "progress_message", "label": "Progress message", "info": "Use [amount] where the remaining amount should appear.", "default": "You're [amount] away from free shipping" },
    { "type": "text", "id": "success_message", "label": "Success message", "default": "You've unlocked free shipping!" },
    { "type": "checkbox", "id": "show_bar", "label": "Show progress bar", "default": true },
    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "background_color", "label": "Background", "default": "#f3f4f6" },
    { "type": "color", "id": "text_color", "label": "Text", "default": "#111827" },
    { "type": "color", "id": "bar_color", "label": "Bar", "default": "#16a34a" },
    { "type": "range", "id": "padding", "label": "Vertical padding", "min": 4, "max": 32, "step": 2, "unit": "px", "default": 12 }
  ],
  "presets": [{ "name": "SF free shipping bar" }]
}
{% endschema %}