Documentation

Shopify

Install the Agentkit widget in a Shopify theme using its complete generated code.

Add the Agentkit widget to a Shopify storefront by placing its complete generated embed code in your theme's theme.liquid file.

In Agentkit, open Channels → Website embed → Chat widget, enable the channel, and copy the complete generated code. It contains two script tags: an inline bootstrap and an asynchronous loader. Keep both tags together. Shopify recommends duplicating your theme before changing its code.

Method 1: Edit theme.liquid

Add the widget site-wide by editing your published theme:

  1. In the Shopify admin, go to Online Store → Themes.
  2. On the row for your live theme, click the ... (Actions) menu → Edit code.
  3. In the Layout folder on the left, open theme.liquid.
  4. Scroll to the bottom and paste your embed code just before the closing </body> tag.
  5. Click Save.

Paste the copied code exactly as generated. After saving, check the rendered storefront page source for both <script> tags.

The widget appears on every storefront page — product, collection, cart, home.

Method 2: Duplicate First, Then Edit (Recommended)

If you want a safe rollback:

  1. Online Store → Themes.
  2. On your live theme, click the ... (three-dot) menu → Duplicate. A copy appears at the bottom of the theme list.
  3. Edit the duplicate's theme.liquid as above.
  4. Click the ... menu on the duplicate → Preview to test.
  5. When happy, click the ... menu → Publish to make it live.

One-page placement

For a single page, ask a theme developer to scope both generated tags in a page template. Verify that both tags appear on that page and not on other storefront pages. The Shopify Pages rich-text editor is not a verified installation path for this widget.

Requirements

  • You need Shopify theme-code access. A paid theme still on trial cannot be edited until purchased. Your staff role needs Themes and Edit code permissions. See Shopify's theme-code guide.
  • Keep the Agentkit Chat widget channel enabled when testing the public store.
  • If domain restrictions are enabled, allow the exact origin used for the theme preview and the live storefront. Remove a temporary preview origin after testing.

After Publishing

If the widget does not appear on the public storefront:

  1. Hard-refresh the page (⌘+Shift+R on Mac, Ctrl+F5 on Windows).
  2. Open the site in an incognito window.
  3. Check the browser console for errors.

Troubleshooting

Widget doesn't show up.

  • Confirm you edited the live theme (or published the duplicate).
  • Confirm both generated script tags appear before </body> in the rendered storefront source.
  • Confirm the storefront domain is allowed by your Agentkit domain restrictions.

Widget overlaps Shopify's chat or cart drawer.

  • Adjust widget position in your agent's Design settings.

Widget appears on the editor but not the live store.

  • Make sure you clicked Save after pasting — the code editor does not autosave.

Testing

  1. Open your storefront in an incognito window.
  2. Look for the chat bubble in the corner.
  3. Click to open and send a test message.
  4. Confirm both generated script tags are present in the rendered page source.

Embedding the widget and connecting your store are two separate things. The embed code above puts the chat widget on your storefront. A separate Shopify connection — made from your agent's Actions → Integrations tab — additionally lets the agent search your live catalog and look up an order's status inside the conversation.

You can do either one on its own. Use the embed alone if the agent should answer from your training content only, and add the store connection when you want live product and order data.

Connecting the store supplies the credentials but does not switch anything on by itself: afterwards, add the Search products and Get order status actions under your agent's Actions tab and enable each one you want the agent to use.

Set up Shopify actions →

Next Steps