If you’re offering free shipping, you should let customers know it. Because most of them hate paying additional costs like shipping. A free shipping bar in Shopify is an excellent way to do that.
In this post, we’ll learn how you can add shipping bar to Shopify store.
But first, let’s clear some basics.
What is a Free Shipping Bar in Shopify?
Shopify free shipping bar is a message that lets customers know how much they need to purchase to get free shipping. It is also known as progressive free shipping bar because the message gets dynamically updated depending on the cart value.
For example, here’s what a Shopify progressive free shipping bar looks like.
The Shopify free shipping banner promotes the customers to buy more to save on shipping.
It is a proven technique to increase the average order value and get more sales.
Methods to Add Free Shipping Banner on Shopify
In Shopify, you have the following options to create a free shipping banner:
- Use Shopify apps
- Customize Shopify theme code
You can leverage Shopify apps to add a free shipping banner. There are plenty of them. And many are free too.
But if you just don’t wanna add one more app to your store, you can direclty customize the Shopify theme code. In this tutorial, we’ll learn how to add free shipping bar to Shopify without using any app. It requires you to have a bit understanding of coding.
How to Add Free Shipping Banner on Shopify?
In Shopify, you can code a new snippet for free shipping bar and add it to your theme.liquid file. Or you can directly add a free shipping bar liquid code to the header of the theme in customization settings.
Let’s see how to add free shipping bar liquid code to Shopify theme header.
Step 1: In Shopify admin, go to Sales Channels > Online Store > Themes. Click “Customize” button on the current theme.
The Shopify theme customization options will appear.
Step 2: Select the page to define the scope for Shopify free shipping bar and create a new section in its header.
This is the stage where you can choose where you want to add the free shipping bar.
For e.g.,
- Select “Home Page” to add free shipping bar to entire shopify store
- Select “Product Page” to add free shipping bar to Shopify products
- Select “Collection Page” to add free shipping bar to Shopify collections
Step 3: In the custom liquid section on the right side, add the following liquid 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 %}
Make sure to change the freeShippingThreshold value as per your needs. It is an internal value of price. (For e.g., Rs. 100 will be 10000.)
Now, scroll down and set the section padding (top and bottom.)
Expand the Custom CSS field and add the following code into it:
.free-shipping-container {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: #f7f7f7;
padding: 10px;
flex-direction: column; /* Added to make the text and progress bar stack vertically */
}
.free-shipping-text {
font-size: 18px;
margin-bottom: 10px; /* Added margin to create space between text and progress bar */
}
Click the “Save” button.
That’s it.
The Shopify free shipping bar will be added to the store. You can modify the liquid code or the CSS to change the appearance of the free Shipping bar.
Note: To avoid any inconvenience or bad experience to the store visitors, double-check the free shipping criteria before adding free shipping bar to the Shopify store.
More Learning Resources
Loved this tutorial on how to add a free shipping bar on Shopify? Check out our other guide to make your Shopify store more appealing. Here are some interested reads for you:
