Offering free shipping is a proven way to increase conversions and boost average order value. But customers often abandon their carts simply because they don’t realize how close they are to qualifying.

In this guide, you’ll learn how to add a dynamic Free Shipping Progress Bar to your cart page using only Liquid — no third-party app required.
It’s a lightweight customization that takes minutes to set up and delivers an instant lift in engagement.

Why Add a Free Shipping Bar?

A simple progress bar can have a big impact on your sales performance. It:

• Encourages higher spending by showing how close shoppers are to free shipping

• Reduces cart abandonment with a clear, motivating message

• Improves user experience through real-time visual feedback

Let’s walk through the code demonstration for adding this feature to your Shopify Horizon theme.

Step 1: Create a New Snippet

1. In your Shopify admin, go to Online Store → Themes → ... → Edit code.

2. Under Snippets, click Add a new snippet and name it:

free-shipping-bar.liquid

Step 2: Add the Code

Paste the following Liquid code into your new snippet.
This snippet calculates how much more your customer needs to spend to unlock free shipping and displays a visual progress bar.

{% assign threshold = 50000 %} {% comment %}$100.00 = 10000 cents {% endcomment %}
{% assign total = cart.total_price %}
{% assign remaining = threshold | minus: total %}

<div id="free-shipping-bar" style="margin: 20px 0; padding: 15px; border-radius: 8px; background-color: #f2f2f2; text-align: center;">
  {% if total >= threshold %}
    <p style="font-weight: bold; color: green;">🎉 You’ve qualified for FREE shipping!</p>
  {% else %}
    <p style="font-weight: bold;">
      🚚 You are <span style="color: red;">{{ remaining | money_without_trailing_zeros }}</span> away from FREE shipping!
    </p>
    <div style="background-color: #ddd; height: 10px; border-radius: 5px; overflow: hidden; margin-top: 10px;">
      <div style="background-color: #28a745; width: {{ total | times: 100 | divided_by: threshold }}%; height: 100%;"></div>
    </div>
  {% endif %}
</div>
Copy

💡Tip: Set your own free shipping threshold by changing the number. For example, use 50000 for $500.00.

Step 3: Include the Snippet in Your Cart Page

Next, display the progress bar on your cart page.

1. In the code editor, open cart.liquid, main-cart.liquid, or cart-drawer.liquid (depending on your theme).

2. Choose where you want the bar to appear — most stores place it above the cart total or below the product list.

   

3. Add the following line at that spot:

{% render 'free-shipping-bar' %} Copy

Step 4: Save and Preview

1. Click Save in the code editor.

2. Open your cart page in the storefront.

3. Add or remove items to see how the progress bar updates automatically.

When the total is below your threshold, it shows how much more the customer needs to spend.
Once they qualify, the bar turns into a success message — a subtle cue that helps drive higher order values.

Optional: Customize the Style

To match your store’s branding, move the inline styles into theme.css or base.css, and use class names instead.
This gives you full control over colors, fonts, and animations, keeping your design consistent and professional.

With just a few lines of Liquid code — no app installation needed — you’ve added a visual motivator that helps customers reach your free shipping goal.
It’s a small, smart customization that can significantly improve your conversion rate.