Syncing cart updates with custom themes

Fix cart display issues when Chatty AI modifies cart items on custom themes

This feature is for theme developers or merchants using custom themes with non-standard cart implementations.

Understanding the issue

When Chatty AI adds, updates, or removes items from a customer's cart, most Shopify themes automatically refresh the cart display. However, some custom themes—especially those with custom-built cart drawers or non-standard Ajax cart implementations—don't follow Shopify's standard cart behavior.

This causes a common problem: the AI successfully updates the cart, but the cart UI doesn't refresh. Customers see an outdated cart and may think the AI isn't working.

Signs your theme needs this fix

• Cart drawer doesn't update when AI adds products

• Cart icon badge (item count) stays the same after AI changes

• Cart total doesn't reflect AI-added items

How Chatty cart events work

Chatty dispatches a custom JavaScript event called chatty:cart:changed whenever the AI modifies the cart. Your theme can listen for this event and trigger a cart refresh.

Event details

Event name	chatty:cart:changed
Triggered by	AI adding, updating, or removing cart items add_to_cart, update_cart, remove_from_cart
PropertyTypeDescription	actionstring

How to add event to your theme

To sync your cart UI with Chatty AI updates, add an event listener that refreshes your cart when the event fires.

1

Open your theme's JavaScript file (commonly theme.js or cart.js).

2

Add the following code

document.addEventListener('chatty:cart:changed', function() {
  // Replace this with your theme's cart refresh function
  refreshCart();
});

For example: Custom Cart Drawer

window.addEventListener('chatty:cart:changed', async (e) => {
  // Fetch updated cart
  const cart = await fetch('/cart.js').then(r => r.json());
  
  // Update cart count badge
  document.querySelector('.cart-count').textContent = cart.item_count;
  
  // Refresh cart drawer content
  refreshCartDrawer(cart);
});

Test the integration

After adding the event listener:

1. Go to your store and open the chatbox

2. Ask the AI to add a product to your cart

3. Confirm the cart UI updates without a page refresh

4. Test removing and updating items through the AI as well

If your cart still doesn't update, contact our support team through live chat in the app. Share your theme name and any console errors you're seeing.