How to Add an AI Chatbot to Your Shopify Store Without an App

Most guides to adding an AI chatbot to Shopify start with "install this app from the App Store." That path works, but it comes with an app subscription on top of your Shopify bill, another vendor with access to your store, and whatever bloat the app injects into your theme.

There's a simpler route. Shopify lets you edit your theme's HTML, and an AI chat widget is, at bottom, one script tag. If you can paste a snippet before a closing </body> tag, you can have an assistant on your storefront in a few minutes, on any Shopify plan, with nothing installed from the App Store.

This walkthrough uses LLMGraph, which gives every deployed workflow an embeddable chat widget out of the box. The condensed version of these steps lives on the Shopify integration page.

What you're actually building

Two pieces:

1. A workflow that answers questions. You build it in LLMGraph's visual builder and ground it in your store's real content: shipping and returns policies, sizing guides, FAQs, product docs. Grounding matters. An assistant that answers from your documents deflects the "where's my order policy" tickets; a generic chatbot that guesses creates new ones.
2. A widget on your storefront. A floating chat bubble that talks to the deployed workflow. This is the script tag.

Step 1: Build and deploy the workflow

In LLMGraph, create a workflow on the canvas or describe what you want in chat and let it assemble the graph. Upload the documents that already answer your customers' most common questions. Test it on the canvas by asking the questions your support inbox actually gets, and tighten the behavior until the answers are right: tone, refusal boundaries, when to hand off to a human.

Then deploy. Every deployment gets a REST endpoint and a widget. From the deployment page, copy two things:

• The endpoint URL for the deployment.
• A publishable key, which starts with pk_live_. Generate one from the deployment's key section.

The distinction between key types is the crux of doing this safely. A secret key (sk_live_) carries full authority and belongs on a server, never in a web page. A publishable key (pk_live_) is designed to be visible in page source: it only works from the browser origins you allowlist, and you can cap its daily spend. Shopify doesn't give you a server to hide secrets behind, so the publishable key is the correct tool here.

Step 2: Allowlist your store's domains

On the deployment page, add your storefront origins to the allowed origins list:

• https://your-store.myshopify.com
• https://www.your-store.com (your custom domain, if you have one)

The API enforces this list per request. A publishable key used from an origin that isn't on the list gets a 403, so a copied key is useless anywhere except your own store. Add the exact origins your customers actually browse on; a subdomain wildcard like *.your-store.com works too.

Step 3: Paste the snippet into your theme

In Shopify admin: Online Store > Themes, find your live theme, open the ... menu, and choose Edit code. Open layout/theme.liquid and paste this just before the closing </body> tag:

<script
  src="https://llmgraph.ai/widget.js"
  data-endpoint="YOUR_DEPLOYMENT_ENDPOINT"
  data-api-key="pk_live_YOUR_PUBLISHABLE_KEY"
  data-input-name="user_input"
  data-output-name="response"
  data-title="Ask us anything"
  defer
></script>

Replace YOUR_DEPLOYMENT_ENDPOINT with the endpoint URL you copied and pk_live_YOUR_PUBLISHABLE_KEY with your publishable key. The LLMGraph dashboard generates this exact snippet with your values already filled in, so you can also just copy it from there.

Prefer not to touch theme.liquid? Use the theme editor instead: Online Store > Themes > Customize, add a Custom Liquid section, and paste the same snippet. Same result, no code editor involved.

Save, reload your storefront, and the chat bubble is live.

Customizing the look

The widget takes its branding from attributes on the same tag:

• data-title sets the header text ("Ask us anything", "Support", whatever fits).
• data-primary and data-secondary set your brand colors as hex values.

The widget renders inside a shadow root, so your theme's CSS can't break it and its CSS can't leak into your theme.

Will it slow the store down?

No. The tag carries defer, so the browser downloads the script without blocking HTML parsing and runs it only after the page is parsed. The widget itself is small, dependency-free vanilla JavaScript. Your product images are doing far more to your load time than this tag ever will.

What it costs

There's no app fee because there's no app. The widget is included in every LLMGraph plan, and every plan starts with a 14-day free trial. Publishable keys can carry a daily budget cap, so a traffic spike or a determined prankster can't run up your bill: when the cap is hit, the widget stops answering until the next day.

Where to go from here

Start with the ten questions your support inbox sees most. Ground a workflow in the documents that answer them, ship the widget, and watch what customers actually ask. The transcript of real questions is the best roadmap for what to teach the assistant next.

The short version of this guide, plus an FAQ, lives at llmgraph.ai/integrations/shopify. If you'd rather see the building part end to end first, the customer support assistant walkthrough covers it with a video.

Ready to try it against your own store content? Start a free trial. You can be answering real customer questions this afternoon.