Schedule a Call
by Ha Nguyen0 CommentsShopify

If you’re offering free shipping, it’s important to let your customers know. Most shoppers dislike paying extra fees like shipping costs, so clearly communicating that you offer free delivery can significantly improve conversions.

One of the best ways to do this is by adding a free shipping bar to your Shopify store.

In this guide, you’ll learn how to add a free shipping bar in Shopify — easily and effectively.

What Is a Free Shipping Bar in Shopify?

A Shopify free shipping bar is a dynamic message displayed on your store that shows customers how much more they need to spend to qualify for free shipping.

It’s often called a progressive free shipping bar because it automatically updates as the customer adds items to their cart.

For example, a free shipping bar might say:

“You’re only $10 away from free shipping!”

Once the order meets the threshold, it changes to:

“Congratulations! You’ve unlocked free shipping!”

This visual progress motivates customers to add more products to their cart — a proven way to increase average order value (AOV) and boost overall sales.

Methods to Add a Free Shipping Bar on Shopify

There are two main ways to create a free shipping bar in Shopify:

  1. Using Shopify Apps

  2. Customizing the Theme Code

You can easily install a free shipping bar app from the Shopify App Store — there are many free and paid options available.

However, if you prefer not to use additional apps, you can add a free shipping bar manually by editing your theme code.

In this tutorial, we’ll show you how to add a free shipping bar in Shopify without using any apps.
(Note: This method requires basic knowledge of Liquid and CSS.)

How to Add a Free Shipping Bar on Shopify (Step-by-Step)

You can either create a new snippet and include it in your theme files, or simply add the Liquid code directly to your theme’s header using the customization panel.

Here’s how to do it:

Step 1: Go to Your Theme Customization Panel

  1. In your Shopify Admin, navigate to
    Sales Channels → Online Store → Themes.

  2. Click the Customize button next to your current theme.

You’ll now see the Shopify theme customization dashboard.

Step 2: Select the Page and Create a New Section

Choose where you want the free shipping bar to appear by selecting the appropriate page.
For example:

  • Home Page – to show the bar across your entire store

  • Product Page – to show it only on product pages

  • Collection Page – to display it on collection listings

Then, add a new Custom Liquid section in the header area of the page.

Step 3: Add the Free Shipping Liquid Code

In the Custom Liquid section, paste the following code:

{% assign freeShippingThreshold = 10000 %}

{% if cart.items.size == 0 %}
Get free shipping on orders above Rs. 100!
{% endif %}

{% if cart.items.size != 0 %}
{% if cart.total_price >= freeShippingThreshold %}
You’ve got free shipping 👌
{% elsif cart.total_price < freeShippingThreshold %}
You’re only {{ freeShippingThreshold | minus: cart.total_price | money }} away from free shipping.
{% endif %}
{% endif %}

👉 Note:
Update the freeShippingThreshold value according to your needs.
For example, Rs. 100 = 10000 (Shopify uses price values in cents).

Step 4: Customize the Design with CSS

Scroll down and find the Custom CSS section, then paste the following code:

.free-shipping-container {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: #f7f7f7;
padding: 10px;
flex-direction: column;
}.free-shipping-text {
font-size: 18px;
margin-bottom: 10px;
}

You can adjust the colors, font sizes, and padding to match your store’s branding.

Step 5: Save and Test

Click Save to apply the changes.

Now, visit your store and test the bar:

  • When the cart is empty, it should show your base message.

  • When items are added but below the threshold, it should show how much more is needed.

  • When the threshold is reached, it should display the success message.

If everything looks correct, congratulations — your Shopify Free Shipping Bar is live!

Tips for Using a Free Shipping Bar Effectively

  • Double-check your free shipping conditions before launching to ensure accuracy.

  • Use attractive colors (like green or blue) to make the bar stand out.

  • Place it at the top of the page for maximum visibility.

  • Keep the message short and clear.
    Example: “Free Shipping on Orders Over $100 – You’re Only $15 Away!”

  • Test on mobile devices to ensure it displays correctly everywhere.

Final Thoughts

Adding a Free Shipping Bar to your Shopify store is a simple but powerful way to improve user experience and encourage higher spending.

Whether you use an app or customize your theme manually, the goal is the same — motivate customers to add more to their carts and boost your store’s revenue.

Once set up, you can tweak the text, design, or threshold anytime to match your marketing campaigns.

✅ Summary:

  • No extra apps needed

  • Simple Liquid + CSS setup

  • Increases conversion and average order value

  • Fully customizable to your brand

Leave A Comment

Your email address will not be published. Required fields are marked *