Skip to content
intoCHAT
Documentation

Install the chat widget on Shopify

Add the intoCHAT chat bubble to your Shopify store by pasting one script tag into theme.liquid, then connect your store so the agent can search your products.

On Shopify, you add the chat bubble by pasting one script tag into your theme. There is no app to install, and product search works from your store's public data without an API key.

Copy the snippet

Open your agent's Share tab. On the Shopify card, click Copy Code. It is the same script as on the Bubble Chat card and already contains your agent ID:

<script src="https://www.intochat.ai/api/embed.js" data-chatbot-id="YOUR_AGENT_ID"></script>

Add it to your theme

  1. In your Shopify admin, go to Online Store → Themes.
  2. Next to your current theme, click ⋯ and choose Edit code.
  3. In the Layout folder, open theme.liquid.
  4. Paste the snippet just above </body> and click Save.
  5. Open your store. The chat bubble appears in the bottom corner of every page that uses this layout, with the colors and position from the Appearance tab.

Just above </body> is the recommended place, but the snippet also works in the <head> section of theme.liquid. If it ends up in the theme twice, only one bubble appears.

Let the agent search your products

  1. Open the Actions tab and choose Connect your website.
  2. Paste your store's address. intoCHAT detects Shopify and adds two actions: Search products, which returns up to five matches, and Get product details, which covers variants, prices and stock.
  3. Test it in the Playground: ask about a product, a price or whether something is in stock. Answers show product cards with an image, the price and a link to the product page.

Products are searched live while the visitor chats, so new products and price changes show up without retraining. The connection reads only public product data. It doesn't see orders, carts or customer data, so the agent can't look up orders, handle returns or check out in the chat. It points shoppers to the right page instead.

If your store is password protected, the agent can't see its products. Remove the password under Online Store → Preferences and connect again. See Connect your store for details.

Train the agent on your store's content

On the Knowledge tab, add your store's address and pick your shipping, returns and FAQ pages. Upload size guides or policies as files, and add Q&A pairs for answers that must be worded exactly.

Troubleshooting

  • No bubble on the store. Make sure you edited the live theme, not a copy, and that the snippet sits above </body> in theme.liquid.
  • "Chatbot not found." in the browser console. The agent ID in the snippet is wrong. Copy it again from the Share tab.
  • "Connect your website" fails. Check that the address is your public storefront and that the store isn't password protected.

For more cases, see Troubleshooting. For what the agent can do in a Shopify store, see the Shopify integration page.

View as Markdown