Free shipping is the #1 purchase motivator online — and a progress bar showing ‘just ₹350 more!’ is the nudge that lifts average order value. This bar reads the real cart total with Liquid and fills automatically. Six themed designs below, all working in a Custom Liquid section with no app.

1. Grocery Store – Fresh Progress Bar

Green natural bar for grocery free-shipping goals.

Preview

Sample: bar fills automatically from the real cart total via Liquid.

Liquid Code

{% assign ship_limit = 49900 %}
{% assign remaining = ship_limit | minus: cart.total_price %}
<div class="lk-ship" style="font-family:Verdana, sans-serif;">
  {% if remaining > 0 %}
    <p style="margin:0 0 8px;font-size:14px;">🛒 Add <strong>{{ remaining | money }}</strong> more for <strong>FREE shipping!</strong></p>
  {% else %}
    <p style="margin:0 0 8px;font-size:14px;">🎉 <strong>You've unlocked FREE shipping!</strong></p>
  {% endif %}
  <div style="background:#d7e8c8;border-radius:99px;height:10px;overflow:hidden;">
    <div style="background:#2e7d32;height:100%;border-radius:99px;transition:width .5s;
      width: {{ cart.total_price | times: 100.0 | divided_by: ship_limit | at_most: 100 | round }}%;"></div>
  </div>
