Why Does My Shopify Cart Drawer Only Update After Refresh?

The real symptom

This usually shows up as: “The product adds to cart, but the drawer still looks empty,” “the cart icon count does not update,” or “the mini-cart only shows the new item after I refresh.” The checkout and cart state can be correct while the theme interface is stale. A refresh fixes it because Liquid renders the cart again from the server.

Why this happens

A Shopify AJAX cart has three layers: the server-side cart state, the JSON response from endpoints like /cart/add.js or /cart.js, and the visible theme UI. The most common bad fix updates only the first layer. Shopify adds the item, but the drawer, subtotal, empty-state message, and header bubble never get fresh HTML.

Modern themes usually update the drawer by fetching rendered cart sections and replacing the old DOM. If a page builder, bundle app, upsell, sticky add-to-cart button, or custom product form bypasses the theme’s native product-form handler, the add can succeed while the drawer never updates.

Likely causes

• A custom add-to-cart script calls /cart/add.js but does not update sections.
• The drawer section ID changed after a theme edit or update.
• The header bubble and drawer are updated separately, so one is stale.
• An app replaces the product form and skips the theme’s cart event.
• A JavaScript error stops the cart update handler before it runs.
• Custom upsell code is destroyed when the drawer re-renders and needs to be initialized again.

Confirmed Community fix

Shopify Community threads around this issue repeat the same pattern: the item is added, but the drawer, mini-cart, or cart bubble is not re-rendered until refresh. Confirmed fixes typically add a cart refresh step, update the count element after add-to-cart, or use bundled section rendering so the drawer and header bubble are replaced after the AJAX request succeeds.

Exact admin path

Confirm drawer mode: Shopify admin → Online Store → Themes → Customize → Theme settings → Cart → Cart type → Drawer.

Duplicate first: Online Store → Themes → three-dot menu on live theme → Duplicate.

Edit the duplicate: duplicated theme → three-dot menu → Edit code. Start with assets/cart-drawer.js, assets/cart.js, assets/product-form.js, sections/cart-drawer.liquid, sections/header.liquid, and any cart bubble snippet.

DevTools check

1. Open the product page and DevTools → Network.
2. Enable Preserve log.
3. Add a product to cart.
4. Confirm /cart/add.js returns 200.
5. Look for a follow-up request that fetches cart JSON or rendered cart sections.

If /cart/add.js succeeds but no section-rendering request runs and the DOM is unchanged, the cart state is updating but the UI is stale.

Simple code check

This is a pattern check, not universal paste-in code. A healthy custom cart flow adds the item, requests the cart sections the theme needs, and swaps the drawer and cart bubble HTML.

async function addToCartAndRefreshDrawer(variantId, quantity = 1) {
  const res = await fetch(window.Shopify.routes.root + 'cart/add.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      id: variantId,
      quantity,
      sections: 'cart-drawer,cart-icon-bubble',
      sections_url: window.location.pathname
    })
  });

  const data = await res.json();
  if (!res.ok) throw new Error(data.description || 'Add to cart failed');

  if (data.sections?.['cart-drawer']) {
    const html = new DOMParser().parseFromString(data.sections['cart-drawer'], 'text/html');
    const freshDrawer = html.querySelector('cart-drawer');
    const currentDrawer = document.querySelector('cart-drawer');
    if (freshDrawer && currentDrawer) currentDrawer.innerHTML = freshDrawer.innerHTML;
  }

  if (data.sections?.['cart-icon-bubble']) {
    const html = new DOMParser().parseFromString(data.sections['cart-icon-bubble'], 'text/html');
    const freshBubble = html.querySelector('#cart-icon-bubble');
    const currentBubble = document.querySelector('#cart-icon-bubble');
    if (freshBubble && currentBubble) currentBubble.innerHTML = freshBubble.innerHTML;
  }

  document.querySelector('cart-drawer')?.open?.();
}

Section IDs are theme-specific. Confirm them before pasting anything.

Known fix

The durable fix is to make every custom add-to-cart path call the same refresh routine as the native product form. That means refreshing the drawer contents, subtotal, empty state, and cart bubble together. If an app or page builder owns the add-to-cart button, make it dispatch the event your theme expects or wire it into your theme’s existing cart update method.

Common misunderstanding

This is not always a broken cart. If /cart.js shows the new item, the cart state is correct. If the drawer does not show it, the UI is stale. If the cart page also does not show it, the variant ID or add-to-cart request is wrong.

Before you edit code

Duplicate the theme and test the same product in a fresh Dawn theme. If Dawn works and the live theme does not, Shopify is not the issue. The problem is custom theme JavaScript, app code, or a modified product form.

Do not do this

• Do not use window.location.reload() as the final fix.
• Do not update only the cart count and leave the drawer stale.
• Do not paste Dawn cart scripts into a custom theme without checking section names.
• Do not ignore console errors before the cart update code.

How to test the fix

1. Add a product from the normal product form.
2. Add from quick-add or featured product sections.
3. Add a variant with line-item properties if the store uses engraving or custom text.
4. Change quantity inside the drawer.
5. Remove the line item.
6. Confirm the drawer, subtotal, cart bubble, and cart page all agree.

Related Shopify Dude guides

• Shopify Header Cart Count Not Updating
• Shopify Variant Picker Not Updating Price or Image
• Shopify Line Item Properties Not Showing in Cart

Sources

• Shopify Community: Cart Drawer does not Automatically Update
• Shopify Community: Cart does not refresh after adding products
• Shopify Community: Mini-cart does not update until refresh
• Shopify Community: Cart Drawer and Icon not updating automatically
• Shopify Community: Bundled Section Rendering not responding
• Shopify.dev: AJAX Cart API reference
• Shopify.dev: Section Rendering API