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 😉