</div>
<style>
.lk-ship { background:#f2f9ec; border-radius:10px; padding:14px 16px; margin:14px 0; color:#1b4d1e; }
</style>

2. Fashion Store – Chic Progress Bar

Blush elegant bar for apparel stores.

Preview

Sample: bar fills automatically from the real cart total via Liquid.

Liquid Code

{% assign ship_limit = 99900 %}
{% assign remaining = ship_limit | minus: cart.total_price %}
<div class="lk-ship" style="font-family:Georgia, serif;">
  {% if remaining > 0 %}
    <p style="margin:0 0 8px;font-size:14px;">🛒 Add <strong>{{ remaining | money }}</strong> more for <strong>FREE shipping!</strong></p>
  {% else %}
    <p style="margin:0 0 8px;font-size:14px;">🎉 <strong>You've unlocked FREE shipping!</strong></p>
  {% endif %}
  <div style="background:#f3dcdc;border-radius:99px;height:10px;overflow:hidden;">
    <div style="background:#b76e79;height:100%;border-radius:99px;transition:width .5s;
      width: {{ cart.total_price | times: 100.0 | divided_by: ship_limit | at_most: 100 | round }}%;"></div>
  </div>
</div>
<style>
.lk-ship { background:#fdf6f4; border-radius:14px; padding:14px 16px; margin:14px 0; color:#5c3a42; }
</style>

3. Beauty Store – Glow Progress Bar

Pink gradient bar for cosmetics.

Preview

Sample: bar fills automatically from the real cart total via Liquid.

Liquid Code

{% assign ship_limit = 79900 %}
{% assign remaining = ship_limit | minus: cart.total_price %}
<div class="lk-ship" style="font-family:'Trebuchet MS', sans-serif;">
  {% if remaining > 0 %}
    <p style="margin:0 0 8px;font-size:14px;">🛒 Add <strong>{{ remaining | money }}</strong> more for <strong>FREE shipping!</strong></p>
  {% else %}
    <p style="margin:0 0 8px;font-size:14px;">🎉 <strong>You've unlocked FREE shipping!</strong></p>
  {% endif %}
  <div style="background:#fbd3e8;border-radius:99px;height:10px;overflow:hidden;">
    <div style="background:#ec4899;height:100%;border-radius:99px;transition:width .5s;
      width: {{ cart.total_price | times: 100.0 | divided_by: ship_limit | at_most: 100 | round }}%;"></div>
  </div>
</div>
<style>
.lk-ship { background:#fdf2f7; border-radius:16px; padding:14px 16px; margin:14px 0; color:#6d2d4d; }
</style>

4. Electronics Store – Power Progress Bar

Dark tech bar with cyan fill.

Preview

Sample: bar fills automatically from the real cart total via Liquid.

Liquid Code

{% assign ship_limit = 199900 %}
{% assign remaining = ship_limit | minus: cart.total_price %}
<div class="lk-ship" style="font-family:'Segoe UI', sans-serif;">
  {% if remaining > 0 %}
    <p style="margin:0 0 8px;font-size:14px;">🛒 Add <strong>{{ remaining | money }}</strong> more for <strong>FREE shipping!</strong></p>
  {% else %}
    <p style="margin:0 0 8px;font-size:14px;">🎉 <strong>You've unlocked FREE shipping!</strong></p>
  {% endif %}
  <div style="background:#1e2f47;border-radius:99px;height:10px;overflow:hidden;">
    <div style="background:#00e5ff;height:100%;border-radius:99px;transition:width .5s;
      width: {{ cart.total_price | times: 100.0 | divided_by: ship_limit | at_most: 100 | round }}%;"></div>
  </div>
</div>
<style>
.lk-ship { background:#0b1c2c; border-radius:8px; padding:14px 16px; margin:14px 0; color:#ffffff; }
</style>

5. Kids Store – Fun Progress Bar

Cheerful yellow-blue bar for kids products.

Preview

Sample: bar fills automatically from the real cart total via Liquid.

Liquid Code

{% assign ship_limit = 69900 %}
{% assign remaining = ship_limit | minus: cart.total_price %}
<div class="lk-ship" style="font-family:'Comic Sans MS', cursive, sans-serif;">
  {% if remaining > 0 %}
    <p style="margin:0 0 8px;font-size:14px;">🛒 Add <strong>{{ remaining | money }}</strong> more for <strong>FREE shipping!</strong></p>
  {% else %}
    <p style="margin:0 0 8px;font-size:14px;">🎉 <strong>You've unlocked FREE shipping!</strong></p>
  {% endif %}
  <div style="background:#ffe9a8;border-radius:99px;height:10px;overflow:hidden;">
    <div style="background:#ffb703;height:100%;border-radius:99px;transition:width .5s;
      width: {{ cart.total_price | times: 100.0 | divided_by: ship_limit | at_most: 100 | round }}%;"></div>
  </div>
</div>
<style>
.lk-ship { background:#fffbe8; border-radius:14px; padding:14px 16px; margin:14px 0; color:#023047; }
</style>

6. Pet Store – Paw Progress Bar

Warm orange bar for pet supplies.

Preview

Sample: bar fills automatically from the real cart total via Liquid.

Liquid Code

{% assign ship_limit = 89900 %}
{% assign remaining = ship_limit | minus: cart.total_price %}
<div class="lk-ship" style="font-family:Arial, sans-serif;">
  {% if remaining > 0 %}
    <p style="margin:0 0 8px;font-size:14px;">🛒 Add <strong>{{ remaining | money }}</strong> more for <strong>FREE shipping!</strong></p>
  {% else %}
    <p style="margin:0 0 8px;font-size:14px;">🎉 <strong>You've unlocked FREE shipping!</strong></p>
  {% endif %}
  <div style="background:#fed7aa;border-radius:99px;height:10px;overflow:hidden;">
    <div style="background:#ea580c;height:100%;border-radius:99px;transition:width .5s;
      width: {{ cart.total_price | times: 100.0 | divided_by: ship_limit | at_most: 100 | round }}%;"></div>
  </div>
</div>
<style>
.lk-ship { background:#fff7ed; border-radius:12px; padding:14px 16px; margin:14px 0; color:#7c2d12; }
</style>

How to Add Free Shipping Progress Bar to Shopify

No theme file editing needed. Use Shopify’s Custom Liquid section:

1. In Shopify admin, go to Online Store > Themes.
2. Click Customize on your live theme (works with Dawn and all OS 2.0 themes).
3. Navigate to your product page template using the top page selector.
4. In the left sidebar, click Add section and choose Custom liquid.
5. Paste the code from any variation above into the Custom liquid box.
6. Drag the section to the right position (under the buy buttons is ideal) and click Save.

Tip: want it on every product automatically? Add the section once to the default product template and it appears store-wide.

Customize the Free Shipping Progress Bar

• Set ship_limit to your store’s free-shipping threshold (in cents/paise — 99900 = ₹999).
• Change the fill color to your brand’s primary color.
• Edit the messages — add urgency like ‘Almost there!’
• Place it near the add-to-cart button AND in the cart drawer for double impact.

More Shopify Code Sections

• Shopify Free Shipping Progress Bar
• Shopify Product Page Trust Badges with Liquid (Code + Guide)
• Shopify Cart Upsell Section
• Shopify Frequently Bought Together Section
• Shopify Product Page Custom Offer Box
• Shopify Cart Drawer Custom Design
• Shopify Product Page Stock Counter (Only X Left)
• Shopify Sticky Add to Cart Bar

Conclusion

A free-shipping progress bar is pure behavioral psychology working for your revenue. Shoppers add ‘just one more thing’ to unlock free shipping — and your average order value climbs. Set your threshold and paste it in.

Want this done for you? LayoutKart builds conversion-ready Shopify stores with all these sections pre-installed. Browse our readymade Shopify templates or get a custom store built for your brand.