Back to tutorials
For Stores6 min read

AI Assistant for Shopify: Add to Cart and Checkout from Chat

Let shoppers find products, add to cart, and checkout — without ever leaving the chat widget. Here's how it works on Shopify.

AI Assistant for Shopify: Add to Cart and Checkout from Chat

Most "AI chatbots for Shopify" do one thing — they answer questions and link to product pages. The shopper still has to navigate away, find the right variant, add to cart, and checkout on their own.

Pipecat's AI Shopping Assistant goes further. Shoppers can find a product, pick a variant, add it to their cart, and go straight to checkout — all without leaving the chat.

This guide covers exactly how it works and how to set it up on your Shopify store.


Why This Matters

Every extra step between "I want this" and "I bought this" costs you a sale.

Traditional chatbots force shoppers through the standard funnel — click the link, land on the product page, find the right size or color, add to cart, proceed to checkout. That's 4–6 steps after the AI has already done the hard work of finding the right product.

With in-chat checkout, those steps collapse to one:

"Add the blue one to my cart." ✓ Done. Here's your checkout link.


How It Works

Pipecat connects to Shopify using the Storefront API — the same API Shopify exposes for headless storefronts. It's read-only for products, but allows cart creation and checkout natively.

Here's the full flow:

  1. Shopper asks a question — "Show me snowboards under ₹10,000"
  2. AI searches your product catalog (indexed from Shopify via Storefront API) using semantic search
  3. Product cards appear in chat with images, prices, and an "Add to Cart" button
  4. Shopper picks a variant — size, color, etc. — from a bottom sheet modal inside the chat
  5. Cart is created via Shopify's Storefront API — no redirect, no page load
  6. A checkout link appears — one tap takes them directly to Shopify's native checkout

The shopper never leaves your site. The cart is a real Shopify cart, so all your existing discount codes, shipping rules, and payment methods work exactly as expected.


Setting Up Shopify Integration

Step 1 — Get a Storefront API Token

You'll get this token through Shopify's Headless sales channel. If you haven't added it yet:

  1. In your Shopify Admin, go to Sales channels in the left sidebar
  2. Click the + button next to "Sales channels"
  3. Search for Headless and click Add
  4. If you don't see it, go to the Shopify App Store and install the free Headless channel from Shopify

Once the Headless channel is installed:

  1. Click Headless in your Sales channels sidebar
  2. Click Add Storefront
  3. Give it a name (e.g. "Pipecat Assistant")
  4. Under Storefront API, enable these scopes:
    • unauthenticated_read_product_listings
    • unauthenticated_write_checkouts
    • unauthenticated_write_carts
  5. Click Save
  6. Copy the Public access token shown on the storefront detail page

[!IMPORTANT] Use the Storefront API token, not the Admin API token. Admin tokens start with shpat_ and won't work here. The Storefront token is 32 hex characters with no prefix.


Step 2 — Connect Your Shopify Store in Pipecat

  1. Go to Stores in your Pipecat dashboard
  2. Click Connect Store
  3. Enter your store name, description, and URL
  4. Paste your Shopify domain (e.g. your-store.myshopify.com) and Storefront API token
  5. Click Connect

Pipecat immediately begins syncing your product catalog — pulling titles, descriptions, prices, variants, and images from Shopify. It then runs AI enrichment (tagging products by style, occasion, gender, materials) and generates semantic embeddings so the assistant can understand natural language queries.


Step 3 — Embed the Widget

Once synced, grab your embed code from the Overview tab:

<script
  src="https://app.pipecat.in/embed.js"
  data-store-id="YOUR_STORE_ID"
  defer
></script>

Paste it just before </body> in your Shopify theme's theme.liquid file:

  1. Shopify Admin → Online StoreThemesEdit code
  2. Open layout/theme.liquid
  3. Paste the script tag before </body>
  4. Save

A floating chat bubble appears on your store. That's it — you're live.


What the Shopper Experience Looks Like

Finding products:

"I'm looking for a snowboard for beginners, something colorful"

The assistant searches semantically across your catalog and shows product cards directly in the chat — image, title, price, and an "Add to Cart" button on each card.

Picking a variant:

Tapping "Add to Cart" opens a bottom sheet inside the chat showing available options (color, size, etc.) with availability indicators. Out-of-stock variants are greyed out automatically.

Adding to cart:

The shopper picks their options and taps "Add to Cart". The cart is created instantly via Shopify's Storefront API. A confirmation message appears in the chat and a cart icon with item count shows in the header.

Checking out:

Tapping the cart icon takes the shopper directly to Shopify's native checkout with their items pre-loaded. All your existing payment gateways, discount codes, and shipping rules apply.


What Gets Tracked

Every interaction is captured on the lead's profile in your dashboard:

  • Product views — which products the shopper clicked through from the chat
  • Add to cart events — product title, variant, price, and timestamp
  • Cart activity — total quantity, checkout URL

This gives you a clear picture of shopper intent beyond just the conversation transcript.


Frequently Asked Questions

Does it work with discount codes? Yes — the checkout link goes to Shopify's native checkout, so existing discount codes work exactly as they would normally.

What if a product has no variants? The shopper sees an "Add to Cart" button directly on the product card. No variant modal appears for single-variant products.

Is my Storefront token safe? Yes — tokens are encrypted at rest using AES-256 (Fernet) and never exposed to the frontend or widget.

Will it stay in sync if I add new products? You can trigger a re-sync anytime from the Overview tab. Automatic sync on a schedule is coming soon.


Summary

FeatureStandard Shopify ChatbotPipecat
Natural language product search
Semantic understanding
Add to cart from chat
Native Shopify checkout
Variant selection in chat
Lead + cart event tracking

Next Steps

Ready to start building?

Join Pipecat today and transform your store with AI.

Get started for free