Shopify Header Cart Count Not Updating

The real symptom

Merchants usually describe this as “cart count only updates after refresh,” “the cart drawer has the product but the header still says 0,” or “add to cart works but the bubble does not change.” That split matters. If the item is actually in the cart, Shopify cart state is fine. The broken piece is the storefront UI update.

Likely causes

• The AJAX add succeeds, but the theme does not refresh the header. The cart drawer, cart icon bubble, and cart count can be separate pieces of DOM.
• The JavaScript updates the wrong selector. A customization may have renamed .cart-count-bubble, #cart-icon-bubble, or another header selector.
• The theme relies on section rendering, but the section ID is wrong. Many Online Store 2.0 themes re-render sections after cart changes.
• An app intercepts add to cart. Bundle, subscription, upsell, preorder, swatch, and cart-drawer apps can replace the normal add-to-cart flow.
• The theme mixes old and new cart logic. Legacy AJAX cart snippets can conflict with newer Dawn-style cart drawer or section rendering behavior.

Confirmed Community fix

Community threads keep pointing to the same diagnosis: the cart updates only after refresh because the theme’s AJAX code is not updating the header count. Older Debut fixes changed the ajaxify cart code that updates the count. Newer cart-drawer threads point to manually updating the header count or re-rendering the correct cart section after the AJAX request. Shopify’s Ajax API docs confirm that the cart API can be used to add items and update cart UI during a customer session.

Admin path

1. Go to Shopify Admin → Online Store → Themes.
2. Duplicate the live theme before editing.
3. Preview the duplicate theme and reproduce the issue.
4. Go to Actions → Edit code.
5. Search for cart files such as cart.js, cart-drawer.js, ajax-cart.js, header.liquid, and cart-icon-bubble.
6. Check whether the add-to-cart success handler updates the header count or re-renders the header/cart icon section.
7. If apps modify cart behavior, test with app embeds or cart-related app blocks disabled on the duplicate theme.

DevTools checks

• Open DevTools → Network and add a product to cart.
• Confirm /cart/add.js returns a successful response.
• Open /cart.js in the browser after adding. Check whether item_count is correct.
• Inspect the header cart count element and note its ID/class.
• Search the theme JavaScript for that selector. If no script updates it, the badge will stay stale.

Simple debug snippet

Run this in the browser console after adding an item:

fetch('/cart.js')
  .then(response => response.json())
  .then(cart => console.log(cart.item_count, cart.items));

If the console shows the correct count but the header still shows zero, the theme UI is not syncing with Shopify cart state.