We will see in this tutorial how to create a Free shipping bar that will calculate the amount left before free shipping!

Here are the variables that you need to change in order to customize the header bar.

{% assign gd_text_before_price = " Only " %}
{% assign free_shipping = 60 %}
{% assign gd_text_after_price = " to go before FREE shipping " %}
{% assign gd_text_free_shipping = " You have free shipping " %}

Don’t forget to change the price according to your shipping settings, it is currently set to 60.

Don’t forget to create your shipping rules in order to create a free shipping option for your customers from the amount you will indicate in the variable: free_shipping

I also recommend to make a backup of your theme before any modification (online store – actions – duplicate)

The CSS code

Go to Online store – actions – edit code – assets 

Find your xxxx.scss.liquid file

It is usually named theme.scss.liquid, timber.scss.liquid, default.scss.liquid, or style.scss.liquid.

Copy/Paste the code below at the very bottom of the file:

If you want to change the colors you will have to change the: “ffffff” (white text) and “ff6600” (orange background).

If you don’t want this bar to be on top of your header, you can remove the “position:absolute;” property.

.gd-free-shipping-bar{background-color:#ff6600;text-align:center;width:100%;display:block;padding:15px 10px;margin:0 auto 5px;}
.gd-free-shipping-bar p, .gd-free-shipping-bar-on {color:#ffffff;}

The HTML code

This is the part where you will place your shipping bar on your header

Go to Online store – actions – edit code – sections – header.liquid

Copy/paste the code below at the top of the file:

{% comment %} 
Customization
Change the variables below to customize your shipping bar
{% endcomment %}

{% assign gd_text_before_price = " Only " %}
{% assign free_shipping = 60 %}
{% assign gd_text_after_price = " to go before FREE shipping " %}
{% assign gd_text_free_shipping = " You have free shipping " %}

{% comment %} 
End of the customizable zone
{% endcomment %}

{% assign shipping_price_before = free_shipping | times: 100.0 | minus: cart.total_price %}
<div class="gd-free-shipping-bar {% if shipping_price_before > 0 %}{% endif %}">
{% if shipping_price_before > 0 %} 
<p>{{ gd_text_before_price }} <strong class="gd-free-shipping-bar-number">{{shipping_price_before | money }}</strong> {{ gd_text_after_price }} </p>
{% else %}
<span class="gd-free-shipping-bar-on">{{ gd_text_free_shipping }}</span>
{% endif %}
</div>

Disclaimer: the system works only with a cart page!

This tutorial is also available in video format

Hope you found this tutorial helpful !

You have any ideas for new tutorials ? Any questions about this one ? Leave me a comment 😉