DEV Community: Brix

Build a free shipping progress bar for Shopify with Liquid and JavaScript

Brix — Sat, 24 Oct 2026 10:05:21 +0000

Disclosure: I work on Brix, a Shopify cart app. This post shows how to build the feature yourself, and Brix is mentioned only at the end.

A free shipping progress bar is one of the simplest cart features to add, and it works because it makes a goal visible: "You're $12 away from free shipping." In this post we will build one with a Liquid snippet, a little CSS and a short script that keeps it in step with the cart.

It is written for a standard Online Store 2.0 theme such as Dawn. Themes differ, so treat the code as a starting point and test it in your own theme.

What we are building

A bar that fills as the cart total approaches a threshold.
A message that says how much more to spend, then switches to a success message.
Correct on first load (rendered by Liquid), and updated live when items are added, changed or removed.
Accessible: it exposes progress to screen readers and announces changes politely.

1. The Liquid snippet

Create snippets/free-shipping-bar.liquid. It takes a threshold in your store currency (for example 75) and renders the first state on the server, so there is no flash of an empty bar.

{%- liquid
  assign threshold_cents = threshold | times: 100
  assign total = cart.total_price
  assign remaining = threshold_cents | minus: total
  if remaining < 0
    assign remaining = 0
  endif
  assign percent = total | times: 100.0 | divided_by: threshold_cents | round
  if percent > 100
    assign percent = 100
  endif
-%}

<div class="fsb" data-fsb data-threshold="{{ threshold_cents }}">
  <p class="fsb__message" data-fsb-message aria-live="polite">
    {%- if remaining == 0 -%}
      You've unlocked free shipping.
    {%- else -%}
      You're {{ remaining | money }} away from free shipping.
    {%- endif -%}
  </p>
  <div
    class="fsb__track"
    role="progressbar"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="{{ percent }}"
    aria-label="Progress toward free shipping"
  >
    <div class="fsb__fill" data-fsb-fill style="width: {{ percent }}%"></div>
  </div>
</div>

Render it wherever the cart total is visible, for example in your cart page section or cart drawer:

{% render 'free-shipping-bar', threshold: 75 %}

2. The CSS

Add this to your theme's stylesheet (or a new asset). The width transition gives a smooth fill.

