Add a free shipping progress bar to Shopify stores with one line of code

 I decided I’m going to try sharing little hacks I’ve learned throughout my journey (I’m now on my Shopify business)—things I make sure I do during the Shopify and business setup process.

One of them I discovered this time around is there is a <progress> HTML tag! So this makes it dead simple for anyone to add a motivating, average order value increasing, and simple free shipping progress bar.

Before we get into it, you may be wondering… why do progress bars even work? It all has to do with a psychological phenomenon called “The Need to Complete”. Spindogs explains that research has consistently found that certain neurotransmitters are released when we complete a task. Over time our bodies have subconsciously learned that completing tasks makes us feel good.

Step 1: Find your cart.liquid file in your theme

Visit your Online Store > Themes page in Shopify. On your theme, click “Actions” and then “Edit code”. In the search bar on your left, search for “cart.liquid” and that’s the file you likely need to edit. For some themes this may be different (like if you have a cart drawer or sticky cart).

Step 2: Add the code below under the </header> tag

Below the </header> closing tag, paste the following code: 

$0 <progress max="10000" value="{{ cart.total_price }}"></progress> $100

Step 3: Customize the values to match your free shipping threshold.

My free shipping threshold is at $100. If yours is different, customize the "10000" and "$100" value to match yours. For example, a $250 threshold would be “25000” and “$250”.

Step 4: Add and edit the dynamic messaging below the progress bar

For the dynamic messaging below the progress bar, you can use liquid control flow tags (they are amazing and don't get enough attention). Edit the "10000" value below in the same way you did it in Step 3.

<br>{% if cart.items.size == 0 %}Add items to your cart to receive free shipping.{% endif %}{% if cart.items.size != 0 %}{% if cart.total_price >= 10000 %} You've got free shipping 👌{% elsif cart.total_price < 10000 %}You're only {{ 10000 | minus: cart.total_price | money }} away from free shipping.{% endif %}{% endif %}

That’s it! You may need to do some small tweaking (like sizing or alignment), but it’s as simple as that. Good luck and let me know if you have any questions.