← Back to Snippets
Free Shipping Progress Bar
Shows customers how close they are to free shipping. Updates dynamically with cart changes. Animated progress bar with customizable threshold and colors.
snippets/plynthr-free-shipping-bar.liquid
{% comment %}
Plynthr — Free Shipping Progress Bar
https://plynthr.com/snippets/free-shipping-bar/
INSTALL:
1. Create snippets/plynthr-free-shipping-bar.liquid
2. Paste this code
3. Add {%- render 'plynthr-free-shipping-bar' -%} in your cart drawer,
cart page, or announcement area
CUSTOMIZE:
- Set your free shipping threshold below
- --pfs-bar-color for the progress bar color
{% endcomment %}
{%- assign free_shipping_threshold = 100 -%}
{%- assign cart_total = cart.total_price | divided_by: 100.0 -%}
{%- assign remaining = free_shipping_threshold | minus: cart_total -%}
{%- assign progress = cart_total | divided_by: free_shipping_threshold | times: 100 | at_most: 100 -%}
<style>
:root {
--pfs-bg: #f5f5f5;
--pfs-bar-color: #10b981;
--pfs-bar-complete: #059669;
--pfs-text-color: #333;
--pfs-radius: 20px;
--pfs-height: 8px;
}
.plynthr-shipping-bar {
padding: 12px 16px;
text-align: center;
}
.plynthr-shipping-bar__text {
font-size: 13px;
color: var(--pfs-text-color);
margin-bottom: 8px;
font-weight: 500;
}
.plynthr-shipping-bar__text strong {
font-weight: 700;
}
.plynthr-shipping-bar__track {
width: 100%;
height: var(--pfs-height);
background: var(--pfs-bg);
border-radius: var(--pfs-radius);
overflow: hidden;
}
.plynthr-shipping-bar__fill {
height: 100%;
border-radius: var(--pfs-radius);
background: var(--pfs-bar-color);
transition: width 0.5s ease;
width: {{ progress }}%;
}
.plynthr-shipping-bar__fill.is-complete {
background: var(--pfs-bar-complete);
}
</style>
<div class="plynthr-shipping-bar">
{%- if remaining <= 0 -%}
<p class="plynthr-shipping-bar__text">🎉 You qualify for <strong>free shipping!</strong></p>
<div class="plynthr-shipping-bar__track">
<div class="plynthr-shipping-bar__fill is-complete" style="width: 100%"></div>
</div>
{%- elsif cart.item_count == 0 -%}
<p class="plynthr-shipping-bar__text">Free shipping on orders over <strong>{{ free_shipping_threshold | money }}</strong></p>
<div class="plynthr-shipping-bar__track">
<div class="plynthr-shipping-bar__fill" style="width: 0%"></div>
</div>
{%- else -%}
<p class="plynthr-shipping-bar__text">You're <strong>{{ remaining | money }}</strong> away from free shipping!</p>
<div class="plynthr-shipping-bar__track">
<div class="plynthr-shipping-bar__fill" style="width: {{ progress }}%"></div>
</div>
{%- endif -%}
</div>
Installation
- In your Shopify admin, go to Online Store → Themes → Edit Code
- Under Snippets, click "Add a new snippet"
- Name it
plynthr-free-shipping-bar - Paste the code above and save
- Add
{%- render 'plynthr-free-shipping-bar' -%}in your cart drawer, cart page, or anywhere you'd like it to appear - Set your free shipping threshold in the
free_shipping_thresholdvariable
Customization
free_shipping_threshold— Your free shipping minimum (default: 100)--pfs-bar-color— Progress bar color (default: green #10b981)--pfs-bar-complete— Bar color when threshold reached (default: #059669)--pfs-height— Bar height (default: 8px)--pfs-radius— Border radius (default: 20px)
Want this installed for you?
I'll add this to your Shopify store, test it, and make sure it's working perfectly. Done within 24 hours.
Install for Me — $29
✓ Installed & tested
✓ Within 24 hours
✓ Any OS 2.0 theme
FAQ
Does it update dynamically?
The bar renders server-side with current cart values. For AJAX cart updates, you'll need to re-render the snippet — or use JavaScript to update the width and text after cart changes.
How do I change the currency symbol?
The snippet uses Shopify's
money filter which automatically uses your store's currency settings.Can I put this in the announcement bar area?
Yes. You can render it anywhere — cart drawer, cart page, product page, or even in the header area above navigation.
