How it worksWhy it worksPricingQuestionsBlog

How to Install a Shopify AI Chatbot on Your Storefront

A Shopify AI chatbot goes on your storefront as one script tag pasted into layout/theme.liquid, reached through Online Store > Themes > (three-dot button) > Edit code in the Shopify admin. It does not go in a custom pixel: pixels run in a sandbox and exist to collect customer events, not to render a chat window. Budget ten minutes.

That is the short version. The rest of this page is the long version, because the thing most install guides get wrong is not the paste, it is telling you to paste it somewhere Shopify no longer supports. If you are still deciding whether you want one at all, start with the ecommerce chatbot guide and come back here when you have made the call.

What a shopify ai chatbot actually is

A shopify ai chatbot is a chat window on your storefront that answers customer questions using a language model rather than a fixed decision tree. The useful kind is restricted to material you supplied: your delivery policy, your returns window, your sizing notes. It reads those and answers from them.

The distinction matters more than the label. A generic assistant bolted onto a Shopify store will happily invent a returns window, because inventing plausible text is what language models do when they have nothing better. chatfor.site is built the other way round: the assistant answers only from documents you uploaded, and is instructed to say it does not have something to hand rather than guess. Ask it who your chief executive is when nothing in the uploads mentions that, and it tells you it does not know.

Worth knowing: Nielsen Norman Group's chatbot usability research found bots failed most often when users stepped outside the expected script, including a bot that answered "I'm sorry. I seem to be having trouble understanding" to a reasonable question (Source: Nielsen Norman Group, 2018). Restricting the source material does not fix that on its own. Loading the assistant with the documents your customers actually ask about does.

Where does a custom script tag go on Shopify in 2026?

In the theme code, specifically layout/theme.liquid, just before the closing </body> tag. Shopify's own theme documentation describes theme.liquid as "The default layout file, which must be included in all themes" and confirms that content is rendered "between the <body> and </body> HTML tags" (Source: Shopify developer documentation, 2026). Every non-checkout page of your storefront renders through that file, so a script placed there loads on every page once.

Three routes people try and should not:

  • A custom pixel. Shopify's docs describe pixels as "JavaScript code snippets that run on your online store, customer accounts pages, or store checkout and collect and pass behavioral customer data for marketing and analytics" (Source: Shopify Help Center, 2026). They run inside a sandbox, and Shopify warns that "Not all pixel functionality works in the sandbox". Pixels are for tracking. A chat widget is not tracking.
  • Checkout. Shopify's checkout pages do not take arbitrary theme code. Do not plan a chat bubble on the checkout step.
  • A code block inside a page's content. That gets you the widget on one page. You want it everywhere.

Worth knowing: Shopify's own guidance is to "Duplicate your theme to create a backup copy. This makes it easy to discard your changes and start again if you need to." It also warns that "If changes that you've made to a theme's code are incompatible with a theme update, then all your code changes are removed in the updated copy" (Source: Shopify Help Center, 2026). One script tag is very unlikely to conflict with an update, but the copy that gets overwritten is your edited one, so keep a note of the snippet somewhere outside the theme.

The install, step by step

Ten minutes, assuming your documents are already written somewhere.

  1. Create the assistant. Sign up at chatfor.site. Sign-in is a magic link, so there is no password to invent. Every account starts on the Free plan, which allows one assistant, 25 documents and 100 answers a month, and takes no card.

  2. Upload what it should know. Delivery policy, returns policy, sizing guide, care instructions, the FAQ page you wrote in 2023 and forgot. You can also paste text straight in as a source, add product entries, and write curated question-and-answer pairs for the questions you already know the wording of.

  3. Copy the snippet. The dashboard shows it with your assistant's id already filled in. It looks like this:

    <script
  src="https://chatfor.site/widget.js"
  data-bot-id="YOUR_BOT_ID"
  defer
></script>

  4. Back up the theme. In the Shopify admin, go to Online Store > Themes. Find your live theme, open the three-dot button and duplicate it. This is Shopify's recommendation, not ours.

  5. Open the code editor. Same three-dot button on the live theme, then Edit code. Shopify's help centre gives the path as going to Online Store, then clicking the three-dot button and Edit code (Source: Shopify Help Center, 2026). In the Shopify mobile app the equivalent is Menu > Online Store > Manage themes > Edit code.

  6. Paste into layout/theme.liquid. The file list sits on the left of the editor. Open layout/theme.liquid, scroll to the bottom, and put the snippet on its own line immediately before </body>. Save.

  7. Check the storefront. Open your shop in a normal browser tab, not the theme preview. The launcher should appear in the bottom right. Ask it something only your documents would know, such as your exact returns window, and confirm the answer matches the document.

If the answer is wrong at step 7, the fix is almost always in the uploads rather than the code. Open the conversation in the dashboard: it shows which passages the answer was drawn from, so you can see whether it read the right document and read it correctly, and you can overrule the answer.

The script tag, attribute by attribute

data-bot-id is the only attribute you need. The rest exist because a shop occasionally needs them.

Attribute What it does Default
data-bot-id Which assistant to load. Required. none
data-mode bubble floats a launcher in the corner. inline renders the chat inside an element you place. bubble
data-target Inline only. CSS selector of the container to fill. the script tag's parent
data-position Bubble only. right or left. right
data-auto-open Bubble only. true opens the chat on load. false
data-persist false starts a fresh conversation on every page load. resumes within the session
data-api-origin Overrides the API origin. Rarely needed. the script's own origin

