Shopify Cart Not Updating Until Refresh: AJAX, Theme, and App Fixes (2026)

Quick Fix with Thunder

First Prove Whether Cart Data or Cart UI Is Broken

Open DevTools, click Add to cart, and watch Network. If /cart/add.js or /cart/change.js returns a 200 response and /cart.js shows the correct item count, Shopify's cart data is fine. The broken piece is the visible UI: drawer HTML, cart count, line-item quantity, subtotal, or checkout button state.

If the request fails with a 400, 422, or redirect, debug the product form first. Variant IDs, selling plans, subscription apps, and bundle line-item properties can all make a cart request fail before the drawer has anything to refresh.

For related buying-path issues, use the cart drawer not opening guide, add-to-cart button checklist, and cart-to-checkout troubleshooting guide.

Fix AJAX Cart Updates with Section Rendering

Modern Shopify themes often fetch updated cart sections after a cart mutation. This keeps the drawer, subtotal, item list, and cart icon in sync without a full page reload. The exact section IDs differ by theme, so inspect your cart drawer and header sections before copying code.

async function changeCartQuantity(line, quantity) {
  const change = await fetch('/cart/change.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
    body: JSON.stringify({ line, quantity }),
  });

  if (!change.ok) throw new Error('Cart quantity update failed');

  const sections = ['cart-drawer', 'cart-icon-bubble'];
  const html = await fetch('/?sections=' + sections.join(',')).then((res) => res.json());

  document.querySelector('cart-drawer')?.replaceWith(
    new DOMParser().parseFromString(html['cart-drawer'], 'text/html').querySelector('cart-drawer')
  );

  document.querySelector('#cart-icon-bubble')?.replaceWith(
    new DOMParser().parseFromString(html['cart-icon-bubble'], 'text/html').querySelector('#cart-icon-bubble')
  );

  document.dispatchEvent(new CustomEvent('cart:updated'));
}

Do not assume those section IDs exist in your theme. Search your theme for cart-drawer, cart-icon-bubble, cart-items, and main-cart-items. Dawn-style themes have different refresh helpers than older custom themes.

Update the Cart Count, Subtotal, and Remove Buttons Together

A common partial fix updates the cart drawer line items but leaves the header count stale. Another common bug removes an item visually but keeps the old subtotal. Both make shoppers distrust checkout. Treat the cart as one stateful system, not separate widgets.

After every cart mutation, verify five elements: item rows, quantity inputs, cart count, subtotal, and checkout button disabled state. If any one of them still shows stale data, your refresh is incomplete.

Disable Cart Apps and Old Snippets in a Duplicate Theme

Cart problems often start after installing a bundle, free gift, upsell, subscription, or cart drawer app. The app may listen for one event name while your theme dispatches another. Or it may mutate the cart after your theme has already rendered fresh HTML.

Duplicate the theme, disable app embeds, and test a simple product. Then re-enable apps one by one. Start with cart, bundle, gift, subscription, popup, personalization, and page-builder apps. If the issue remains after uninstalling an app, run the Shopify app leftovers cleanup checklist.

Heavy app stacks also hurt responsiveness. The app scripts fix guide, Shopify INP guide, and complete Shopify speed optimization guide cover the speed side in more depth.

Manual Fix vs Thunder Fix

If the cart issue is tied to wider store performance, compare Thunder pricing with hands-on Shopify speed optimization.

FAQ