Does this section give customers free shipping?

No. It only shows progress towards the threshold you type. Set up the free shipping itself in Shopify: a free rate with a minimum order price under Settings > Shipping and delivery, or a free shipping discount under Discounts, using the same amount.

Which cart total does it use?

The cart total Shopify reports (total_price): after cart discounts, before shipping and taxes. If your shipping rate condition uses a different total, set the threshold so the two match.

Does it update when items are added in a cart drawer?

Yes. The script notices finished requests to Shopify's cart endpoints (add, change, update, clear) and the cart:updated events many themes send, then reads /cart.js again and updates the message and bar.

How does it handle other currencies?

Add a Currency threshold block with the currency code and an exact amount, for example EUR 70. Without one, the store's threshold is converted at Shopify's current rate, which can give an uneven number.

Can I hide it once free shipping is reached, or on an empty cart?

Yes, both are settings. The messages for an empty cart, progress and success are text you can change and translate, with {remaining} and {threshold} placeholders.

Free shipping bar

"You're $23 away from free shipping" with a progress bar, from the live cart and your threshold. Updates with cart drawers, per-currency thresholds, no app.

Category: Conversion and offers
Use on: Every page, Cart, Product
Reads: Cart (cart object and /cart.js)
Size: 17 KB, small script included
License: MIT, free for client work

View as Markdown Open in ChatGPT Open in Claude

In short

Free shipping bar is a free Shopify section that tells shoppers how far they are from free shipping, such as "You're $23.00 away from free shipping", with a progress bar. It works out the amount from the cart total and the threshold you type, renders it with Liquid on page load and reads the cart again (/cart.js) whenever the theme adds, changes or clears items, so it follows a cart drawer. Thresholds can be set per currency for Shopify Markets. It only displays progress: the free shipping itself is a shipping rate or discount you set up in Shopify. It works in Online Store 2.0 themes without an app.

Demo with sample content

When to use it

A slim strip at the top of every page while a free shipping offer runs
A box above the cart items on the cart page
A line under the buy box on product pages, close to the add to cart button

In the theme editor

Free shipping threshold in the store currency, plus Currency threshold blocks for other currencies
Messages before the threshold ({remaining}, {threshold}), on success and for an empty cart
Show when the cart is empty, hide once free shipping is reached
Strip or box style, delivery icon, progress bar with a screen-reader name
Page or full width, alignment per device
Background color or gradient, text, progress, track and box colors
Top and bottom padding per device, show on desktop/mobile only, anchor ID, animated progress

Files

sections/lib-free-shipping-bar.liquid

Download

View the code

Open lib-free-shipping-bar.liquid

Written in plain Liquid and CSS with a small script. No app, no dependencies.

How to add it to your theme

Copy the section file into your theme’s sections folder, and any snippet it lists into snippets.
In the theme editor, choose Add section and pick the one that starts with “Lib ·”.
Replace the sample text with your store’s own, and set the colors to match your brand.

Questions

Does this section give customers free shipping?: No. It only shows progress towards the threshold you type. Set up the free shipping itself in Shopify: a free rate with a minimum order price under Settings > Shipping and delivery, or a free shipping discount under Discounts, using the same amount.
Which cart total does it use?: The cart total Shopify reports (total_price): after cart discounts, before shipping and taxes. If your shipping rate condition uses a different total, set the threshold so the two match.
Does it update when items are added in a cart drawer?: Yes. The script notices finished requests to Shopify's cart endpoints (add, change, update, clear) and the cart:updated events many themes send, then reads /cart.js again and updates the message and bar.
How does it handle other currencies?: Add a Currency threshold block with the currency code and an exact amount, for example EUR 70. Without one, the store's threshold is converted at Shopify's current rate, which can give an uneven number.
Can I hide it once free shipping is reached, or on an empty cart?: Yes, both are settings. The messages for an empty cart, progress and success are text you can change and translate, with {remaining} and {threshold} placeholders.

Before you publish

The text in the demos is sample content. Replace it with facts about your own store before you publish.
Animations are switched off for visitors who ask for reduced motion.
We check every file with Shopify Theme Check before publishing it here.

Need it adapted to your theme, or a section that isn’t here? See Shopify theme development.

Conversion and offers
Announcement bar
Slim bar with up to six messages that rotate with a fade or slide, optional arrows, icons, links and a close button that remembers each campaign.
Conversion and offers
Countdown banner
Sale or launch banner with a live countdown to a set date and time: bar, banner or split layout, background image per device and a chosen end state.
Conversion and offers
Newsletter popup
Email sign-up popup with an optional discount code that opens after a delay, on exit intent or on scroll, never on load. A small card on mobile; no app.