How to add a free shipping bar to Shopify

Before you add a bar

• The bar is only a message. Free shipping itself is a shipping rate or a discount in Shopify. Set that up first, or the bar promises something checkout won’t give.
• One amount everywhere. The bar, your announcement text, your emails and Shopify’s setting should all name the same threshold.
• Pick an amount you can afford. Every order that reaches it ships at your cost, so choose a threshold your margins can carry.
• Know what counts. For a free shipping discount, Shopify counts product prices toward the minimum, not taxes. Gift cards and store credit used to pay don’t count.
• Say what happens at the goal. When the cart gets there, the bar should say so plainly, and point to checkout.

Set up free shipping in Shopify

Shopify gives you two ways to offer free shipping over an amount. Use one, not both.

1. On a shipping rate, for every order over the amount

Best when free shipping over an amount is simply how your store works, all year.

1. Go to Settings → Shipping and delivery.
2. In Shipping profiles, click the profile you want to edit.
3. In Shipping zones, open the menu for the shipping option and click Edit shipping option.
4. Select Offer free shipping and enter the minimum order amount.
5. Click Done, then Save.

If you use order amount tiers, make sure they cover every total: Shopify notes that a highest tier with a maximum leaves larger orders without a rate at checkout.

2. As a free shipping discount, for a promotion

Best for a limited time, chosen countries or customers, or a code.

1. Go to Discounts → Create discount and choose Free shipping.
2. Under Method, choose Automatic discount (give it a title; shoppers see it in their cart and at checkout) or Discount code.
3. Under minimum requirements, choose Minimum purchase amount and enter your threshold.
4. Choose the countries, and set start and end dates for a promotion.
5. Click Save.

Shopify’s Help Center has the details: Setting up shipping rates and Free shipping discounts.

Three ways to show the progress

1. A line in your announcement bar

Most themes have an announcement bar. “Free shipping on orders over $75” costs nothing and is seen on arrival. But it says the same thing to everyone: it doesn’t know what’s in the cart.

2. A free shipping bar app

These add a bar across the top of the page, or inside the cart, that counts down as the cart fills. A bar at the top either pushes the page down or sits over it.

3. Inside a drawer shoppers open

The progress sits in a slide-out drawer with the rest of your offers: the sale, the code, the products. A button waits at the edge of every page, and nothing covers the page until a shopper taps it. This is how Promo Drawer works.

The trade: shoppers see their progress when they open the drawer, not on every page. You can keep the one-line announcement too, so the threshold is visible on arrival.

	Announcement line	Bar app	In a drawer
Knows the cart	No	Yes	Yes
Covers the page	No	A top bar can	No
Seen on arrival	Yes	Yes	When the drawer opens
More than one goal	No	Depends on the app	Up to three on one bar

Add a free shipping bar with Promo Drawer

Install Promo Drawer from the Shopify App Store and turn on its app embed in your theme editor; Getting started walks through both. Then:

1. Set up free shipping in Shopify. A rate or a discount, as above. Promo Drawer only shows the progress; the free shipping itself is Shopify’s.
2. Add a free shipping card to a drawer and pick a layout. There are four: Bar; Big amount, which sets the amount large in the line of your message; Milestones, with up to three goals on one bar; and Ring.
3. Enter the same amount as your threshold, in your store’s currency. The card updates as shoppers add to their cart.
4. Write the three messages. One for an empty cart, one on the way, and one for when the goal is reached. Bar, Big amount and Ring take a subheading too.
5. Decide what happens once it’s reached. The button can go to checkout or the cart, or the card can hide.
6. Show it on the right pages and dates. For a free shipping promotion, give the drawer the same start and end as your discount, and choose its page types, URLs or devices. See Targeting and scheduling.

Or ask Shopify’s Sidekick: “Make me a drawer with a free shipping card for orders over $75.” It builds the drawer for you to review and save. See Sidekick.

The free shipping card, schedules and page targeting are on Basic and Pro, each with a 30-day free trial. The Free plan has announcement, image and follow cards on your home page.

Ways to use it

• Year-round free shipping. A rate with a minimum, and a card that shows each shopper how close they are.
• A holiday promotion. A lower threshold for a few weeks, as a free shipping discount with dates, in a drawer scheduled to match. The Black Friday checklist has the rest of the season’s steps.
• Steps beyond free shipping. Milestones put up to three goals on one bar, say free shipping, then a gift, then a discount, each set up in Shopify.
• Next to a code. A discount code card in the same drawer, applied in one tap. See How to auto-apply a discount code on Shopify.

Questions merchants ask

Does Promo Drawer give free shipping?

No. It shows progress toward the free shipping you set up in Shopify, as a shipping rate or a free shipping discount. Without one of those, checkout charges shipping whatever the card says.

Does the bar update when a shopper adds to their cart?

Yes. The card shows how far the cart is from your amount and updates as the shopper adds to it.

Can I show more than one goal?

Yes. The Milestones layout shows up to three goals on one bar. Each reward still has to be set up in Shopify.

Can I show it only on some pages?

Yes. On Basic and Pro, a drawer can show on chosen page types, URLs or devices.

Will a free shipping bar slow down my store?

Any app adds some code to your pages. Promo Drawer’s script and stylesheet load after your page, and each card type is its own small file, so a drawer without a free shipping card loads none of its code. See Speed and your storefront.