.fsb { margin: 0 0 1rem; }
.fsb__message { margin: 0 0 .5rem; font-size: .9rem; }
.fsb__track {
  height: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.fsb__fill {
  height: 100%;
  background: #16a34a;
  border-radius: 999px;
  transition: width .3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .fsb__fill { transition: none; }
}

3. The JavaScript

Create assets/free-shipping-bar.js and load it with defer. It does two jobs: update the bar from /cart.js, and run that update after any cart-changing request.

(() => {
  const bar = document.querySelector('[data-fsb]');
  if (!bar) return;

  const threshold = Number(bar.dataset.threshold); // in cents
  const fill = bar.querySelector('[data-fsb-fill]');
  const message = bar.querySelector('[data-fsb-message]');
  const track = bar.querySelector('[role="progressbar"]');

  const currency =
    (window.Shopify && Shopify.currency && Shopify.currency.active) || 'USD';
  const money = new Intl.NumberFormat(document.documentElement.lang || undefined, {
    style: 'currency',
    currency,
  });

  function render(totalCents) {
    const remaining = Math.max(threshold - totalCents, 0);
    const percent = Math.min(Math.round((totalCents / threshold) * 100), 100);

    fill.style.width = percent + '%';
    track.setAttribute('aria-valuenow', percent);
    message.textContent =
      remaining === 0
        ? "You've unlocked free shipping."
        : `You're ${money.format(remaining / 100)} away from free shipping.`;
  }

  async function refresh() {
    const res = await fetch('/cart.js', { headers: { Accept: 'application/json' } });
    const cart = await res.json();
    render(cart.total_price);
  }

  // Run after any request that changes the cart.
  const originalFetch = window.fetch;
  window.fetch = function (...args) {
    const url = typeof args[0] === 'string' ? args[0] : (args[0] && args[0].url) || '';
    const request = originalFetch.apply(this, args);
    if (/\/cart\/(add|change|update|clear)/.test(url)) {
      request.then(refresh).catch(() => {});
    }
    return request;
  };
})();

Load it in layout/theme.liquid, before </body>:

<script src="{{ 'free-shipping-bar.js' | asset_url }}" defer></script>

How it works

First paint: Liquid works out the remaining amount and the percentage, so the bar is right before any JavaScript runs.
Updates: wrapping fetch lets the bar refresh after the cart's add, change, update and clear requests, which is what most modern themes use. The script then asks /cart.js for the current total and redraws.
Accessibility: role="progressbar" with aria-valuenow exposes the progress, and aria-live="polite" announces the new message without interrupting.
Motion: the fill animates unless the visitor prefers reduced motion.

Limits and things to check

Themes that use XHR instead of fetch. Older themes may not be covered by the wrapper. If so, listen for your theme's own cart event instead, or call refresh() from the theme's cart update function.
Multiple currencies. The threshold above is in your store currency. If you sell in other currencies, you need to convert it (Shopify exposes a rate on Shopify.currency.rate in many themes), then test it in each currency.
Currencies without decimals. The code assumes the usual 100 minor units. Check currencies such as JPY in your own store.
Shipping rules live elsewhere. The bar only displays a goal. The actual free shipping rule must match it in your shipping settings.
Choose the threshold from data. A threshold slightly above your current average order value tends to feel reachable. I wrote about how to pick the number here: how to set the right free shipping threshold.

Test it

On a development store with Dawn:

Add the snippet, CSS and script, and render the snippet in the cart section.
Add a product under the threshold. The bar should be partly filled and the message should show the amount left.
Add more until you pass the threshold. The bar should fill and switch to the success message.
Remove an item. The bar should shrink again.
Test with a screen reader and with reduced motion turned on.

If you would rather not maintain this

Everything above works, but themes change, cart drawers differ and multi-currency adds edge cases. If you would rather not maintain it, Brix is the Shopify cart app I work on. It includes a multi-tier rewards progress bar, plus upsells, coupons and bundles, without custom code.

Questions about the Liquid or the script are welcome in the comments.

Calculate average order value from Shopify orders with the Admin GraphQL API

Brix — Sat, 24 Oct 2026 09:52:51 +0000

Disclosure: I work on Brix, a Shopify cart app. This post is about the maths and the API, and Brix is mentioned only at the end.

Average order value (AOV) is total revenue divided by the number of orders. The formula is one line. Getting a number you can trust takes a bit more care, because the totals Shopify gives you include things you may not want to count.

In this post we will pull orders with the Admin GraphQL API and compute AOV in Node.js, while handling the usual traps: test orders, cancelled orders, refunds, shipping and taxes.

What you need

A Shopify store, ideally a development store to try this on.
A custom app with an Admin API access token and the read_orders scope. By default this covers the last 60 days of orders. For older history you need the read_all_orders scope, which Shopify has to approve.
Node.js 18 or newer, which includes fetch.

Keep the token out of your code. We will read it from environment variables.

The query

We ask for orders in a date range and take only the fields we need. currentTotalPriceSet and currentSubtotalPriceSet reflect the order as it stands now, so refunds and returns are already taken into account.

query Orders($query: String!, $cursor: String) {
  orders(first: 250, after: $cursor, query: $query) {
    pageInfo {
      hasNextPage
      endCursor
    }
    nodes {
      id
      test
      cancelledAt
      currentTotalPriceSet { shopMoney { amount currencyCode } }
      currentSubtotalPriceSet { shopMoney { amount } }
    }
  }
}

currentTotalPriceSet is the order total, including shipping and taxes.
currentSubtotalPriceSet is the product subtotal after discounts, without shipping and taxes.
test and cancelledAt let us drop orders that should not count.

The script

const SHOP = process.env.SHOPIFY_STORE;        // e.g. my-store.myshopify.com
const TOKEN = process.env.SHOPIFY_ADMIN_TOKEN; // Admin API access token
const API_VERSION = "2026-07";                 // use a current stable version

const QUERY = `
  query Orders($query: String!, $cursor: String) {
    orders(first: 250, after: $cursor, query: $query) {
      pageInfo { hasNextPage endCursor }
      nodes {
        id
        test
        cancelledAt
        currentTotalPriceSet { shopMoney { amount currencyCode } }
        currentSubtotalPriceSet { shopMoney { amount } }
      }
    }
  }
`;

async function graphql(variables) {
  const res = await fetch(
    `https://${SHOP}/admin/api/${API_VERSION}/graphql.json`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Shopify-Access-Token": TOKEN,
      },
      body: JSON.stringify({ query: QUERY, variables }),
    }
  );
  const json = await res.json();
  if (json.errors) throw new Error(JSON.stringify(json.errors));
  return json.data.orders;
}

