Want customers to spend more without discounting? A free shipping progress bar is one of the highest-ROI tweaks in ecommerce — it shows shoppers exactly how close they are to free shipping, and most will add one more item to cross the line. The best part: you can add it with a few lines of Liquid, without installing another app or paying a monthly fee. Below are 6 ready-made design variations — pick the one that matches your store, paste it into a Custom Liquid section, and watch your average order value climb.

1. Fashion Store – Bold Pink Bar

Made for clothing and apparel stores — loud, energetic, impossible to miss. Shoppers chasing the latest drop will happily toss in an accessory to hit free shipping.

Preview

Sample: Cart total ₹450 of ₹999 — the bar fills live as items are added.

Liquid Code

{% comment %} LayoutKart - Free Shipping Bar (v1) {% endcomment %}
{% assign fs_threshold = 99900 %}
{% assign fs_pct = cart.total_price | times: 100.0 | divided_by: fs_threshold | round %}
{% if fs_pct > 100 %}{% assign fs_pct = 100 %}{% endif %}
<style>
.lk-fsb-v1{max-width:560px;margin:18px auto;padding:16px 18px;border-radius:14px;
background:#fff5f7;border:2px solid #ff4d6d;font-family:inherit;box-shadow:0 6px 18px rgba(0,0,0,.06);}
.lk-fsb-v1 .lk-msg{margin:0 0 10px;font-weight:600;color:#590d22;font-size:15px;}
.lk-fsb-v1 .lk-track{background:#ffe5ec;border-radius:99px;height:14px;overflow:hidden;}
.lk-fsb-v1 .lk-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#ff4d6d,#ff8fa3);transition:width .6s ease;}
.lk-fsb-v1 .lk-sub{margin:8px 0 0;font-size:12px;color:#800f2f;}
@media(max-width:600px){.lk-fsb-v1{padding:12px 14px;}}
</style>
<div class="lk-fsb-v1">
  {% if cart.total_price >= fs_threshold %}
    <p class="lk-msg">🎉 You've unlocked FREE shipping!</p>
  {% else %}
    <p class="lk-msg">You're so close — add just <strong>{{ fs_threshold | minus: cart.total_price | money }}</strong> more for FREE shipping</p>
  {% endif %}
  <div class="lk-track"><div class="lk-fill" style="width:{{ fs_pct }}%"></div></div>
  <p class="lk-sub">{{ fs_pct }}% of {{ fs_threshold | money }} reached</p>
</div>

2. Electronics – Sleek Dark Bar

A dark, techy bar for gadget stores where the average order is already high — a ₹4,999 threshold nudges buyers toward that extra cable or case.

Preview

Sample: Cart total ₹450 of ₹999 — the bar fills live as items are added.

Liquid Code

{% comment %} LayoutKart - Free Shipping Bar (v2) {% endcomment %}
{% assign fs_threshold = 499900 %}
{% assign fs_pct = cart.total_price | times: 100.0 | divided_by: fs_threshold | round %}
{% if fs_pct > 100 %}{% assign fs_pct = 100 %}{% endif %}
<style>
.lk-fsb-v2{max-width:560px;margin:18px auto;padding:16px 18px;border-radius:10px;
background:#101828;border:1px solid #344054;font-family:inherit;box-shadow:0 6px 18px rgba(0,0,0,.06);}
.lk-fsb-v2 .lk-msg{margin:0 0 10px;font-weight:600;color:#ffffff;font-size:15px;}
.lk-fsb-v2 .lk-track{background:#1d2939;border-radius:99px;height:10px;overflow:hidden;}
.lk-fsb-v1 .lk-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#12b76a,#0e9384);transition:width .6s ease;}
.lk-fsb-v2 .lk-sub{margin:8px 0 0;font-size:12px;color:#98a2b3;}
@media(max-width:600px){.lk-fsb-v2{padding:12px 14px;}}
</style>
<div class="lk-fsb-v2">
  {% if cart.total_price >= fs_threshold %}
    <p class="lk-msg">⚡ FREE express shipping unlocked!</p>
  {% else %}
    <p class="lk-msg">Add <strong>{{ fs_threshold | minus: cart.total_price | money }}</strong> more for FREE express shipping</p>
  {% endif %}
  <div class="lk-track"><div class="lk-fill" style="width:{{ fs_pct }}%"></div></div>
  <p class="lk-sub">{{ fs_pct }}% of {{ fs_threshold | money }} reached</p>
</div>

3. Grocery – Fresh Green Bar

Grocery carts fill fast — a low ₹499 threshold with fresh green styling turns weekly shoppers into slightly-bigger weekly shoppers.

Preview

Sample: Cart total ₹450 of ₹999 — the bar fills live as items are added.

Liquid Code

{% comment %} LayoutKart - Free Shipping Bar (v3) {% endcomment %}
{% assign fs_threshold = 49900 %}
{% assign fs_pct = cart.total_price | times: 100.0 | divided_by: fs_threshold | round %}
{% if fs_pct > 100 %}{% assign fs_pct = 100 %}{% endif %}
<style>
.lk-fsb-v3{max-width:560px;margin:18px auto;padding:16px 18px;border-radius:16px;
background:#f0fdf4;border:2px dashed #16a34a;font-family:inherit;box-shadow:0 6px 18px rgba(0,0,0,.06);}
.lk-fsb-v3 .lk-msg{margin:0 0 10px;font-weight:600;color:#14532d;font-size:15px;}
.lk-fsb-v3 .lk-track{background:#dcfce7;border-radius:99px;height:12px;overflow:hidden;}
.lk-fsb-v1 .lk-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#16a34a,#4ade80);transition:width .6s ease;}
.lk-fsb-v3 .lk-sub{margin:8px 0 0;font-size:12px;color:#166534;}
@media(max-width:600px){.lk-fsb-v3{padding:12px 14px;}}
</style>
<div class="lk-fsb-v3">
  {% if cart.total_price >= fs_threshold %}
    <p class="lk-msg">🌿 FREE delivery on your groceries!</p>
  {% else %}
    <p class="lk-msg">Just <strong>{{ fs_threshold | minus: cart.total_price | money }}</strong> away from FREE delivery</p>
  {% endif %}
  <div class="lk-track"><div class="lk-fill" style="width:{{ fs_pct }}%"></div></div>
  <p class="lk-sub">{{ fs_pct }}% of {{ fs_threshold | money }} reached</p>
</div>

4. Beauty – Pastel Rose Bar

Soft, elegant styling for cosmetics stores. Beauty buyers love bundles — this bar quietly suggests that one more lipstick.

Preview

Sample: Cart total ₹450 of ₹999 — the bar fills live as items are added.

Liquid Code

{% comment %} LayoutKart - Free Shipping Bar (v4) {% endcomment %}
{% assign fs_threshold = 79900 %}
{% assign fs_pct = cart.total_price | times: 100.0 | divided_by: fs_threshold | round %}
{% if fs_pct > 100 %}{% assign fs_pct = 100 %}{% endif %}
<style>
.lk-fsb-v4{max-width:560px;margin:18px auto;padding:16px 18px;border-radius:18px;
background:#fdf2f8;border:1px solid #f9a8d4;font-family:inherit;box-shadow:0 6px 18px rgba(0,0,0,.06);}
.lk-fsb-v4 .lk-msg{margin:0 0 10px;font-weight:600;color:#831843;font-size:15px;}
.lk-fsb-v4 .lk-track{background:#fce7f3;border-radius:99px;height:12px;overflow:hidden;}
.lk-fsb-v1 .lk-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#ec4899,#f9a8d4);transition:width .6s ease;}
.lk-fsb-v4 .lk-sub{margin:8px 0 0;font-size:12px;color:#9d174d;}
@media(max-width:600px){.lk-fsb-v4{padding:12px 14px;}}
</style>
<div class="lk-fsb-v4">
  {% if cart.total_price >= fs_threshold %}
    <p class="lk-msg">✨ FREE shipping unlocked, gorgeous!</p>
  {% else %}
    <p class="lk-msg">Add <strong>{{ fs_threshold | minus: cart.total_price | money }}</strong> more for FREE shipping</p>
  {% endif %}
  <div class="lk-track"><div class="lk-fill" style="width:{{ fs_pct }}%"></div></div>
  <p class="lk-sub">{{ fs_pct }}% of {{ fs_threshold | money }} reached</p>
</div>

5. Kids Store – Playful Rounded Bar

Chunky, rounded and cheerful — perfect for toy and kids’ apparel stores where parents are already buying in multiples.

Preview

Sample: Cart total ₹450 of ₹999 — the bar fills live as items are added.

Liquid Code

{% comment %} LayoutKart - Free Shipping Bar (v5) {% endcomment %}
{% assign fs_threshold = 69900 %}
{% assign fs_pct = cart.total_price | times: 100.0 | divided_by: fs_threshold | round %}
{% if fs_pct > 100 %}{% assign fs_pct = 100 %}{% endif %}
<style>
.lk-fsb-v5{max-width:560px;margin:18px auto;padding:16px 18px;border-radius:22px;
background:#fffbeb;border:3px solid #f59e0b;font-family:inherit;box-shadow:0 6px 18px rgba(0,0,0,.06);}
.lk-fsb-v5 .lk-msg{margin:0 0 10px;font-weight:600;color:#78350f;font-size:15px;}
.lk-fsb-v5 .lk-track{background:#fef3c7;border-radius:99px;height:16px;overflow:hidden;}
.lk-fsb-v1 .lk-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#f59e0b,#fbbf24);transition:width .6s ease;}
.lk-fsb-v5 .lk-sub{margin:8px 0 0;font-size:12px;color:#92400e;}
@media(max-width:600px){.lk-fsb-v5{padding:12px 14px;}}
</style>
<div class="lk-fsb-v5">
  {% if cart.total_price >= fs_threshold %}
    <p class="lk-msg">🎉 Yay! FREE shipping unlocked!</p>
  {% else %}
    <p class="lk-msg">Add <strong>{{ fs_threshold | minus: cart.total_price | money }}</strong> more for FREE shipping</p>
  {% endif %}
  <div class="lk-track"><div class="lk-fill" style="width:{{ fs_pct }}%"></div></div>
  <p class="lk-sub">{{ fs_pct }}% of {{ fs_threshold | money }} reached</p>
</div>

6. Minimal – Thin Underline Bar

For premium minimal brands — a whisper-thin bar that informs without shouting. Luxury shoppers notice details, not popups.

Preview

Sample: Cart total ₹450 of ₹999 — the bar fills live as items are added.

Liquid Code

{% comment %} LayoutKart - Free Shipping Bar (v6) {% endcomment %}
{% assign fs_threshold = 149900 %}
{% assign fs_pct = cart.total_price | times: 100.0 | divided_by: fs_threshold | round %}
{% if fs_pct > 100 %}{% assign fs_pct = 100 %}{% endif %}
<style>
.lk-fsb-v6{max-width:560px;margin:18px auto;padding:16px 18px;border-radius:4px;
background:transparent;border:none;font-family:inherit;box-shadow:0 6px 18px rgba(0,0,0,.06);}
.lk-fsb-v6 .lk-msg{margin:0 0 10px;font-weight:600;color:#111111;font-size:15px;}
.lk-fsb-v6 .lk-track{background:#eeeeee;border-radius:99px;height:3px;overflow:hidden;}
.lk-fsb-v6 .lk-fill{height:100%;border-radius:99px;background:#111111;transition:width .6s ease;}
.lk-fsb-v6 .lk-sub{margin:8px 0 0;font-size:12px;color:#666666;}
@media(max-width:600px){.lk-fsb-v6{padding:12px 14px;}}
</style>
<div class="lk-fsb-v6">
  {% if cart.total_price >= fs_threshold %}
    <p class="lk-msg">Complimentary shipping applied.</p>
  {% else %}
    <p class="lk-msg"> <strong>{{ fs_threshold | minus: cart.total_price | money }}</strong> away from complimentary shipping</p>
  {% endif %}
  <div class="lk-track"><div class="lk-fill" style="width:{{ fs_pct }}%"></div></div>
  <p class="lk-sub">{{ fs_pct }}% of {{ fs_threshold | money }} reached</p>
</div>

How to Add Free Shipping Progress Bar to Shopify

No app needed — this works with a free built-in Shopify feature called the Custom Liquid section. It takes about two minutes:

1. From your Shopify admin, go to Online Store → Themes.
2. Click Customize next to your live theme (works with Dawn and all Online Store 2.0 themes).
3. In the theme editor, use the top dropdown to navigate to your cart page (or product page for product-page effects).
4. In the left sidebar, click Add section → Custom liquid.
5. Delete the placeholder code, paste the code from your chosen variation above, and click Save.
6. Preview your store — the effect is live instantly. Drag the section up or down to reposition it.

Tip: Always duplicate your theme first (Themes → … → Duplicate) so you have a backup before editing.

Customize the Free Shipping Progress Bar

• Threshold: change fs_threshold (in paise/cents, so 99900 = ₹999) to match your free-shipping limit.
• Colors: edit the gradient and border colors to match your brand palette.
• Messages: rewrite the unlock and nudge texts in your brand voice.
• Placement: put it at the top of the cart page for maximum visibility, or inside the cart drawer.

More Shopify Code Sections

Keep customizing your store with these copy-paste tutorials:

• Shopify Cart Page Announcement Message
• Shopify Product Page Free Shipping Progress Bar
• Shopify Cart Drawer Custom Design with Liquid
• Shopify Cart Upsell Section (You May Also Like)
• Shopify Discount Code Copy Button
• Shopify Automatic Discount Code Display
• Shopify Sticky Add to Cart Bar
• Shopify ‘Frequently Bought Together’ Section
• Shopify Animated Sale Announcement Bar

Conclusion

A free shipping bar is small, but it works on pure psychology — nobody likes leaving money on the table. Pick the variation that fits your brand, paste it in, and set a threshold that protects your margins. Combine it with a cart upsell section and you have a quiet little revenue machine running on every single order.

Want a store that already has all of this built in? Check out LayoutKart’s readymade Shopify sections and templates — premium designs, clean Liquid code, ready to install.