How to embed an AI chatbot on Shopify in 60 seconds

The 3 ways to install an AI chatbot on Shopify

There are exactly three install paths for adding a chatbot widget to a Shopify storefront. Every "how to" tutorial you will read collapses down to one of these three. Knowing which one fits your store, your theme, and your tolerance for editing code makes the rest of this guide a 60-second exercise.

Path 1: Custom Liquid section in the theme editor. Every Online Store 2.0 theme exposes a section type called Custom Liquid. You add it to any section group (header, footer, or a template-specific group) directly in the visual theme editor, paste your snippet into it, and save. No code editor opened, no Liquid syntax to learn, no risk of breaking a template. This is the path Shopify itself recommends in its Help Center for "adding a third-party widget" and the path we recommend below.

Path 2: Direct edit to layout/theme.liquid. You open the theme code editor (Online Store, Themes, three-dot menu, Edit code), navigate to layout/theme.liquid, and paste the script tag just above the closing body tag. This path is one line of code, lives in a file every Shopify developer recognises, and survives theme-customizer churn. It also requires you to be comfortable opening the code editor and editing a layout file, which is enough friction that non-technical store owners should skip it.

Path 3: Install a Shopify App from the App Store. Some chatbot vendors ship a Shopify App that injects their widget via a theme app extension. You install the app from the App Store, grant the permissions it asks for, configure the bot inside Shopify Admin, and it auto-embeds. This is the path most non-technical operators reach for first, and it is also the slowest, most expensive, and most invasive of the three. We cover when it is genuinely the right choice further down.

Which install method should you pick?

The decision splits cleanly along three lines: your comfort with code, who needs ongoing access to manage the bot, and whether you want the bot to appear under Apps in your Shopify Admin.

Pick the Custom Liquid section (Path 1) if: you are the store owner, you are not a Shopify developer, and you do not need anyone else to manage the bot from inside Shopify Admin. This is the right path for 80% of Shopify stores.

Pick the theme.liquid edit (Path 2) if: you maintain your own theme, you already work in the theme code editor for other customisations, or you want the script load to be invisible to anyone using the theme customizer. This is the cleanest install for Shopify Partner agencies maintaining a client's theme on an ongoing basis.

Pick a Shopify App (Path 3) if: you genuinely need bot management to live inside Shopify Admin (some agencies require this for client billing or audit reasons), you need the bot to read live order data or apply discount codes via Shopify Admin API, or your store's compliance posture requires every third-party tool to be billed through Shopify Billing. Otherwise the App path is strictly worse than the other two.

Step-by-step: Custom Liquid section (recommended for non-developers)

This is the path you should take if you have never opened the Shopify theme code editor and prefer to keep it that way. It works on every official free theme (Dawn, Sense, Refresh, Craft, Origin, Studio, Crave, Colorblock, Spotlight, Taste, Publisher) and on every paid Online Store 2.0 theme we have tested.

1. Get your chatbot's embed snippet. From your chatbot vendor's dashboard, copy the script tag. For ChatRaj it looks like <script async src="https://chatraj.com/widget.js" data-bot-id="YOUR_BOT_ID"></script>. Every modern AI chatbot ships a similar one-line loader.
2. Open the Shopify theme editor. In Shopify Admin go to Online Store, then Themes. On your live theme click Customize. The visual theme editor opens.
3. Pick a section group that renders on every page. On Dawn and most OS 2.0 themes the safest choice is the Footer group, because the footer renders on home, collections, product pages, cart, blog posts, search results, account pages, and policy pages. Click the Footer area in the left sidebar to focus it.
4. Add a Custom Liquid section. In the section group, click Add section. In the section picker, choose Custom Liquid. A new empty Custom Liquid block is added at the bottom of the footer group.
5. Paste the snippet. With the Custom Liquid block selected, paste the script tag into the Liquid code field on the right. Do not wrap it in anything. Leave the Container width and Top/Bottom padding settings alone; they do not affect script tags.
6. Save the theme. Click Save in the top right. Shopify writes the change to the live theme immediately. There is no separate publish step.
7. Verify in an incognito window. Open your storefront in an incognito or private window so you bypass any session caches. Within 1 to 2 seconds, a floating chat bubble appears in the bottom-right corner of the page. Click it. Send a test message. You are done.

The whole flow above is genuinely under 60 seconds once you know where to click. The first time through you will spend most of the minute hunting for the Customize button.

Step-by-step: theme.liquid edit (recommended for theme maintainers)

Use this path if you are a Shopify developer, a Shopify Partner agency, or a technical store owner who already lives inside the theme code editor. It produces a cleaner install (no extra section in the theme customizer to keep track of) and is the path most theme documentation will assume.

1. Duplicate your live theme first. In Shopify Admin go to Online Store, Themes. On your live theme click the three-dot menu and choose Duplicate. This creates a backup copy you can roll back to if anything goes wrong. This step is non-negotiable for any theme.liquid edit.
2. Open the code editor. On the duplicate (not the live theme) click the three-dot menu again and choose Edit code. The Shopify code editor opens in a new view with the theme's file tree on the left.
3. Navigate to layout/theme.liquid. In the file tree, expand the Layout folder and click theme.liquid. This is the root layout file that every storefront page extends.
4. Find the closing body tag. Scroll to the bottom of the file. Look for the line that reads </body>. It is usually the second-to-last line in the file (with </html> on the line below it).
5. Paste the script tag just above the closing body tag. Put the loader on its own line directly above </body>. The placement matters: above body-close means the script downloads after the page content is parsed, so it cannot block your store's Largest Contentful Paint.
6. Save the file. Click Save in the top right of the code editor.
7. Preview, then publish. Back on the Themes page, on the duplicate theme click Actions, Preview. Walk through home, a product page, the cart. Confirm the bubble appears everywhere it should. When you are happy, click Actions, Publish to make the duplicate your live theme.

