Shopify and other storefronts

What it is

Shopify does not need an app to run a chat widget. You paste one line into your theme's main layout file, theme.liquid, and the bubble is on every page of the storefront. Agentency's Shopify card gives you that line, wrapped in a Liquid comment naming where it goes.

This article covers Shopify in detail and then points you at the right guide for every other kind of store, because the pattern is the same everywhere: put the tag in the page head, allow the shop's domain, test on the live shop.

When you would use it

Use this when you sell online and want shoppers to ask about sizing, delivery, or returns without leaving the product page. It is also the right route for a Shopify store with a headless or custom front end — the tag goes wherever your head is rendered.

If you are on WooCommerce, do not paste a snippet at all: use the official WordPress plugin, which registers your domain for you.

Where to find it

Open Dashboard → Chatbots → your chatbot → Integrations → Plugins.

Before you start

• Duplicate your live theme first. Shopify → Online Store → Themes → the theme's menu → Duplicate. Editing theme code without a copy to fall back on is the one genuinely risky step in this guide.
• Add both hosts to the widget allowlist: your custom domain (with and without www) and your your-store.myshopify.com address. See Allow the widget on your domains.
• Confirm the chatbot is Active on its Playground tab.

Steps

1. Open Dashboard → Chatbots → your chatbot → Integrations → Plugins and click the Shopify card.
2. Click Copy Liquid code.
3. In your Shopify admin, go to Online Store → Themes.
4. On the theme you want to change, open the ⋯ menu and choose Edit code.
5. In the file list, open Layout → theme.liquid.
6. Paste the snippet immediately before the closing </head> tag.
7. Click Save.
8. Open your live storefront — a real published product page, not the theme editor canvas — and let the page settle.
9. Send a test message and confirm it arrives under Conversations.

What the snippet looks like

The Liquid comment is just a note to whoever reads the theme next; the working part is the single script tag. Copy your own from the Plugins drawer:

{% comment %} Add this to your theme.liquid before </head> {% endcomment %}
<script src="https://agentency.com/js/chatbot-widget.js" defer data-widget-token="wt_YOUR_WIDGET_TOKEN" data-api-base-url="https://api.agentency.com" referrerpolicy="strict-origin-when-cross-origin" crossorigin="anonymous"></script>

Paste it exactly. The most common breakage here is a text editor or document that replaces the straight quotes with curly "smart quotes" — the tag then looks right and does nothing. Copy from the drawer straight into Shopify's code editor and this cannot happen.

Other storefronts

Every other store platform in the gallery has its own guide, with that platform's exact admin path:

• BigCommerce — Storefront → Script Manager
• Magento and Adobe Commerce — the theme's head.phtml
• PrestaShop — the theme's head.tpl, or a Custom HTML module
• Salla and Zid — the store theme's layout file
• WooCommerce — the WordPress plugin

What you will see

Shopify saves theme edits instantly and keeps a history you can revert from. On the storefront, the chat bubble appears in the corner set by your chatbot's appearance settings, on the home page, collections, product pages and the cart.

Shopify's checkout is a separate, locked surface on most plans, so the bubble usually does not appear there. That is Shopify's restriction, not ours.

Limits and plan notes

Embedding requires a paid Agentency plan; on Free the Plugins catalogue is locked and you share the hosted chatbot link instead. See Which plans include integrations and the pricing page.

There is no product or order sync. This is the point people most often get wrong, so to be explicit: pasting this snippet does not give the chatbot your catalogue, your stock levels, your prices, or any order. It puts a chat window on your shop.

Two things you can do about that, and they are separate jobs:

• Teach the chatbot. Crawl your storefront so your product and policy pages become knowledge. Good for descriptions, shipping rules, returns and sizing. It is a snapshot, so re-crawl when things change.
• Let it look things up live. A Call action lets the chatbot call an address you control mid-conversation, so "where is my order" gets a real answer. This needs a paid plan that includes actions, and an endpoint that knows the answer — your own service, or a middleware tool.

Common problems

The bubble shows in the theme editor preview but not on the live shop.

The preview runs on a different host than your live shop. Add both your .myshopify.com address and your custom domain to the allowlist.

Nothing appears anywhere.

Check three things in order: the tag is still before </head> in theme.liquid, the theme you edited is the published theme, and your domain is on the allowlist. See The widget is blocked.

Chat is missing on checkout.

Shopify controls what runs on checkout. Most plans do not allow third-party scripts there.

The chatbot invents a delivery time.

It is answering from whatever you taught it. Give it the real policy as knowledge, and write an instruction telling it to say it does not know rather than guess.

I edited the wrong theme.

Shopify's theme code editor keeps a history. Revert the file, then repeat on the published theme.