Cart Drawer Does Not Update Automatically (Dawn Theme)

Store Design
, , ,

Topic summary

Users report that the cart drawer in Shopify’s Dawn theme fails to update automatically when items are added. The drawer shows as empty even after adding products, and customers cannot view their cart without manually refreshing the page.

Root Cause Identified:
One user discovered the issue stems from missing DOM elements that the fetchQuantityRules() function expects. Specifically, removing the quantity rules label (class=“quantity__rules-cart…”) from main-product.liquid breaks the cart update functionality.

Proposed Solutions:

  • AJAX approach: Use fetch('/cart.js') to retrieve cart data asynchronously and update the drawer without full page refresh
  • DOM element fix: Either restore the missing quantity rules element or add a safety check (if (!this.querySelector('.quantity__rules-cart')) return;) in product-info.js (around line 61)
  • jQuery reload: Intercept AJAX cart additions and reload specific elements using $('#cart-drawer').load(location.href + " #cart-drawer")
  • Custom form handling: Implement custom AJAX submission that manually updates cart count and drawer state

Status: Multiple users confirmed solutions work, though implementation varies by Dawn version. The issue typically affects stores with customized themes or page builders that modify default Dawn structure.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
2

Hey @SeanConnors ,

It sounds like you’re experiencing an issue with the cart drawer not updating in real-time when items are added to the cart. There are a few potential solutions to this problem, depending on how your cart drawer is implemented.

One possible solution is to use JavaScript to listen for changes to the cart and update the cart drawer accordingly. You can use the addItem event provided by the Shopify API to detect when items are added to the cart, and then use JavaScript to update the cart drawer with the new information.

Another solution is to use AJAX to refresh the cart drawer each time an item is added to the cart. This will ensure that the cart drawer always displays the latest information about the items in the cart.

You can also try using the window.location.reload() method to refresh the page whenever an item is added to the cart. This will force the cart drawer to update with the latest information about the items in the cart.

It’s worth noting that these solutions may not work for all implementations of the cart drawer, as the specific details of how the cart drawer is implemented can vary. If you’re not sure how to implement these solutions, you may want to consult with a developer or reach out to our support channel for further assistance.

Please visit https://bit.ly/3qqfpfZ to be connected with a member of our support team.