The preview-then-publish pattern is the standard Shopify workflow for any theme code change. It is worth the extra minute to avoid serving a broken theme to live traffic.

When you should use a Shopify App instead

There are real cases where a Shopify App is the right call, even though the App path is slower and more expensive in the general case.

You need live order data inside the chat. If your bot has to answer "where is my order #1234?" with real-time tracking, it needs read_orders access via the Shopify Admin API, and the cleanest way to grant that is through a Shopify App's OAuth scope grant. ChatRaj indexes public store content and cannot see live order data, so it is not the right fit for order-status as the primary use case. Apps like Re:amaze, Gorgias, and Tidio are built around this.

You need the bot to apply discount codes or modify the cart. Discount-code creation and cart mutation both require Admin API scopes (write_discounts, write_checkouts). A script-tag-only install cannot reach those APIs. If applying a 10% off code from inside the chat is core to your buyer journey, you need an app.

Your agency or compliance team requires all third-party tools to be billed through Shopify Billing. Some agencies bill their clients only for tools that appear on the Shopify invoice, and some larger merchants have procurement rules that require Shopify Billing as the payment channel. In both cases an app subscription is the right answer regardless of the price gap.

You want bot management to live under Apps in Shopify Admin. A few operators want every tool reachable from inside Shopify Admin so a single admin login covers everything. An app delivers that; a script tag does not.

For every other case, Paths 1 and 2 are the better choice. They are faster, they cost less, and they do not require granting an external vendor any access to your customers, orders, or discount codes.

Will it work on every Shopify theme?

Effectively yes for Online Store 2.0 themes, which covers every theme in the official Shopify Theme Store and every paid theme released since 2021.

OS 2.0 introduced section groups (the header and footer became sections you can edit in the theme customizer) and JSON templates (every template is now a JSON file that references section IDs). The Custom Liquid section type works in any section group, which is why Path 1 above is universal across OS 2.0 themes.

If you are still on a vintage (pre-OS 2.0) theme in 2026, the Custom Liquid section path may not be available; on those themes the theme.liquid edit (Path 2) is the only option. Vintage themes also occasionally override z-index aggressively, which can hide the chat bubble behind other elements. The fix is a one-line CSS override added to your theme's main stylesheet: #chatraj-iframe { z-index: 2147483647 !important; }. Most reputable chatbot vendors will help with this if you open a support ticket.

The longer-term answer for vintage themes is migration. Shopify has been deprecating vintage theme features for years, and most theme vendors who sold vintage themes have shipped OS 2.0 successors. If your store is still on a vintage theme purely because nobody has scheduled the migration, this is a good moment to put it on the roadmap.

Performance impact and Core Web Vitals

A correctly built chatbot widget has no measurable impact on your Shopify store's Core Web Vitals. The two reasons this matters: Google uses Core Web Vitals as a ranking signal, and Shopify's own Web Performance dashboard surfaces LCP, INP, and CLS to merchants on every store.

The async loader pattern (<script async ...>) tells the browser to download the script in parallel with the rest of the page and execute it when it arrives, without blocking the HTML parser. Pasted above </body> or inside a Custom Liquid section that renders in the footer group, the script downloads after the visible content, so Largest Contentful Paint is unaffected.

The chatbot widget itself renders inside an iframe. That isolates its CSS, its JavaScript, and any third-party fonts it loads from your store's render path. Cumulative Layout Shift is unaffected because the iframe is positioned absolutely (fixed in the bottom-right corner) rather than inserted into the document flow.

The only thing to watch is the size of the initial loader. ChatRaj's loader is under 8 KB gzipped; most reputable competitors are in the same range. If a vendor's loader is over 50 KB, that is a red flag worth raising with them.

Lead capture and abandoned-cart recovery on Shopify

The single highest-ROI use case for an AI chatbot on a Shopify store is abandoned-cart recovery via the bot itself. The pattern: a visitor asks the bot a product question (sizing, shipping time, return policy), the bot answers, and if the visitor seems to be drifting away without converting, the bot offers a small discount in exchange for an email.

Captured emails should flow into your existing email marketing stack rather than getting trapped in the chatbot vendor's dashboard. The standard Shopify wiring: chatbot captures email and stores it on a lead record, a webhook fires to Klaviyo, Mailchimp, Omnisend, or your CRM, and the visitor joins your existing abandoned-cart drip. ChatRaj exposes a webhook on every captured lead, so this is a one-time wire-up.

The reason this works better than passive email-pop-up apps on Shopify is intent. A visitor who has just typed a product question into the chat is a much warmer lead than a visitor who saw an exit-intent popup. Operators routinely see 3 to 5 times more captured emails per session from chatbot lead capture than from passive popups.

Two pre-requisites: your bot needs to be trained well enough that visitors actually engage with it (so the answer to the first product question is genuinely helpful), and your email banner copy needs to feel like a thank-you rather than a paywall ("Want 10% off? Drop your email and I will send the code right away."). Both are within reach on the recommended Custom Liquid install path above.

What to do next

If you came to this page to figure out the install, the rest is straightforward. Pick a chatbot vendor that ships a plain script tag (so all three install paths above are open to you), follow the Custom Liquid section steps, and verify in an incognito window. If you are still evaluating vendors, our /for/shopify page goes deep on the ChatRaj-specific product story, our /use-cases/ecommerce-support page covers the full e-commerce playbook, and /pricing covers the cost picture across plans.