by Ha Nguyen 31 October, 2025 0 Comments Shopify FAQs

Did you know that offering free shipping can increase your conversion rate by more than 20%?
But here’s the catch: if customers don’t know you offer free shipping, it won’t make any difference.

That’s where a free shipping bar comes in.

A free shipping bar is a small banner — usually at the top of your Shopify store — that tells shoppers about your free shipping offer. It can even show progress messages like “You’re $10 away from Free Shipping!”

In this guide, you’ll learn how to add free shipping bar on Shopify step by step — whether you use a built-in theme feature, a free app, or custom code.

Method 1: Use a Shopify App (Easiest Way)

The fastest and most flexible way to add a free shipping bar on Shopify is through a third-party app. These apps handle design, logic, and display automatically.

🧩 Best Free Shipping Bar Apps for Shopify

App Name	Key Features	Free Plan
Free Shipping Bar by Hextom	Dynamic messages, progress tracking, geo-targeting	✅ Yes
Essential Announcement Bar	Countdown timer, multi-banner support	✅ Yes
Sales Banner by POWR	Rotating banner messages, custom links	✅ Yes
Quick Announcement Bar by Hextom	Lightweight, easy to use, scheduled messages	✅ Yes

Let’s go through the setup using the most popular one: Free Shipping Bar by Hextom.

Step-by-Step: How to Add Free Shipping Bar Using Hextom App

Step 1: Install the App

Go to the Shopify App Store → Free Shipping Bar by Hextom.
Click Add app and complete installation.

Step 2: Open the App

In your Shopify admin panel, go to Apps → Free Shipping Bar.

Step 3: Set Your Shipping Goal

Example:

Minimum purchase: $50
Message 1: “Free shipping for orders over $50!”
Message 2: “You’re only $10 away from free shipping!”
Message 3: “🎉 You got free shipping!”

Step 4: Customize the Design

Choose bar color and text color to match your theme.
Add emojis (🎁, 🚚, 💥) to make it more engaging.
Adjust font size and position (top or bottom of the page).

Step 5: Enable Geo-Targeting (Optional)

You can set different messages based on customer location, e.g.:

“Free Shipping in the U.S.”
“Low-cost shipping worldwide.”

Step 6: Save and Preview

Click Save, then check your store.
The banner will appear instantly — responsive on both desktop and mobile.

✅ Done! You now have a professional, dynamic free shipping bar live on your Shopify store.

Method 2: Add a Free Shipping Bar Using Shopify’s Built-In Announcement Feature

If you prefer not to install an app, you can use Shopify’s default Announcement Bar.

Step 1: Access Theme Editor

From your Shopify Admin, go to Online Store → Themes.
Click Customize on your active theme.

Step 2: Add an Announcement Bar

In the sidebar, look for Header → Announcement bar (some themes name it “Top Banner”).
Click Add Section → Announcement bar if it doesn’t exist.

Step 3: Write Your Message

Add text like:

“🚚 Free Shipping on Orders Over $50!”

You can link it to your “Shipping Policy” or “Shop Now” page.

Step 4: Customize Design

Change colors, fonts, and spacing.
Make sure it’s visible and readable on mobile devices.

Step 5: Save Changes

Click Save and preview your store.

⚙️ This method is great for a static banner, but it won’t dynamically update cart progress.

Method 3: Add a Custom Free Shipping Bar with Code (Advanced Option)

If you’re comfortable editing your theme code, you can create a free shipping bar manually without any app.

Step 1: Edit Theme Code

Go to Online Store → Themes → Edit code.

Step 2: Insert HTML

In theme.liquid (right after the <body> tag), paste:

Step 3: Add CSS Styling

In your base.css or theme.css file, add:

Step 4: Optional – Show Only on Homepage

This gives you full design control, but requires basic HTML/CSS knowledge.

Adding a free shipping bar on Shopify is one of the simplest and most effective ways to boost sales, improve customer experience, and build brand trust.

To recap:

Use Hextom’s Free Shipping Bar App for a dynamic solution.
Use Shopify’s Announcement Bar for a quick, built-in option.
Use custom code if you prefer full design control.

Whichever method you choose, make sure your banner:

Is visible on all pages
Matches your brand style
Delivers a clear message

Now that you know how to add free shipping bar on Shopify, go ahead and set it up today — and watch your conversion rate climb! 🚀