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 email paul@askdialog.com.