Cart Issues after adding Free Shipping Progress Bar Code

Technical Q&A
,
1

Hi there, I have added a free shipping progress bar to my shopify website, however, have encountered some problems with the cart function. The cart is now no longer updating when I change item quantities and it won’t let me delete things from the cart. I was wondering if someone would be able to have a look at my code please. The progress bar is visible and does update when I add things in the cart below the £100 free shipping target but as described I can’t change quantities or delete items at all.

I followed this youtube videos steps:

Customize Your Shopify Cart With A FREE SHIPPING Progress Bar (Easiest Methods)

I tried a couple of apps (rather than doing the code myself) but none of them were working how I wanted them too or at all (!) (Essential Free Shipping and Izy Free Shipping Progress Bar).

Thanks very much!

2

Hey @kirstenb205 ,

Absolutely! It sounds like the custom free shipping progress bar script is interfering with your cart’s default functionality — likely preventing quantity updates and item removals from triggering properly.

Wrap your progress bar logic inside a Shopify.onCartUpdate or listen for cart form changes without interrupting the form submission. Also, ensure you’re not overriding Shopify’s native fetch or event.preventDefault() behavior unless necessary.

Example Fix (JS Snippet):

document.addEventListener("DOMContentLoaded", function () {
  const cartForm = document.querySelector('form[action="/cart"]');

  if (cartForm) {
    cartForm.addEventListener("change", function () {
      fetch("/cart.js")
        .then(response => response.json())
        .then(cart => {
          updateProgressBar(cart.total_price);
        });
    });
  }

  function updateProgressBar(totalPrice) {
    const progressBar = document.querySelector(".free-shipping-progress");
    const goal = 10000; // £100 in cents
    const percentage = Math.min((totalPrice / goal) * 100, 100);
    progressBar.style.width = percentage + "%";

    // Optional message update
    const message = document.querySelector(".progress-message");
    if (totalPrice >= goal) {
      message.textContent = " You’ve unlocked FREE shipping!";
    } else {
      const remaining = ((goal - totalPrice) / 100).toFixed(2);
      message.textContent = `Spend £${remaining} more for free shipping`;
    }
  }
});

Result:

  • Cart quantities and removals work again

  • Progress bar updates dynamically

  • No need for clunky apps

If you share your theme name and the exact JS you used, I can clean it up even further for you!

Best,

Rajat

Shopify Expert