async function getOrders(from, to) {
  const search = `created_at:>=${from} created_at:<${to}`;
  const orders = [];
  let cursor = null;
  let hasNext = true;

  while (hasNext) {
    const page = await graphql({ query: search, cursor });
    orders.push(...page.nodes);
    hasNext = page.pageInfo.hasNextPage;
    cursor = page.pageInfo.endCursor;
  }
  return orders;
}

function aov(orders) {
  // Leave out test orders and cancelled orders.
  const real = orders.filter((o) => !o.test && !o.cancelledAt);
  if (real.length === 0) return null;

  const sum = (pick) =>
    real.reduce((total, o) => total + Number(pick(o)), 0);

  const revenue = sum((o) => o.currentTotalPriceSet.shopMoney.amount);
  const products = sum((o) => o.currentSubtotalPriceSet.shopMoney.amount);

  return {
    orders: real.length,
    currency: real[0].currentTotalPriceSet.shopMoney.currencyCode,
    aovTotal: revenue / real.length,    // includes shipping and tax
    aovProducts: products / real.length // product value only
  };
}

(async () => {
  const orders = await getOrders("2026-09-01", "2026-10-01");
  console.log(aov(orders));
})();

Run it with:

SHOPIFY_STORE=my-store.myshopify.com SHOPIFY_ADMIN_TOKEN=shpat_xxx node aov.js

The output looks like this (the numbers here are only an example of the shape):

{ orders: 412, currency: "USD", aovTotal: 71.3, aovProducts: 62.9 }

Why two numbers

I return both on purpose, because teams often compare AOV across months using different definitions without noticing.

aovTotal includes shipping and taxes. It is closest to what the customer paid.
aovProducts is product value after discounts. It is better for judging whether upsells and bundles are working, because shipping and tax changes will not move it.

Pick one and stay with it. If one month uses the total and the next uses the product value, the comparison tells you nothing.

Traps to watch for

Test orders. Orders placed while you test checkout show test: true. Leave them out.
Cancelled orders. They have a cancelledAt value. Leave them out too.
Refunds and returns. Using the current... fields means refunds are already reflected. If you use the original totalPriceSet instead, a refunded order still counts in full.
Outliers. One very large wholesale order can move the average on a small store. Look at the median alongside the mean.
Currency. shopMoney is in the shop's currency. If you sell in several presentment currencies, do not mix them in one sum.
Date ranges. Use the same length of period when you compare, and watch out for sales and holidays.

Read it next to other numbers

AOV on its own can mislead. A change that raises AOV but lowers conversion rate can leave revenue flat. Look at AOV with conversion rate, orders per day and margin.

I wrote a longer, non-code version of this guide for store owners, covering where to find AOV in the Shopify admin and how to track it over time: How to calculate and track average order value on Shopify.

If you are working on raising AOV and not only measuring it, Brix is the Shopify cart app I work on (upsells, rewards, coupons and bundles). Questions about the query or the maths are welcome in the comments.