FREE SHIPPING PROGRESS BAR SNIPPET
Copy the code below, then follow the 4 steps to install it.
{% comment %} FREE SHIPPING PROGRESS BAR {% endcomment %}
{% assign free_shipping_amount = 25 | times: 100 %}
{% assign cart_total = cart.total_price %}
{% assign remaining_amount = free_shipping_amount | minus: cart_total %}
{% assign progress_percent = cart_total | times: 100 | divided_by: free_shipping_amount %}
{% if progress_percent > 100 %}{% assign progress_percent = 100 %}{% endif %}
<div class="shipping-bar">
{% if cart_total >= free_shipping_amount %}
<p class="shipping-bar__message shipping-bar__message--qualified">
<h5>🎉 Your order qualifies for FREE U.S. Shipping!</h5>
</p>
{% else %}
<p class="shipping-bar__message">
<h5></p>Add <strong class="shipping-bar__amount">{{ remaining_amount | money }}</strong> more for <strong>Free U.S. Shipping</strong></h5>
</p>
{% endif %}
<div class="shipping-bar__track">
<div class="shipping-bar__fill" style="width: {{ progress_percent }}%;"></div>
</div>
</div>Installation Instructions
- Copy the code above.
- In your Shopify admin, go to Online Store > Themes > Edit code.
- Under "Templates" on the left sidebar, find your cart liquid file (usually "main-cart-items.liquid" or "cart.liquid").
- Paste the code where you want the bar to show and click "Save" near the top right of the page.
- That's it! You're done!
Tip: Change the 25 in the second line to whatever dollar amount triggers free shipping on your store.