Unlock More Sales: Add a Dynamic Free Shipping Bar to Your Shopify Horizon Theme (No Reloads!)

Hey there, fellow store owners! Let's talk about something that can seriously boost your average order value and make your customers happier: a dynamic free shipping progress bar. You know the one – that little bar in the cart drawer that tells shoppers exactly how much more they need to spend to snag free shipping. It's a fantastic psychological nudge!

Recently, a store owner, veluxe1, brought up a common challenge in the Shopify community forum: getting this feature to work with the newer Horizon theme. They'd tried older tutorials, but the theme's structure had changed, making it tricky to find the right spots for the code. This is a super common scenario, and it sparked a great discussion among our community experts.

Why a Free Shipping Bar is a Must-Have

Before we dive into the how-to, let's quickly recap why this feature is so powerful:

• Boosts AOV: It encourages customers to add more items to their cart to reach the free shipping threshold.
• Reduces Cart Abandonment: Transparency about shipping costs and the path to free shipping can reduce last-minute surprises that lead to abandoned carts.
• Enhances User Experience: It's a helpful, interactive element that makes shopping more engaging.

Navigating the Horizon Theme Challenge

veluxe1's main pain point was that older YouTube tutorials just weren't cutting it for Horizon. As websensepro pointed out, Horizon uses a newer theme structure and cart-update approach. This means simply copying and pasting old code might not work, or worse, could break things silently.

The good news? The community rallied with a fantastic, clean custom code solution, and also highlighted some excellent app alternatives.

The Community-Approved Custom Code Solution

The star of the thread was a detailed custom code snippet shared by Ploqo, and then further elaborated upon by LDA2. What makes this solution so brilliant is that it leverages Horizon's native re-rendering of the cart, meaning the progress bar updates instantly without a full page reload or complex JavaScript.

Here’s how to implement it:

Step 1: Create a New Snippet for Your Free Shipping Bar

First, you'll create a new file in your theme code that holds the logic and styling for your progress bar.

1. Go to your Shopify Admin > Online Store > Themes.
2. Find your current theme (it should be Horizon) and click '...' (Actions) > 'Edit code'.
3. Under the 'Snippets' directory, click 'Add a new snippet'.
4. Name it free-shipping-bar (make sure to type it exactly like that).
5. Paste the following code into the new free-shipping-bar.liquid file, then click 'Save'.

Important: Change 100 on the third line (assign threshold = 100) to your desired free shipping amount.

{% comment %} Free shipping progress bar. Change 100 to your free-shipping amount. {% endcomment %}
{% liquid
  assign threshold = 100
  assign threshold_cents = threshold | times: 100
  assign current = cart.total_price
  assign remaining = threshold_cents | minus: current
  assign percent = 0
  if threshold_cents > 0
    assign percent = current | times: 100.0 | divided_by: threshold_cents
  endif
  if percent > 100
    assign percent = 100
  endif
%}
{%- if cart.item_count > 0 -%}
  

    

      {%- if remaining > 0 -%}
        You're {{ remaining | money }} away from free shipping
      {%- else -%}
        You've unlocked free shipping!
      {%- endif -%}
    
    

      

    
  
  
{%- endif -%}

Step 2: Show It in Your Cart Drawer and Page

Next, you'll tell your theme where to display this new snippet.

1. In the same 'Edit code' section, navigate to 'Snippets' > cart-products.liquid.
2. Locate the line {%- else -%}.
3. Right after that line, add this one line of code:

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

4. Click 'Save'.

That's it! This single file, cart-products.liquid, powers both your cart drawer and your full cart page, so the bar will appear in both places automatically.

Here's a look at the result in action:

Important Considerations and Customizations

• Recalculates Instantly: One of the best parts about this solution is that it recalculates the moment an item is added or removed from the cart, with no page reload needed. Horizon handles this beautifully by re-rendering the cart-products.liquid snippet.
• Currency: The amount shown will automatically adapt to your store's currency.
• Recolor the Bar: Want to match your brand? Just change the --fsb-fill: #1e8e3e; line in the