Shop owners who want to add AI chatbot to Shopify storefronts usually start in the Shopify App Store. Klugon isn't listed there and doesn't need to be. You copy one script tag from the Klugon dashboard, paste it into your theme's main layout file, and a chat button appears on your storefront pages.
That simplicity comes with two things to be clear about. First, you'll be editing theme code, so it's worth doing it the careful way Shopify recommends. Second, the chat is separate from your Shopify admin: it answers from what you've told Klugon, not from your Shopify products, carts or orders. This page covers both, along with the steps, checks and limits.
What you're adding to your store
Klugon is an AI receptionist for small businesses. On a website it appears as a chat button in a corner of the page. Shoppers click it to ask about products, sizing, delivery, returns or opening hours, and get answers drawn from the information you've added to Klugon. It can also take contact details for your team to follow up and, if you offer appointments such as fittings or repairs, book them.
For shops, the assistant can suggest items from the product catalogue you keep in Klugon. The AI sales assistant page explains how product questions are handled.
The snippet itself
The snippet is a single script tag that loads a small file called widget.js from Klugon. Your settings travel with it as attributes:
- data-agent-id: your business's ID. Without it, the chat won't load.
- data-color: your brand colour.
- data-position: bottom-right, bottom-left, top-right or top-left.
- data-welcome: the first message shoppers see.
- data-label: an optional label on the chat button.
The tag has the async attribute, so the browser doesn't wait for it before showing your store. A short comment, "Klugon AI Widget", sits above it so you can spot it in the file later.
You don't need to edit any of this by hand. Change settings in Klugon and copy a fresh snippet.
Before you start
The Klugon plan you need
The website chat runs on the AI chatbot product, from the Starter tier up. If the plan isn't active, the chat can't start new conversations. On Business and Scale tiers of any Klugon product, the "Powered by Klugon" line at the bottom of the chat is removed. Current prices are on the pricing page.
Who can edit the theme
You'll need a Shopify account that can open the theme code editor. Store owners can; staff accounts need the permissions your store gives for editing themes.
Make a backup copy of your theme
Shopify's own advice in its guide to editing theme code is to duplicate your theme before changing code, so you can go back if something breaks. Its page on duplicating themes shows how: on the Themes page, open the three-dot menu next to the theme and choose Duplicate. The copy appears in your theme library. A store can hold up to 20 themes, so you may need to delete an old one first.
How to add AI chatbot to Shopify, step by step
Step 1: set up and copy the snippet in Klugon
- In the Klugon dashboard, open Widget and QR code.
- In the Customise card, choose your brand colour and position, write a welcome message and add a button label if you want one.
- Click Save changes.
- In the Embed code card, keep the Script tag tab selected and click Copy.
The dashboard's instruction is to paste the snippet just before the closing body tag. In a Shopify theme, that tag lives in the main layout file.
Step 2: open the code editor
- In your Shopify admin, go to Online Store, then Themes.
- Next to the theme you want to edit, open the three-dot menu and choose Edit code.
Step 3: open theme.liquid
In the file list, open the Layout folder and click theme.liquid. Shopify's developer documentation on theme layouts explains that this file wraps every template in the store, which is why one paste puts the chat on every storefront page.
Step 4: paste the snippet before the closing body tag
Scroll to the bottom of theme.liquid and find the closing body tag, near the end of the file. Click just before it, paste the snippet on its own line, and leave everything else as it was.
Don't paste it inside another tag or in the middle of an existing line. If you're unsure, use the editor's search to find the closing body tag and add a blank line above it.
Step 5: save and preview
Click Save. Open your store in a private browser window and the chat button should appear in the corner you chose.
If you'd rather test before shoppers see it, make the change on your duplicate theme first, preview that theme, and publish it once you're happy.
Checking it worked
Ask a real question
Click the button. The chat header shows your business name and "Online · Replies instantly", with quick replies for Services, Book and Hours. Ask something you know the answer to, such as your returns window, and check that the reply matches what you've told Klugon.
Look at it on a phone
Many shoppers will meet the chat on a phone. On screens 480 pixels wide or narrower, the chat window stretches to almost the full width of the screen. Check that the chat button doesn't sit on top of your theme's own buttons, such as a sticky add-to-cart bar or a cart drawer icon. If it does, move it to another corner in Klugon and replace the snippet.
Click through a few pages
Visit the home page, a collection, a product page and the cart. The chat button should be on each of them, because they all share theme.liquid. If it's missing on one type of page, that template may use a different layout, which some themes do for special pages; paste the snippet into that layout file too.
If nothing appears
- The snippet ended up in the wrong place. Reopen theme.liquid and check it sits just before the closing body tag, outside any other tag.
- You edited a theme that isn't live. Changes to an unpublished theme only show in that theme's preview.
- The snippet was altered. If data-agent-id is missing or changed, the chat won't load. Paste a fresh copy.
- The plan isn't active. Check your billing page in Klugon.
Where the chat appears, and where it doesn't
Storefront pages
Home, collection, product, cart, search, blog and content pages all use theme.liquid, so the chat appears on them.
Checkout
Shopify's checkout doesn't use your theme's layout file. The theme layouts documentation notes that checkout has its own layout, which only some Shopify Plus stores could customise and which Shopify has been phasing out. In practice, the chat won't appear on checkout pages, so shoppers who have reached checkout won't see it.
Theme updates and theme changes
Shopify notes in its theme code guide that code edits can be lost when you update your theme, because the new version won't include your change. Whenever you update or switch themes, check that the snippet is still in theme.liquid and paste it again if it isn't. Keeping the snippet in your notes makes this a two-minute job.
What the chat knows about your shop
This is the part most worth understanding before you go live.
It answers from Klugon, not from Shopify
The assistant uses your business profile, knowledge base, services and the product catalogue you've entered in Klugon. It doesn't connect to your Shopify admin. Your Shopify products, prices, stock levels and collections aren't copied across, so keep the products you want it to discuss up to date in Klugon by hand.
It can't see carts or orders
The chat doesn't know what's in a shopper's cart or what they've ordered before. It can't look up a Shopify order number, check tracking, issue a refund or apply a discount in Shopify. For "where's my order?" questions, give the assistant your usual answer in the knowledge base, such as how long delivery takes and how to contact you, and it can take the shopper's details for your team.
It doesn't read the page the shopper is on
The chat doesn't know which product page a shopper is looking at. If they ask "does this come in blue?", the assistant will ask which item they mean.
Conversations reset between pages
Each conversation lives in the page it started on. When the shopper moves to another page or reloads, the chat starts again. That matters more in a shop than on most sites, because shoppers move between product pages a lot. The earlier chat is still saved in your Klugon dashboard, and any contact details the assistant took are saved as a lead.
Getting the chat ready for shoppers
Add the questions shoppers actually ask
Delivery times and costs, returns, sizing, care instructions, gift wrapping and whether you have a physical shop are the usual ones. Put clear answers in Klugon's knowledge base. Specific beats general: "UK orders placed before 2pm ship the same day" is easier for the assistant to use than a long policy page.
Keep the Klugon catalogue to what matters
If you have thousands of products, you don't need all of them in Klugon. Bestsellers, ranges people ask about and anything that needs explaining are a good start. The retail and clothing boutiques pages show how other shops set up the assistant.
Use the same answers on social
Many shops get as many questions by direct message as on the website. Klugon's Instagram and Messenger automation uses the same knowledge, so you write the answers once.
A sample conversation
The following is a made-up example for a fictional homeware shop, Linden and Oak.
Handling the questions the chat can't answer
A shop chat is only as good as what happens when the assistant reaches the edge of what it knows. Setting that up takes a few minutes.
Let the assistant take details
When a shopper needs something only your team can do, such as checking an order or arranging an exchange, the assistant can save their name and contact details as a lead with a note of what they need. Those leads appear on the Leads page in Klugon, with the website chat as the source.
Flag conversations for a person
If the shopper asks for a person, or the question is beyond the assistant, it can flag the conversation for your team. Flagged chats are easy to find in the Conversations page. On the Business and Scale tiers of the AI voice agent or AI social agent, you can also have new leads and flagged chats posted to a Slack channel as they happen.
Reply from the dashboard
Your team reads the conversation in Klugon and follows up by email or phone using the details the shopper gave. Because the floating chat resets when the shopper changes page, following up through the contact details is more reliable than waiting for them to come back to the same chat.
Tell shoppers what to expect
Put a line in the knowledge base about how and when your team replies, for example "We reply to order questions within one working day by email". The assistant can then set the right expectation instead of promising something your team can't meet.
What this doesn't do
- It isn't a Shopify app. Nothing is installed from the Shopify App Store, and Klugon doesn't appear in your Shopify admin.
- No product, stock or price sync. Products are entered in Klugon by hand.
- No cart or order access. The chat can't see carts, look up orders, track parcels or issue refunds.
- No abandoned cart messages. Klugon doesn't follow up with shoppers who leave.
- Not on checkout. Checkout doesn't use your theme layout, so the chat doesn't show there.
- No memory across pages. A new page or a reload starts a new conversation.
- Survives theme updates only if you re-add it. Check theme.liquid after updating or switching themes.
Frequently asked questions
Is Klugon in the Shopify App Store?
No. You add it by pasting one script tag into your theme's theme.liquid file. Nothing is installed in Shopify.
Where exactly do I paste the snippet?
In Online Store, Themes, open the three-dot menu, choose Edit code, open Layout and then theme.liquid, and paste it just before the closing body tag. Save, then check your store.
Will the chat know my Shopify products?
Not automatically. Add the products you want it to talk about to Klugon's catalogue. It doesn't read your Shopify admin.
Can shoppers check their order status in the chat?
Not for Shopify orders. The assistant can't see them. It can explain your delivery times and take the shopper's details so your team can follow up.
Will the chat show on checkout?
No. Shopify's checkout doesn't use your theme's layout file, so the chat isn't shown there.
Will a theme update remove it?
It can. A new theme version won't include your edit, so check theme.liquid after updating or switching themes and paste the snippet again if needed.
Does it work with any Shopify theme?
Shopify themes have a theme.liquid layout file, and that's where the snippet goes. Free and paid themes are edited the same way through Edit code.
How do I change the colour or welcome message?
The settings travel inside the snippet as attributes. Change them on Klugon's Widget and QR code page, save, copy the new snippet and replace the old one in theme.liquid.
How do I remove the chat?
Open theme.liquid again, delete the snippet and the "Klugon AI Widget" comment above it, and save. The chat disappears from your store straight away, apart from any cached pages.
Can I put it on some pages only?
Pasting into theme.liquid puts it on every storefront page. Showing it on selected pages only needs a theme developer to add a condition around the snippet.
Adding Klugon to a Shopify store is one careful edit, as long as you back up the theme first and remember the chat answers from Klugon rather than your Shopify admin. The integrations page lists the other places Klugon connects, and the WordPress guide covers the same snippet on WordPress sites.