How to Refresh the Shopify Cart Drawer After Adding a Product Through a Third-Party App

When a product is added to the cart via a third-party app in Shopify, customers don’t see the update in the cart drawer right away. This causes confusion, disrupts the shopping experience, and can even lead to lost sales. To fix this, you need a reliable way to automatically refresh the cart drawer, without forcing a full page reload.

A cart drawer refresh is a theme-specific JavaScript action that updates the cart in real-time. It ensures that customers immediately see the updated cart to improve user experience (UX).

In this guide, you’ll learn everything you need to know to get started with cart drawer refresh in Shopify, including:

• Why cart drawer refresh matters for Shopify stores?
• What is a cart drawer refresh callback?
• Theme-specific JavaScript code to refresh the cart drawer
• How to implement these callback codes
• Troubleshooting tips to avoid common issues

Why Cart Drawer Refresh Matters for Shopify Stores?

When a customer adds a product to the cart, they expect instant visual feedback, especially in modern eCommerce experiences where speed and convenience are everything.

However, if your Shopify cart drawer doesn’t automatically refresh after a product is added via AJAX (like from a third-party app), the cart can appear empty or outdated. This creates friction, undermines trust, and can lead to lost sales.

A cart drawer refresh ensures the cart interface updates in real-time, without requiring an entire page reload. This small interaction significantly improves user experience and conversion rate.

Why it’s important to keep your cart drawer updated:

• Enhances Customer Trust: Customers see the product added right away, avoiding confusion or frustration.
• Supports Third-Party Apps: Many apps use AJAX to add items; refreshing the cart ensures compatibility.
• Improves Conversion Rates: A seamless, real-time experience makes customers more likely to complete their purchase, which will increase the conversion rate.
• Reduces Development Workarounds: Instead of reloading the page or writing extra scripts, you can use a theme-specific method.

Shopify themes vary widely in how they manage the cart drawer. That’s why understanding how to refresh your cart drawer automatically, based on the theme you’re using, is critical for both developers and merchants aiming to deliver a smooth shopping experience.

What is a Cart Drawer Refresh Callback?

A cart drawer is the UI element in Shopify themes that displays the customer’s cart contents, typically as a slide-out panel.

Many third-party Shopify apps use AJAX to add products to the cart without reloading the page. However, this doesn’t automatically update the cart drawer in most themes.

A refresh callback is a piece of JavaScript code that triggers the cart drawer to update its contents after an AJAX action. By adding the right callback to your third-party app’s “add to cart” function, you ensure customers see their updated cart instantly.

How to Refresh the Cart Drawer Without Refreshing the Page When a Product is Added Using AJAX:

When a Shopify store uses AJAX to add products to the cart, the cart is automatically updated in the background, providing a smooth and uninterrupted experience.

But when third-party apps add products to their cart, many themes don’t automatically refresh the cart drawer to reflect the updated contents.

This leads to confusion for customers and potential friction in the buying journey. To avoid this, you need to implement a way to dynamically refresh the cart drawer via AJAX, without reloading the entire page.

Here is the code for popular Shopify themes to refresh the cart when a product is added from any third-party application.

Note: Make sure to add the cart refresh code inside the application’s “Add to Cart” callback to ensure the cart is updated properly.

Cart Drawer Refresh Code for Popular Shopify Themes:

Below are the JavaScript callbacks for refreshing the cart drawer in popular Shopify themes. Copy the code for your theme and add it to your callback function.

1. Focal:

document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {bubbles: true}));

2. Impulse:

$("form.ajaxcart .js-qty__num").first().trigger("change");

3. Streamline:

document.dispatchEvent(new CustomEvent("cart:build"))

4. Brooklyn:

ajaxCart.load();

5. Flex:

Shopify.theme.jsAjaxCart.updateView();

6. Flow:

document.querySelector('form.cart input.ajaxcart__qty-num').dispatchEvent(new Event("change", { bubbles: true }));

7. Prestige:

document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {bubbles: true}));

OR

document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {bubbles: true}));

8. Debut:

closeAjaxCart();
ajaxCartUpdate();

9. Ella:

document.querySelector('div.has-items input.item-quantity').dispatchEvent(new Event("change", { bubbles: true }));

10. Debutify:

theme.ajaxCart.update();

11. Warehouse:

document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {bubbles: true}));

12. Cart.js:

CartJS.getCart();

13. Venue:

document.querySelector('form.cart input.ajaxcart__qty-num').dispatchEvent(new Event("change", { bubbles: true }));

14. Venture:

fetchCart();

15. Broadcast:

cart.getCart();

16. Shella:

theme.cart.updateData()

17. Testament:

Shopify.getCart(ajaxifyShopify.buildCart);

18. Refresh:

document.querySelector('form.cart__contents input.quantity__input').dispatchEvent(new Event("change", { bubbles: true }));

19. Foxpad:

document.querySelector('form.cart-flyout__form input.quantity').dispatchEvent(new Event("change"));

20. Athens

document.querySelector('form.mini-cart-inner input.quantity-input-field').dispatchEvent(new Event("change", { bubbles: true }));

21. Vella Framework:

$('.drawerProductQty .qtyNum').first().trigger("change");

22. Sense:

document.querySelector('form.cart__contents input.quantity__input').dispatchEvent(new Event("change", { bubbles: true }));

23. Baseline:

document.body.dispatchEvent(new CustomEvent("baseline:modalcart:afteradditem"))

