How to Add an AI Chatbot to a Headless Shopify Store: a Complete Guide

Rui Jiang - Feb 10, 2026

Add AI Chatbot to Headless Shopify Store

Running a headless Shopify store means you’ve decoupled your storefront from Shopify’s built-in theme system. You might be using Next.js, Gatsby, a custom React app, or any other frontend framework—while Shopify handles your products, orders, and payments behind the scenes via the Storefront API.

The good news: adding Shoply AI chatbot to a headless store is simple. You don’t need the Shopify theme editor or any Shopify app embed blocks. Just a few lines of HTML and JavaScript.

How It Works

Shoply AI’s chatbot loads as a lightweight script that runs independently of Shopify’s theme system. All you need is:

Install Shoply AI on your Shopify store
A small configuration object with your store key
The Shoply AI script loaded from our CDN

That’s it - no npm packages to install, no build steps, and no framework-specific wrappers needed.

Step 1: Install Shoply AI

New to Shoply AI? Install the app on your Shopify store to get started. Once installed, you can use the headless integration below to add the chatbot to your custom storefront.

Step 2: Add the Script

Add a single script tag to your HTML. Replace your-store.myshopify.com with your actual Shopify store domain (the .myshopify.com one, not your custom domain):


<script src="https://assets.shoplyai.ai/shoplyjs/shoply_chat_core.js" shoply-site-key="your-store.myshopify.com" defer="defer"></script>

This script handles everything: rendering the chat widget, connecting to the AI, displaying product recommendations, and more.

Strongly Recommended: Full Configuration

For the best experience — including multi-currency, localized UI, and product-page context — set window.shoply_data before the script loads:


<script type="text/javascript">
    window.shoply_data = {
        store_key: "your-store.myshopify.com",
        language_code: "en",
        country_code: "US",
        cart: { "currency": "USD" },
        product_id: "8012345678",
    }
</script>
<script src="https://assets.shoplyai.ai/shoplyjs/shoply_chat_core.js" defer="defer"></script>

Field	Description	Example
`store_key`	Required. Your Shopify store domain	`"your-store.myshopify.com"`
`language_code`	Language for the chatbot UI	`"en"`, `"fr"`, `"es"`
`country_code`	Customer’s country	`"US"`, `"CA"`, `"GB"`
`cart`	Cart info including currency. Used to determine which currency to display for products	`{ "currency": "USD" }`
`product_id`	Current product ID (for product pages)	`"8012345678"`

Passing product_id enables product-specific features like contextual Q&A when a customer is viewing a product page.

Complete Example

Here’s a complete working example. You can also find this file hosted at shoplyai.ai/headless.html :


<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div>
            Hello World!
        </div>
        <script src="https://assets.shoplyai.ai/shoplyjs/shoply_chat_core.js" shoply-site-key="shoplyaics.myshopify.com" defer="defer"></script>
    </body>
</html>

Open this page in a browser and you’ll see the Shoply AI chatbot floating widget appear in the corner, ready to help your customers.

Framework Integration Tips

Since the integration is a single script tag, it works with any framework:

Next.js / React: Add the <script> tag in your layout component or use next/script
Gatsby: Add in gatsby-ssr.js or use the <Helmet> component
Vue / Nuxt: Add to your app template or use a plugin to inject the script
Static sites: Paste the snippet directly into your HTML

Dynamic Configuration for Product Pages

On product pages, you’ll want to pass the current product_id so the chatbot can answer product-specific questions. Set window.shoply_data before the script loads:


window.shoply_data = {
    store_key: "your-store.myshopify.com",
    product_id: getCurrentProductId(), // your function to get the Shopify product ID
}

Get Started

Already using Shoply AI on your Shopify store and want to add it to your headless frontend? Just grab your store_key and follow the steps above—it takes less than a minute.

Need help? Book a meeting with us and we’ll walk you through the setup.

Happy selling!