AI chatbox app: add items to cart from chat, and have the theme’s existing cart bubble update (no theme file edits)

Shopify Apps
1

Hi Shopify Community,

I’m building a Shopify app that provides an AI chatbox on the storefront. The shopper interacts with the chatbox instead of the standard product page add-to-cart button.

Goal

The desired flow is:

  • A shopper chats with the AI and says something like “Add this to my cart.”

  • My storefront-side JavaScript adds the correct product variant to the cart

  • The merchant’s existing theme cart bubble / cart count (header badge) updates correctly

  • The solution should work across themes

  • Merchants should not need to manually edit theme files (Liquid or JS)

My Current Approach

From the chatbox JavaScript, I call Shopify’s AJAX cart endpoints:

  1. Add the product to the cart
POST /cart/add.js
  1. Then fetch the updated cart
GET /cart.js

  1. Read the updated item_count

  2. Attempt to update the cart bubble in the DOM

Problem

Adding items to the cart works correctly.

However, I cannot reliably update the merchant’s cart bubble because:

  • Selectors and markup differ across themes

  • I do not want to hardcode theme-specific selectors

Questions

1. Is there a theme-agnostic way to refresh the cart bubble?

For example:

  • A standard event themes listen to after cart updates

  • A recommended Shopify convention to trigger cart refresh

2. If there is no universal cart-bubble refresh mechanism, what is the recommended best practice?

My use case is:

  • AI chatbot

  • Adding items to cart from non-product UI

Examples:

  • chat assistants

  • quizzes

  • bundles

  • recommendation widgets

3. Should the app instead trigger the theme’s native add-to-cart behavior?

For example:

  • Submitting the product form

  • Calling the theme’s internal add-to-cart function

This would allow the theme to update its own cart bubble automatically, without modifying theme files.

If this is the recommended approach, is there a reliable pattern for doing this across themes?

Thanks in advance for any guidance.

I’d especially appreciate insights from anyone who has built Shopify apps that add items to cart from non-product interfaces (chatbots, quizzes, bundles, etc.) while keeping the theme cart count in sync.

2

The last time I worked on this was on the sense theme and I did not individually had to call anything to update the cart bubble, it was just adding to cart and the update function was called automatically updating the cart and the bubble.

Here is a link to the site, it uses a quiz p

But from what I feel it’s hard to come up with a solution for every theme because every theme has their own way you most probably know it as a developer but since sense is a free theme, almost all themes from the list of those themes should probably work it like it. Please have a look to confirm.

Best

3

No, there is no unified way to update the cart bubble or cart drawer. You must integrate with the theme’s cart drawer one by one.