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: Configure Your Store

Add a script block that sets window.shopily_data with your store’s configuration:


<script type="text/javascript">
    window.shopily_data = {
        store_key: "your-store.myshopify.com",
    }
</script>

Replace your-store.myshopify.com with your actual Shopify store domain (the .myshopify.com one, not your custom domain).

Optional Configuration Fields

You can pass additional fields to enhance the chatbot experience:

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.

Step 3: Load the Shoply AI Script

Add the Shoply AI script from our CDN. Use the defer attribute so it doesn’t block page rendering:


<script src="https://assets.shoplyai.ai/shoplyjs/shoply_chat_core.js" type="text/javascript" defer="defer"></script>

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

Complete Example

Here’s a complete working example putting it all together. 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 type="text/javascript">
            window.shopily_data = {
                store_key: "shoplyaics.myshopify.com",
                language_code: "en",
                country_code: "US",
                cart: { "currency": "USD" },
                product_id: "",
            }
        </script>
        <script src="https://assets.shoplyai.ai/shoplyjs/shoply_chat_core.js" type="text/javascript" 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 just plain HTML and JavaScript, it works with any framework:

Next.js / React: Add the <script> tags in your layout component or use next/script with strategy="afterInteractive"
Gatsby: Add the scripts in gatsby-ssr.js or use the <Helmet> component
Vue / Nuxt: Add to your app template or use a plugin to inject the scripts
Static sites: Paste the code directly into your HTML

The key is to make sure window.shopily_data is set before the Shoply AI script loads.

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. Here’s an example using JavaScript:


window.shopily_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!