Installation

Free Shipping Bar shows shoppers how much more they need to add to their cart to get free shipping, using the goal that actually applies to their country. Setup is short: install the app and turn on one app embed in your theme. That single embed gives you an announcement-style bar at the top of the page, a compact progress bar in your cart drawer and cart page, and a nudge above the buy buttons on product pages. There is nothing to type in — the app reads your free shipping goals from your Shopify shipping settings.

Install the App

Install Free Shipping Bar from the Shopify App Store. As soon as the app opens it reads your shipping zones and automatic free-shipping discounts and works out the free shipping goal for every country you ship to. You'll land on the dashboard, where the Shipping goals card already lists what was found — for example "United States: over $50", "Canada: always", "Rest of world: none".

If a goal looks wrong, don't worry about it yet. Finish the theme step first, then see Shipping Goals for what the app looks for and how to fix it in your shipping settings.

Turn On the App Embed in Your Theme

Everything the app shows on your storefront comes from one theme app embed. It only appears once you switch it on, and the setup guide on the dashboard takes you straight there:

• Choose your theme — Select the theme your customers currently see. To test on an unpublished theme first, pick that one instead.
• Enable the app embed — Click the button in the setup guide. Your theme editor opens with the Free Shipping Bar embed ready to activate. Turn it on and click Save.

The app checks your theme automatically and ticks the step off. You now have, on every plan:

• The top bar — An announcement across the top of the page (or the bottom, if you prefer) while the cart is empty. Once the cart has items it slides in for a few seconds on each page and after each cart change with the updated progress, then hides again, so it never crowds the page. You can switch it to stay on screen permanently under Settings > Bar behaviour > Top bar.
• The cart bar — A compact progress bar inside your cart drawer and in the totals area of the cart page. Dawn, Horizon and the themes built on them are recognised automatically; other themes may need the Custom CSS selector setting described in Top Bar, Product & Cart Bars.
• The product page nudge — A line above the buy buttons telling the shopper whether adding this item unlocks free shipping.

The cart and product bars can each be switched off in the embed's settings (Show in the cart and cart drawer and Show on product pages set to Off), so you can start with the top bar alone if you like.

Add the Theme Blocks (Optional)

The embed places the cart and product bars where most themes expect them. If you want them somewhere specific — under a particular section, in a custom cart layout, above the product description — the app also ships two theme app blocks you position yourself:

• Product page block — Drop it into any product template section.
• Cart block — Drop it into the cart page or an app-block-capable cart drawer.

Open Settings > Extensions and click Set up in Shopify next to the block you want; the theme editor opens on the right template with the block ready to place. Position it and click Save. As soon as a block is on a page, the embed stops adding its own bar there, so you never see two.

Check It on Your Storefront

Open your store in a private browser window so nothing is cached:

• With an empty cart — The top bar shows the announcement, for example "Free shipping on orders over $50". If you ship free everywhere it says "Free shipping on every order". If your theme has its own announcement bar switched on, the app's bar stays out of its way and you won't see it yet — that is the default Skip the announcement when your theme already shows one setting at work.
• Open a product — Above the buy buttons you'll see "Add this item to unlock free shipping" or how far away the shopper would be.
• Add something to the cart — The top bar slides in with "Add $X more to unlock free shipping" and hides again after a few seconds; the cart drawer shows the same progress and keeps it on screen.
• Open another page — With items in the cart, the top bar slides in again for a few seconds on each page with the current progress, then hides.
• Pass the goal — Every bar switches to "You've unlocked free shipping!" with a short celebration; the top bar slides in once more to say so.

The goal you see is the one for the country you are browsing from. Merchants outside their main shipping zone sometimes see a different amount than they expected, or a message that free shipping is not available for their country — that is the app doing its job. See Country Detection & Currencies for how to check another country.

If Something Is Not Showing

• Nothing at all — Open the theme editor, click App embeds in the left sidebar and make sure Free Shipping Bar is switched on for the published theme. Then check the Enabled switch under Settings > Bar behaviour in the app.
• The top bar doesn't show while the cart is empty — That is dynamic mode with your theme's own announcement bar visible: the empty-cart announcement is skipped so the two don't stack. Once the cart has items, the bar still appears for a few seconds on each page and after each cart change. To show the empty-cart announcement too, turn off your theme's announcement bar, untick Skip the announcement when your theme already shows one, or set When the top bar shows to Always under Settings > Bar behaviour > Top bar.
• The top bar disappears after a few seconds — That is dynamic mode working as designed. Raise Seconds to show on each page and after a cart change, or choose Always if you want a fixed bar.
• The top bar shows but not the cart or product bar — In the embed's settings, check Show in the cart and cart drawer and Show on product pages are set to Automatically. If your theme isn't one the app recognises, set the Custom CSS selector for the cart, or use the theme blocks instead.
• The shopper's country has no free shipping and the bar is set to hide — Under Settings > Bar behaviour, When free shipping isn't available is set to hide the bar. Switch it to show a message if you'd rather always show something.
• A schedule is active — On Premium, a schedule window outside today hides everything. Check Settings > Bar behaviour > Schedule.
• You're looking at a different theme — In Shopify, go to Online Store > Themes and confirm the embed is enabled on the theme marked Current theme.