Add to cart does not update

Cart UI doesn’t refresh by default

You may observe one or both of the following issues when adding a product from the Dialog drawer:

• Your cart icon / bubble / counter is not updated in the header
• Your mini-cart or cart drawer is not updated

After refreshing the page, both issues should be resolved: the product is in the cart, the page just doesn’t reflect it yet. If you need a live refresh without reloading, a small code fix is required.

The fix depends on your install path. Pick the matching section, or identify your install path first if you’re not sure. On Shopify the fix is a snippet below (and we write theme-specific glue for you if it doesn’t take); on GTM and custom installs it’s a small piece of code your developer owns.

Shopify (Online Store 2.0 or legacy theme)

How to test:

1. Open a product page.
2. Open the Dialog drawer and add a product.
3. Check whether the cart icon / bubble / mini-cart updates immediately (no reload).

If it doesn’t update, add this snippet to your theme (in your theme.liquid or a dedicated JS file):

(function () {
  document.addEventListener("dialog:cart:updated", function () {
    fetch(window.location.origin + "?sections=cart-icon-bubble")
      .then(function (r) { return r.json(); })
      .then(function (data) {
        var bubble = document.getElementById("cart-icon-bubble");
        if (bubble) bubble.innerHTML = data["cart-icon-bubble"] ?? "";
      });
  });
})();

If your theme uses a different cart section name or a cart drawer, the selector may differ: check your theme’s HTML to find the right element ID. If the snippet doesn’t take on your theme, this is one of the cases the Dialog team handles for you: email paul@askdialog.com with your theme name and a screenshot, and we write the theme-specific glue, typically within 48 hours.

Google Tag Manager install

What to do: this won’t work out of the box. Your frontend developer has to wire it. The GTM-deployed widget can fire the cart event, but no GTM tag can refresh your storefront’s cart UI for you, that’s by design, GTM doesn’t have visibility into your application state.

What your developer needs to do: subscribe to the dialog:cart:updated DOM event in your storefront’s code and refresh the cart UI accordingly (re-render the cart icon, re-fetch the mini-cart, whatever your stack does).

document.addEventListener("dialog:cart:updated", function () {
  // Re-render your cart icon, re-fetch the mini-cart, etc.
  // Exact code depends on your stack.
});

If you genuinely have no frontend developer who can do this, the GTM install will leave your visitors having to reload: accept the trade-off, or move to one of the other install paths.

React or Vue install (with our components)

What to do: subscribe to the dialog:cart:updated event in your storefront, the same way as on GTM.

The addToCart callback you pass to the SDK is the right place to refresh your cart state: you control what runs there. But the event is also fired on document and carries the updated cart on event.detail.cart, so you can listen globally and skip a re-fetch if you want.

A drop-in React listener you can mount once at the root of your app:

import { useEffect } from 'react';

export const DialogCartListener = () => {
  useEffect(() => {
    const handleDialogCartUpdated = async (event: any) => {
      const cart = event.detail?.cart;

      if (!cart) return;

      // Dialog already added the item to the cart.
      // Trigger your storefront cart UI here.
      await refreshCart();
      openCartDrawer();
      updateCartBubble();
    };

    document.addEventListener('dialog:cart:updated', handleDialogCartUpdated);

    return () => {
      document.removeEventListener('dialog:cart:updated', handleDialogCartUpdated);
    };
  }, []);

  return null;
};

Render <DialogCartListener /> once near the top of your tree (e.g. inside your <Layout>). The same pattern fits Vue 3 with onMounted / onUnmounted in a setup script.

Both patterns work (callback or DOM event). Pick the one that fits how your cart state is managed.

Vanilla SDK install

Same as React / Vue: refresh your UI either inside the addToCart callback or via the dialog:cart:updated event. See the SDK reference for the callback signature.

The universal contract

Whatever the install path, Dialog emits a DOM event named dialog:cart:updated on document every time it adds a product through the assistant. If your cart UI listens for it and refreshes, you’re done.

To verify the event fires at all:

1. Open your storefront with browser devtools.
2. Paste this in the console: document.addEventListener('dialog:cart:updated', e => console.log('cart event', e)).
3. Open Dialog and add a product.
4. You should see cart event logged.

If the event fires but your UI doesn’t refresh, the issue is in your refresh code (or your theme, on Shopify): that’s your developer’s side of the contract. If the event never fires, that’s a genuine bug on our side: email support with your reproduction steps.

Still stuck?

For this issue, also say whether the dialog:cart:updated event fires (the console check above), and include your theme name on Shopify.

If you’ve run every check above and the docs can’t answer it, escalate with a complete report so we can solve it in one round-trip. What to include (install path, URL, expected vs actual, screenshots, console errors) is listed in Before you contact support. Then emailpaul@askdialog.com.