defer is on the snippet deliberately: the widget has no business blocking your product page render. The whole widget lives inside a Shadow DOM, which means your theme's CSS cannot reach into it and its styles cannot leak into your theme. That is the property that stops a chat widget from quietly breaking a carefully tuned Shopify theme, and it is the reason you can paste this into a heavily customised theme without reading the theme's stylesheet first.

Can you put the chat inside a page instead of a bubble?

Yes, on the Growth plan and above. A bubble is right for a product page. A dedicated help page is often better served by the chat being the page.

<div id="chatfor-chat" style="height: 560px"></div>

<script
  src="https://chatfor.site/widget.js"
  data-bot-id="YOUR_BOT_ID"
  data-mode="inline"
  data-target="#chatfor-chat"
  defer
></script>

On Shopify that goes in the template or section for the page you want it on rather than in layout/theme.liquid, because you want it on one page and not all of them. The container needs a height; the widget fills what you give it.

What should you upload so it answers Shopify questions well?

The questions a store gets are narrower than owners expect. Look at your last fifty support emails and you will find five questions wearing forty different hats. Feed the assistant the documents that answer those five, in this order of usefulness:

  1. Delivery. Carriers, cutoff times, cost by destination, what happens to a late parcel. This is the single most asked category in most shops.
  2. Returns and exchanges. The window, the condition, who pays postage, how long a refund takes.
  3. Sizing and fit. Your size chart as text, not only as an image, because the assistant reads text.
  4. Product specifics that are not on the product page. Materials, care, compatibility, what is in the box.
  5. Order status wording. What "processing" means on your store versus "fulfilled", and where the tracking link comes from.
  6. The things you refuse. No international delivery, no gift wrapping, no phone line. An assistant that says no clearly saves more email than one that answers yes vaguely.

What you should not do is upload your entire Shopify blog and hope. Retrieval works better over a small, sharp corpus than a large vague one, and 25 documents on the Free plan is usually more than a single shop needs. There is more on structuring the material in the guide to organising the documents an assistant reads.

What it costs to run

An answer from chatfor.site costs about 0.45 of a cent to serve, measured at 1,794 input and 87 output tokens per answer across a real support corpus, priced against Anthropic's Claude Sonnet at $2 per million input tokens and $10 per million output tokens. That figure is a constant in the codebase rather than a marketing estimate, and it is deliberately conservative: a question that matches a curated answer never reaches the model at all and costs nothing.

Plan Price Answers per month Assistants Documents
Free $0 forever 100 1 25
Starter $29 / month 2,000 2 200
Growth $79 / month 6,000 5 Unlimited
Business $199 / month 20,000 Unlimited Unlimited

The Free plan carries a small chatfor.site badge. Paid plans do not. Starter adds email support, Growth adds conversation history and search plus the inline placement above, Business adds per-assistant usage reporting and a named contact. Every plan starts as a free account, so nothing needs a card until you choose to pay. If you are comparing this against the per-seat pricing most support suites use, the breakdown of what a chatbot actually costs does that arithmetic properly.

What breaks, and how do you fix it?

Five failures cover almost everything.

  • No launcher on the storefront. Nine times out of ten the snippet went into a theme that is not published, or into the duplicate you made as a backup. Check you edited the live theme.
  • It works in the theme preview but not on the live site, or the reverse. Same cause. The preview renders the theme you have open in the editor.
  • The launcher appears twice. The snippet is in theme.liquid and also in a section or template. The widget guards against double loading, but two script tags is still a sign the paste happened twice.
  • Answers are vague or say the documents do not cover it. That is the assistant behaving as designed and telling you the corpus has a hole. Open the conversation, look at which passages it retrieved, and upload the document that should have answered.
  • A busy visitor gets rate limited. There is a ceiling of 30 messages per minute per visitor, enforced in the database rather than per server instance, which means it holds even under load. It is high enough that real customers never see it and low enough that a scraper does.

Data is stored in Supabase, hosted in Ireland. Embeddings are generated locally through transformers.js using the bge-small-en-v1.5 model, so indexing a document carries no per-document API cost, which is why the document allowances above are as generous as they are.

Running the same widget on other platforms works the same way, with a different paste target: there is a WordPress version of this install, a Squarespace walkthrough, a BigCommerce equivalent, and a platform-agnostic version for anything else.

Frequently asked questions

Does a Shopify AI chatbot need an app from the Shopify App Store?

No. A script tag in layout/theme.liquid is enough for a widget that renders on the storefront. Apps earn their keep when they need to read your orders or products through Shopify's APIs. If all the assistant reads is your own documents, an app adds an install to review and nothing else.

Will editing theme.liquid break my Shopify theme?

Very unlikely for one script tag, and the widget renders inside a Shadow DOM so your theme's CSS and its styles cannot collide. The real risk Shopify flags is theme updates: "all your code changes are removed in the updated copy" if they conflict. Duplicate the theme first and keep the snippet noted elsewhere.

Can the chatbot see my Shopify orders or stock levels?

No. chatfor.site answers from documents, pasted text, product entries and question-and-answer pairs that you supply. It has no connection to your Shopify order or inventory data, so it cannot tell a customer where their parcel is. It can tell them exactly what your policy says about parcels.

How long does the whole thing take?

The paste takes two minutes. Uploading documents and reading the first few answers takes the rest of the hour, and that part is the work. An assistant with three good documents beats one with thirty bad ones, so spend the time on the corpus rather than the code.

What happens when a customer asks something the documents do not cover?

It says so. The assistant is instructed to admit the gap rather than produce a plausible answer, and every conversation in the dashboard shows which passages an answer came from so you can see the gap and fill it. Those refusals are the most useful support data you will get.

Sources

Try it on your own documents

Upload what you already have and ask it something. The free plan needs no card, and it will tell you when your documents do not cover a question.

Start free