Why isn't my cart quantity updating in real-time on the Dawn theme?

Shopify Discussion

Topic summary

A user reports that the cart quantity badge on their Dawn theme doesn’t update in real-time when products are added, removed, or quantities change—requiring a page refresh to display accurate counts.

Key Context:

  • The issue occurs while using a third-party app called “max sales slide cart reward” that displays upsells in the cart
  • The user seeks a solution that maintains real-time quantity updates without uninstalling this app

Proposed Solution:
Another participant provides a two-step technical fix:

  1. Enable Cart Drawer in Dawn theme settings via Shopify Admin
  2. Implement JavaScript code that uses Shopify’s Sections API to refresh the cart drawer dynamically

Technical Approach:

  • The code creates a refreshCartDrawer() function to update cart contents without page reloads
  • Removes empty cart states and applies necessary animation classes
  • Inserts cart items after the cart header element
  • Makes cart contents visible by adjusting display properties

Note: The provided code snippet appears incomplete/corrupted in parts, which may require clarification for full implementation. The discussion remains open regarding whether this solution resolves the conflict with the third-party app.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

I am facing this issue that when a customer adds a product to cart, the quantity number besides the cart icon does not change unless you refresh the page. Same thing when quanity is increased or decreased.

Please note that i have installed a third party app called “sale max slide cart drawer”. It basically allows me to display upsells in the cart. Can the store display realtime quantity in icon without having to uninstall this app.

I am using the dawn theme. My store url is www.allmums.pk

2

Step 1 Enable the Cart Drawer in the Dawn Theme Setting (Admin)

Step 2: Implementing Real-Time Cart Updates

Now that the Cart Drawer is enabled, the next step is to allow for real-time updates — this means that every time a customer adds or removes items from their cart, the cart contents update dynamically without needing a full page reload.

To achieve this, we’ll use JavaScript to interact with Shopify’s Sections API and make sure that the cart drawer updates instantly and reflects the latest cart items.

Here’s the JavaScript code that will handle these on-the-fly updates:

function refreshCartDrawer() {
// Check if cart-drawer-items exists
let cartDrawerItems = document.querySelector('cart-drawer-items');
// Find the cart-drawer element
const cartDrawer = document.querySelector('cart-drawer');
if (cartDrawer) {
// Remove the is-empty class from cart-drawer if it exists
if (cartDrawer.classList.contains('is-empty')) {
cartDrawer.classList.remove('is-empty');
}
// Remove the div with class 'drawer__inner-empty'
const emptyDrawerElement = cartDrawer.querySelector('.drawer__inner-empty');
if (emptyDrawerElement) {
emptyDrawerElement.remove();
}
// Make the form tag's class 'cart__contents' display as block
const cartContentsForm = document.querySelector('.cart__contents');
if (cartContentsForm) {
cartContentsForm.style.display = 'block';
}
}
// If cart-drawer-items doesn't exist, create it
if (!cartDrawerItems) {
cartDrawerItems = document.createElement('cart-drawer-items');
// Find the drawer__header element
const drawerHeader = document.querySelector('.drawer__header');
if (drawerHeader) {
// Insert the newly created cart-drawer-items after the drawer__header
drawerHeader.insertAdjacentElement('afterend', cartDrawerItems);
}
}
// Call the onCartUpdate method to refresh the cart drawer contents
document.querySelector('cart-drawer-items').onCartUpdate();
// Open the cart drawer and apply necessary classes for animation
if (cartDrawer) {
cartDrawer.open();
}
}