How to Add a Dynamic Free Shipping Bar in Shopify (2026)

Key takeaways

• A dynamic free shipping bar reads the current cart total via the Shopify Cart API and updates the progress bar in real time as items are added or removed.
• It can be added to the cart drawer, cart page, or as a persistent announcement bar across the store.
• The bar requires JavaScript to be truly dynamic — static versions only show on page load.
• Fudge builds this as a native Shopify section. Apps like Gift with Purchase or Shipping Bar apps provide no-code options.

“Add $12.50 more to get free shipping.” This single message, displayed dynamically as the cart value changes, is one of the highest-ROI elements you can add to a Shopify store. It gives shoppers a concrete, self-updating goal — and converts hesitating visitors into people actively trying to hit the threshold.

How do I add a free shipping bar on Shopify?

There are three approaches: a dedicated app, building with Fudge, or implementing it manually with the Cart API. The right choice depends on how much control you need over the design and placement.

How to create a dynamic section in Shopify

A “dynamic section” in this context means a section whose display updates based on live data (the cart total) without a page reload. This is different from a static section that only updates when the page is refreshed.

The key ingredients:

1. HTML/Liquid — the section markup and initial state
2. Shopify Cart API — provides the current cart total in JSON
3. JavaScript — reads the cart total, calculates the remaining amount, and updates the bar
4. CSS — styles the progress bar

The complete implementation

HTML structure (in a Liquid section file)

{% assign free_shipping_threshold = section.settings.threshold | times: 100 %}

<div class="free-shipping-bar" data-threshold="{{ free_shipping_threshold }}">
  <div class="free-shipping-bar__track">
    <div class="free-shipping-bar__progress" id="shipping-bar-progress"></div>
  </div>
  <p class="free-shipping-bar__message" id="shipping-bar-message">
    Loading...
  </p>
</div>

JavaScript — Cart API integration

(function() {
  var bar = document.querySelector('.free-shipping-bar');
  if (!bar) return;

  var threshold = parseInt(bar.dataset.threshold, 10); // in cents
  var progressEl = document.getElementById('shipping-bar-progress');
  var messageEl = document.getElementById('shipping-bar-message');

  function updateBar(cartTotal) {
    var remaining = threshold - cartTotal;

    if (remaining <= 0) {
      // Free shipping achieved
      progressEl.style.width = '100%';
      messageEl.textContent = 'You have free shipping!';
      messageEl.classList.add('free-shipping-bar__message--achieved');
    } else {
      var percent = Math.min((cartTotal / threshold) * 100, 100);
      progressEl.style.width = percent + '%';

      var remainingFormatted = (remaining / 100).toFixed(2);
      messageEl.textContent = 'Add $' + remainingFormatted + ' more for free shipping';
    }
  }

  function fetchCart() {
    fetch('/cart.js')
      .then(function(response) { return response.json(); })
      .then(function(cart) {
        updateBar(cart.total_price);
      })
      .catch(function(err) {
        console.error('Shipping bar: could not fetch cart', err);
      });
  }

  // Initial load
  fetchCart();

  // Listen for cart updates (for stores using Shopify's cart drawer events)
  document.addEventListener('cart:updated', fetchCart);

  // Also listen for the standard Shopify cart change event
  document.addEventListener('change:cart', fetchCart);
})();

Note: The cart:updated and change:cart events are dispatched by many Shopify themes (including Dawn) when the cart changes. If your theme uses a different event name, check your theme’s JavaScript for the cart update event it dispatches.

CSS

.free-shipping-bar {
  padding: 10px 16px;
  text-align: center;
  background: #f5f5f5;
}

.free-shipping-bar__track {
  width: 100%;
  max-width: 300px;
  margin: 0 auto 8px;
  height: 6px;
  background: #ddd;
  border-radius: 3px;
  overflow: hidden;
}

.free-shipping-bar__progress {
  height: 100%;
  background: #000;
  border-radius: 3px;
  transition: width 0.4s ease;
  width: 0;
}

.free-shipping-bar__message {
  font-size: 13px;
  margin: 0;
}

.free-shipping-bar__message--achieved {
  color: #2a7a2a;
  font-weight: bold;
}

Schema (for Theme Editor settings)

{% schema %}
{
  "name": "Free Shipping Bar",
  "settings": [
    {
      "type": "range",
      "id": "threshold",
      "label": "Free shipping threshold ($)",
      "min": 10,
      "max": 200,
      "step": 5,
      "default": 50
    }
  ],
  "presets": [
    {
      "name": "Free Shipping Bar"
    }
  ]
}
{% endschema %}

Where to place the free shipping bar

Cart drawer. The most impactful placement — customers see the bar at the exact moment they’re reviewing their cart. Add the section snippet inside your cart drawer template.

Cart page (/cart). Same logic as the drawer but for customers who navigate directly to the cart page.

Announcement bar / header (site-wide). Shows the threshold to visitors before they reach the cart — can motivate them to add items from the product page. Less real-time impact since it shows on every page.

Product pages. Showing “You’re $X away from free shipping” directly on product pages, near the ATC button, can be a strong motivator. Requires the JavaScript to still fetch cart data.

Using Fudge to build the shipping bar

Rather than implementing the Cart API and JavaScript yourself, describe the entire feature to Fudge:

“Add a dynamic free shipping progress bar to my cart drawer. It should show a progress bar that fills as the cart total increases toward the $75 free shipping threshold. When the threshold is reached, show a ‘You’ve unlocked free shipping!’ message. The bar should update immediately when items are added without a page reload.”

Fudge generates the complete section — HTML, JavaScript, CSS, and schema — as a draft for your review. The threshold is configurable in the Theme Editor without touching code.

App options for free shipping bars

If you prefer a no-code option without implementing the Cart API yourself:

Hextom Free Shipping Bar — one of the most installed Shopify apps for this feature. Free tier available. Includes announcement-bar placement and basic progress bar.

Monster Upsells — includes a shipping bar within a broader upsell toolkit.

Gift with Purchase apps often include a shipping bar as part of their cart incentive logic.

App tradeoffs: faster to set up, but adds external scripts to your store and offers less design flexibility than native code.