How to add a free shipping progress bar to Shopify (and why most of them flicker)

"Add €12.40 more for free shipping" is the cheapest upsell in e-commerce. The shopper already wants the product; the bar just gives them a reason to add one more thing. Stores that add a progress bar typically see average order value go up by a noticeable percentage, and the bar costs nothing per order.

Shopify does not have a built-in free shipping progress bar. The theme's announcement bar can show static text, but it cannot read the cart total or count down to a threshold. So you either write code or install an app. This post explains what to watch for in both cases.

What the bar has to do

1. Read the cart total, including when the shopper adds or removes items without reloading the page (cart drawers, AJAX carts).
2. Compare it with the free shipping threshold for the shopper's country and currency. A €50 threshold in Germany may be £45 in the UK and a different rule in the US.
3. Show three states: "Add X more", a progress bar, and "You've unlocked free shipping".
4. Do all of that in the shopper's language.
5. Not shift the page around while loading.

Point 5 is where most bar apps fail, and it is the one Google measures.

Why most bar apps flicker

The typical bar app works like this: the page loads, then a script downloads, then it reads the cart, then it inserts a bar at the top of the page. Everything below the bar jumps down by 40 pixels. That jump is a layout shift, it counts against your Cumulative Layout Shift score, and on mobile it happens exactly when the shopper is reading the headline.

You can see it on almost any store with a bar: reload the page and watch the top edge. If the bar appears a moment after the logo, it is JavaScript-injected.

The fix is to render the bar on the server, so it is part of the HTML the theme returns, and only update the numbers with JavaScript once the cart changes. That requires the app to store the bar's configuration somewhere the theme can read at render time, which is why few apps do it.

Option 1: Code it in the theme

For a single-country store with one currency, a developer can add a section that reads cart.total_price in Liquid and updates it via the Cart API on cart:updated events. It is a day of work, it breaks on theme updates, and multi-currency thresholds have to be hard-coded. Fine for one store you control; not fine if you want it to survive the next theme.

Option 2: An app that renders server-side

We built Barly for this. It stores your bar settings in a theme metafield and renders the bar as a theme app extension, so the first HTML already contains the bar with the correct text and progress. JavaScript only takes over when the cart changes. No flicker, no layout shift, no external request on page load.

What it does beyond the basic bar:

• Per-market thresholds. Different free-shipping thresholds per country or Shopify Market, in the local currency.
• Announcement and countdown bars with the same server rendering, for sales and cutoff times.
• 60 storefront languages. The "Add X more" text follows the shopper's language automatically, including Baltic and Nordic languages that most bar apps do not ship.
• Placement control. Top of page, above the cart drawer, or inside the cart, without theme edits.
• Free plan with one bar; Pro adds multiple bars, scheduling and per-market rules.

Setup is: install, choose a template, enter your threshold, enable the app embed in the theme editor. The Barly documentation covers cart drawers and multi-currency in detail.

Setting the threshold

The threshold matters more than the design. A rule that works for most stores: set it slightly above your current average order value, so a typical shopper is one small item away. If AOV is €38, a €45 threshold gets far more "add one more" behaviour than €80. Check your shipping cost against the extra margin, and revisit the number every quarter.

Frequently asked questions

Does the bar work with cart drawers and AJAX carts? Yes, if the app listens to cart change events rather than page loads. Barly hooks into the standard Shopify cart events and the Cart API, so drawers from Dawn and most third-party themes update the bar without reload.

Can I show a different threshold for different countries? Yes, with Shopify Markets. Barly reads the shopper's market and applies that market's threshold and currency.

Will it slow the page? A server-rendered bar adds a few hundred bytes of HTML. A JavaScript-injected bar adds a script download plus a layout shift. The difference shows up in PageSpeed Insights under CLS.

What happens when I uninstall? Barly is a theme app extension, so uninstalling removes the bar and leaves no code in the theme.

---

Barly is built by MB „Liūto media", a small studio in Lithuania. See all our Shopify apps at liutoapps.com.