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.
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.
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:
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 😉