Free Shipping Bar Progress

Store Design
,
1

Hi, can anyone help me to create free shipping progress bar. The bar is at the top of the cart (not the entire sticky header). I did looking for the tutorial on youtube but im facing few problems because the change of Horizon version. Here’s the link btw : https://youtu.be/AGPawP3je1o?si=_4CkK-3KnLJybUKa

The bar kinda feature like this :

  • Compare to the threshold and fill the bar by the right percentage
  • Swap the message dynamically: “You’re $12 away from free shipping” → "You’ve unlocked free shipping! "
  • Recalculate the moment an item is added or removed, no page reload (it hooks into the cart update / section re-render event)
  • Format the remaining amount in your store currency
  • Sit cleanly at the top of the cart drawer and/or cart page
3

Hi @weluxe1weluxe1,

Yes, this is possible without an app.

I’d create the free shipping bar as a small block in the cart drawer, then recalculate it whenever the cart changes.

For example, if free shipping is at $100, it can show:

“You’re $12 away from free shipping!”

and once reached:

“You’ve unlocked free shipping!

I’d also keep the threshold in the theme settings so it’s easy to change later.

Hope that helps.

4

Can you help me if you dont mind?

5

Hi @veluxe1

Yes, this can be built with custom coding. Could you please let me know which Shopify theme you’re using? That will help me suggest the best implementation approach.

6

I use Horizon theme as mentioned in the post above.

7

Sure , happy to help. Could you share your current Horizon theme version and the code you’re currently using? If you’re getting any errors or the progress bar isn’t updating correctly, a screenshot of that would be helpful too. I’ll take a look and see what needs to be changed for the current Horizon structure.

8

Actually i already remove all the code for the that bar because it didnt work, i follow the tutorial from the youtube link i give above. And the reason is because the newer version of Horizon and i cant find where the exact place to put the code

10

Built and tested on Horizon.

Two edits. One new snippet, one line.

1. Add the snippet

  • Online Store > Themes > your theme > … > Edit code.
  • Under Snippets, click Add a new snippet, name it free-shipping-bar.
  • Paste this, then Save. Change 100 to your 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 -%}
  <div class="fsb">
    <p class="fsb__msg">
      {%- if remaining > 0 -%}
        You're <strong>{{ remaining | money }}</strong> away from free shipping
      {%- else -%}
        You've unlocked free shipping!
      {%- endif -%}
    </p>
    <div class="fsb__track">
      <div class="fsb__fill" style="width: {{ percent }}%;"></div>
    </div>
  </div>
  <style>
    .fsb {
      --fsb-fill: #1e8e3e;
      padding: 12px 4px 16px;
    }
    .fsb__msg {
      margin: 0 0 8px;
      font-size: 1.4rem;
      text-align: center;
    }
    .fsb__track {
      height: 8px;
      border-radius: 999px;
      background: rgb(var(--color-foreground-rgb) / 0.12);
      overflow: hidden;
    }
    .fsb__fill {
      height: 100%;
      border-radius: 999px;
      background: var(--fsb-fill);
      transition: width 0.35s ease;
    }
  </style>
{%- endif -%}

Create the free-shipping-bar snippet and paste the code
Create the free-shipping-bar snippet and paste the code3384×1570 498 KB

2. Show it in the cart

  • Open snippets > cart-products.liquid.
  • Right after the line {%- else -%}, add this one line, then Save:
{% render 'free-shipping-bar' %}

Add the one render line after {%- else -%} in cart-products.liquid
Add the one render line after {%- else -%} in cart-products.liquid3384×1570 465 KB

That single file powers both the cart drawer and the cart page.

Result

Cart drawer: how much more to spend for free shipping
Cart drawer: how much more to spend for free shipping979×1635 62.2 KB

Cart drawer: unlocked free shipping at the threshold
Cart drawer: unlocked free shipping at the threshold979×1635 78.8 KB

Notes

  • It recalculates the moment an item is added or removed, no reload. Horizon re-renders that snippet for you.
  • The amount shows in your store currency automatically.
  • Recolor the bar by changing --fsb-fill.
  • It counts the cart total after discounts. To count the subtotal instead, change cart.total_price to cart.items_subtotal_price.

Alternative : Free shipping bar apps like Hextom Free Shipping Bar, Essential Free Shipping Upsell, or Progressive Bar do the same job without touching the theme.

Regards,
Ploqo

12

Clean implementation — the fact that it recalculates without a page reload just by rendering inside cart-products.liquid is the right approach; a lot of free-shipping-bar tutorials out there wire this up with a JS fetch/polling loop that’s unnecessary overhead when Liquid re-render on cart update already handles it natively.

One thing worth flagging for anyone copying this: the exact snippet name (cart-products.liquid) and the {%- else -%} insertion point are specific to Horizon. Merchants on Dawn or a customized/older theme should confirm their cart drawer template’s actual file name and structure first — pasting this into the wrong file, or a file that doesn’t share Horizon’s block structure, will just silently do nothing rather than throw an obvious error, which fits the “silent issue” theme running through this whole board.

Also worth calling out your items_subtotal_price vs total_price note — that’s an easy one to get backwards. Using total_price (post-discount) means a merchant running a sitewide discount could see customers “unlock” free shipping faster than intended, which is usually fine, but for stores running high-value discount codes it’s worth deciding deliberately rather than defaulting to whichever the snippet ships with.