ChatFlow Logo

Shopify Integration Guide

Add the ChatFlow chat widget to your Shopify store with one-click install, or by pasting the embed snippet into your theme.

Before you begin

There are two ways to add ChatFlow to a Shopify store. One-click install on your chatbot's Publish tab adds the widget for you. If you would rather do it by hand, copy the embed snippet and paste it into your store's theme.

One-click install

1

Choose Shopify on the Publish tab

In ChatFlow, open your chatbot's Publish tab. Under Where is your website?, select Shopify.

2

Enter your store

In the One-click install on Shopify card, under Your Shopify store, enter your .myshopify.com handle (the part before .myshopify.com, not your custom domain). You can find it in your Shopify admin under Settings → Domains.

3

Connect and install

Select Connect & install on Shopify and approve the request in the Shopify login that opens. Back in ChatFlow, select Add widget to Shopify site if the card asks for it. When the button reads Widget is live, the widget is on your store.

Paste the snippet into your theme

This short walkthrough shows the manual install: copy your install code, open your theme code, paste the snippet into theme.liquid, and check your store. The written steps are below.

1

Copy your snippet

In ChatFlow, open your chatbot's Publish tab and select Copy install code. The snippet looks like this:

ChatFlow embed snippet
<script async data-chatbot="YOUR_CHATBOT_ID" src="https://chat-flow.app/chatflow-chatbot.js"></script>
2

Open your theme code

In your Shopify admin, go to Online Store → Themes. On the theme you want, select the ... (Actions) menu and choose Edit code.

3

Paste the snippet

Open the theme.liquid file under Layout. Paste the snippet just before the closing </body> tag, then Save.

Use a duplicated theme

Before editing theme code, duplicate your live theme (Actions → Duplicate) so you have a backup to revert to if anything looks off.

Verify it's working

  1. Open your store in a new tab (an incognito window gives the cleanest result).
  2. Confirm the chat widget appears (bottom right by default).
  3. Open it, send a test message, and confirm it shows up under Conversations in your dashboard.

Troubleshooting

The widget is not appearing

If you used one-click install, confirm the card on the Publish tab reads Widget is live. If you pasted the snippet, confirm it is in theme.liquid before </body> and that you saved, and that you edited the live theme (not an unpublished copy). Clear your cache and hard-refresh the storefront.

It works on some pages but not others

theme.liquid applies site-wide, so a missing widget on a specific page usually means that page uses a different template. Make sure the snippet is in the main layout file your store uses.