Shopify

Connect Shopify to ground your agent in your catalog and enable live order-status, tracking, and returns lookups — plus install the chat widget on your storefront.

View as Markdown

Shopify is the integration that turns Bookbag from a generic FAQ bot into a real ecommerce support agent. It does three things: it grounds answers in your store's content, it powers live order lookups through actions, and it deploys the chat widget on your storefront.

The ecommerce trifecta

For a Shopify store, set up all three: connect the data, enable Shopify actions, and install the widget. That combination resolves the bulk of "where is my order?" and "can I return this?" tickets automatically.

What you can do

Capability	What it enables
Ground in store content	Index policies, product pages, and your help center so answers reflect your actual store.
Order-status lookups	The agent looks up an order and tells the customer where it is and when it will arrive.
Tracking & shipping	Surface tracking links and shipping estimates in the conversation.
Returns & exchanges	Walk customers through your returns policy and start the process.
Storefront widget	Embed the chat bubble on every page of your Shopify theme.

Ground your agent in store content

Add your store as a data source: crawl your storefront and help center so policies, FAQs, and product information are indexed. Pin high-stakes answers like your returns window as Q&A pairs so the agent quotes them exactly.

Enable order lookups with actions

Live order data comes from Shopify actions. With actions enabled, the agent can look up a customer's order and answer status, tracking, and fulfillment questions in real time instead of guessing.

Verify identity for order data

Order details are personal data. Use identity verification on the widget so the agent only reveals order information to the right customer.

Add the chat widget to your Shopify theme so customers can ask questions on any page. Paste the embed snippet before </body> in your theme.liquid layout:

layout/theme.liquid

  <script
    src="https://app.bookbag.ai/widget/embed"
    data-agent-id="YOUR_AGENT_ID"
    defer
  ></script>
</body>

See Website widget → Install on Shopify for the full step-by-step.

Use the theme app embed for zero config

If you install the Bookbag app and enable its theme app embed (Theme → Customize → App embeds), the storefront script resolves your shop to its agent at runtime and adds the cart bridge below automatically — no agent id to copy.

The storefront cart bridge

On a Shopify storefront the widget includes a cart bridge so the agent can read and modify the shopper's live cart. When the agent adds an item it calls Shopify's /cart/add.js, reads the updated cart from /cart.js, and dispatches the standard cart events so your theme's cart count and drawer stay in sync:

  document.addEventListener("cart:updated", (e) => {
    const cart = e.detail.newCart;
    document.querySelector(".cart-count").textContent = cart.item_count;
  });
  // Also dispatched for broad theme compatibility: "cart-update" and "cart:update".

Identifying the logged-in customer

To let the agent recognize a signed-in shopper (for orders and account actions), expose the customer to the widget from your theme. Add this inside <head>, above the app embed:

layout/theme.liquid

{% if customer %}
<script>
  window.__bbCustomer = {
    id: {{ customer.id }},
    email: {{ customer.email | json }},
    name: {{ customer.name | json }}
  };
</script>
{% endif %}

The bridge reads window.__bbCustomer and calls identify() for you, which also keeps a contact in sync for that shopper. For tamper-proof identity, also include a server-signed hash field.

What's next

Shopify actions

Order status, tracking, and returns lookups.

Website widget

Install the chat bubble on your storefront.

Identity verification

Safely reveal order data to the right customer.

Integrations overview

Slack