Cart Issues after adding Free Shipping Progress Bar Code

Technical Q&A
,

Topic summary

A user added a free shipping progress bar to their Shopify cart following a YouTube tutorial, but this broke core cart functionality—quantity updates and item deletions no longer work. They had previously tried apps (Essential Free Shipping, Izy Free Shipping Progress Bar) without success.

Root Cause:
The custom progress bar script likely interferes with Shopify’s native cart event handling, possibly overriding form submissions or preventing default behaviors.

Proposed Solution:
A Shopify expert provided JavaScript code that:

  • Listens for cart form changes without blocking default actions
  • Fetches updated cart data via /cart.js
  • Dynamically updates the progress bar based on cart total
  • Displays messaging for the £100 free shipping threshold

Status: Awaiting user response with their theme name and exact code for further refinement. The solution aims to restore cart functionality while maintaining the progress bar feature.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
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

1 Like