24. Go Live:

$("form.cart-form .cart__qty-input").first().trigger("change");

25. Expanse:

document.dispatchEvent(new CustomEvent('cart:build'));

26. Starter:

setTimeout(function(){
$(window).trigger('updateCart');
}, 100)

27. Plantco:

document.documentElement.dispatchEvent(new CustomEvent('wrapped:custom:update', {bubbles: true}));

28. Craft:

document.querySelector('form.cart__contents input.quantity__input').dispatchEvent(new Event("change", { bubbles: true }));

For Shopify Theme 2.0 (like Dawn, Spotlight, Trade, Ride):

For these themes, use the following code to fetch and update the cart drawer section:

fetch(`${routes.cart_url}?sections=cart-drawer`)
    .then((response) => response.json())
    .then((sections) => {
      const sectionIds = ['cart-drawer'];
      for (const sectionId of sectionIds) {
        const htmlString = sections[sectionId];
        const html = new DOMParser().parseFromString(htmlString, 'text/html');
        const sourceElement = html.querySelector(`${sectionId}`);
        const targetElement = document.querySelector(`${sectionId}`);
        if (targetElement && sourceElement) {
          targetElement.replaceWith(sourceElement);
        }
      }
      document.body.classList.add('overflow-hidden');
      const theme_cart = document.querySelector('cart-notification') || document.querySelector('cart-drawer');
      if (theme_cart && theme_cart.classList.contains('is-empty')) theme_cart.classList.remove('is-empty');
      theme_cart.classList.add('active');
    })
    .catch((e) => {
      console.error('Error updating cart sections:', e);
    });

For Shopify Horizon AI theme (link Horizon, Savor, Heritage, Atelier, Vessel, Pitch, Ritual, Fabric, Tinker, Dwell):

For Horizon AI themes, use this code to trigger a cart update event:

import('@theme/events').then(({ CartUpdateEvent }) => {
      const cartDrawer = document.querySelector('cart-drawer-component');    
      fetch('/cart.js')
      .then(res => res.json())
      .then(cart => {
        const event = new CartUpdateEvent(cart, 'manual-trigger', {
          itemCount: cart.item_count,
          source: 'fad-refresh',
          sections: {}
        });
        document.dispatchEvent(event);
        if (cartDrawer?.hasAttribute('auto-open')) {
          cartDrawer.open();
        }
      });
    });

Note: Depending on the theme version, it might be a different code.

How to Implement Cart Drawer Refresh Callbacks:

To refresh your cart drawer, you need to:

• Identify your Shopify theme: Check your Shopify admin under Online Store > Themes to find your active theme and its version.
• Locate your third-party app’s callback: Most apps allow you to add custom JavaScript after an “add to cart” action. Check the app’s documentation or help desk.
• Add the theme-specific callback code: Use the code snippet for your theme (listed below) in the app’s callback function.
• Test thoroughly: Test the callback in a development store to ensure it works with your theme version, as code may vary slightly.

Note: Theme versions can affect the required code. Always verify compatibility with your theme’s documentation.

Example: Using Cart Drawer Refresh with Our Apps (FAD and AIOD)

For example, let’s say you’re using one of our Shopify apps, FAD or AIOD.

Assume your active theme is Prestige, which uses the following refresh code:

document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {bubbles: true}));

If you’re using the FAD app:

You can directly add the refresh code under the app’s settings.

Here is a visual reference:

Alternatively, the FAD app supports a built-in callback function named FAD_refresh(). You can directly insert your theme.liquid file:

<script>
  function FAD_refresh(){
    document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {bubbles: true}));
  }
</script>

You can use AIOD’s callback function aiod_bundle_addtocart_success() and insert the refresh code inside your theme.liquid file:

<script>
  function aiod_bundle_addtocart_success(){
    document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {bubbles: true}));
  }
</script>

Important Note: Editing theme files or inserting custom JavaScript code requires basic coding knowledge. If you’re not confident working with code, we strongly recommend taking a full backup of your theme before making any changes or connecting with the developer.

Troubleshooting Common Issues:

If the cart drawer doesn’t update as expected:

• Verify your theme version: The code may vary depending on the theme version (e.g., older vs. newer versions of Debut). Check your theme’s documentation or changelog.
• Test in a development store: Avoid testing on a live store to prevent disruptions.
• Check for customizations: Custom code or theme modifications may interfere with the callback. Consult your theme developer if needed.
• Debug JavaScript errors: Use your browser’s developer console (F12) to check for errors like “undefined function” or “element not found”.
• Contact support: If the code doesn’t work, reach out to your theme or app developer for support.

Conclusion:

Automatically refreshing the cart drawer after products are added is more than just a technical tweak; it’s a crucial enhancement for improving user experience, maintaining trust, and boosting conversion rates on Shopify.

As we have explored, most modern themes do not update the cart drawer by default when items are added via third-party apps. This can lead to confusion and lost sales.

But, with the right theme-specific JavaScript callbacks and a clear understanding of your theme’s behavior, you can ensure that your cart drawer stays updated in real-time, without requiring a full page reload.

From identifying your active theme and implementing callback functions to troubleshooting compatibility issues, this guide equips you with actionable steps to create a seamless, modern checkout experience for your customers.

Whether you’re a merchant working with third-party apps or a developer with a custom Shopify theme, a properly refreshed cart drawer can make a meaningful difference to your store’s performance and customer satisfaction.