Free-shipping progress bar.

Q: What free-shipping threshold should I set?

A little above your usual order value, so one more item gets the buyer there. Set the same amount in your Shopify shipping rates.

Q: Where should the bar go?

On the cart page, above the checkout button. You can also add it to a product page.

Q: Does it give a discount?

No. It only shows how far the buyer is from free shipping. The free shipping itself comes from your Shopify shipping rates.

Q: Will it work with my theme?

It works on any Online Store 2.0 theme, including Dawn and its variants. Older themes need the code placed in the product template by hand.

A bar in the cart that shows how far the buyer is from free shipping, like “Add ₹201 more”. It nudges a bigger order without giving a discount.

The short answer

The free-shipping progress bar is a free Shopify section that shows how much more a buyer needs to add to get free shipping, with a bar that fills as the cart grows. One more item rides on the same shipping cost, so a bigger order carries freight better. Demo amounts are examples.

Who it’s for: Stores with a free-shipping threshold above their usual order value.
How it works: Set your threshold, add it to the cart page or a product page.

Live demo · your cart

Block-print cotton dupatta

Demo product · qty 2

₹399~~₹549~~

Free shipping

Add ₹201 more for free shipping

Cart ₹798Free at ₹999

Cart total₹798

Checkout

Demo only. Your threshold and words are set in the section settings.

sections/free-shipping-bar.liquidLiquid · CSS · JS

{% comment %} Free-shipping progress bar · thedwarkesh.com {% endcomment %}
{%- assign threshold = section.settings.threshold | times: 100 -%}
<div class="fsb" id="fsb-{{ section.id }}" data-threshold="{{ threshold }}" data-cart="{{ cart.total_price }}">
  <p class="fsb-msg" aria-live="polite"></p>
  <div class="fsb-track" role="progressbar" aria-valuemin="0" aria-valuemax="{{ threshold }}"><i></i></div>
  <p class="fsb-meta"><span>Cart <b data-fsb-cart></b></span><span>Free at <b>{{ threshold | money_without_trailing_zeros }}</b></span></p>
</div>

<style>
  #fsb-{{ section.id }} { margin:16px 0; font-size:14px; }
  #fsb-{{ section.id }} .fsb-msg { margin:0 0 8px; font-size:15px; }
  #fsb-{{ section.id }} .fsb-track { height:8px; border-radius:99px; background:rgba(0,0,0,.08); overflow:hidden; }
  #fsb-{{ section.id }} .fsb-track i { display:block; height:100%; width:0; border-radius:inherit; background:{{ section.settings.accent }}; transition:width .4s ease; }
  #fsb-{{ section.id }} .fsb-meta { display:flex; justify-content:space-between; margin:6px 0 0; opacity:.7; }

Full code is freeGet it with your WhatsApp and email

What it does

A goal, not a discount.

A buyer close to free shipping will often add one more item rather than pay for delivery. Show them the gap.

Shows

The rupee gap

“Add ₹201 more” is clearer than a percentage. The bar fills as the cart grows.

Updates

With the cart

On Dawn it refreshes when items change, without reloading the page.

Matches

Your real rate

It only shows the number. Set the same threshold in your Shopify shipping rates.

Install in 5 minutes

Three steps. No developer.

Add the file
Online Store → Themes → Edit code. In Sections, add free-shipping-bar.liquid and paste the code.
Place it
Open Customize on the cart page and add the section above the checkout button.
Set the threshold
Enter the same amount as your free-shipping rate in Settings → Shipping and delivery.

Questions

About this section

What free-shipping threshold should I set?

Where should the bar go?

Does it give a discount?

Will it work with my theme?

Rather click than paste?

This section and the rest come in the free section app. Add them from the theme editor, no code.

Install the section app All sections

Free-shipping progress bar.

Block-print cotton dupatta

Get the code