On this page

Website Builders

Shopify Integration

Deploy your Chatsby AI agent on your Shopify store. Covers theme.liquid method, Shopify 2.0 app blocks, product recommendations, and troubleshooting.

Shopify Integration

Shopify is one of the most popular e-commerce platforms in the world, and adding a Chatsby AI agent to your store can dramatically improve customer experience. From answering product questions to guiding shoppers through checkout, your AI agent works around the clock to reduce support tickets and increase conversions. This guide walks you through every step of the integration process, including Shopify 2.0-specific methods, e-commerce optimization tips, and common troubleshooting scenarios.

Prerequisites

Before you begin, ensure you have the following:

RequirementDetails
Shopify storeAn active Shopify store on any plan (Basic, Shopify, Advanced, or Plus)
Store admin accessYou need permission to edit theme code
Chatsby agentA trained agent set to Public with at least one data source
Embed scriptCopied from the Connect tab in your Chatsby dashboard

Your embed script is available on the Connect tab of your agent dashboard. Copy it before proceeding.

<script
  src="https://chatsby.co/widget.min.js"
  bot-id="YOUR_BOT_ID"
  async
  defer
></script>

Method 1: Theme.liquid (Works with All Themes)

This is the most reliable method and works with every Shopify theme, including legacy themes and Shopify 2.0 themes.

Open the Shopify Admin

Log in to your Shopify admin panel at your-store.myshopify.com/admin.

Navigate to Theme Code Editor

Go to Online Store > Themes. Find your currently active theme, click the three-dot menu (...), and select Edit code.

Open the theme.liquid File

In the left sidebar file browser, expand the Layout directory and click on theme.liquid. This is the master layout file that wraps every page on your store.

Paste the Embed Script Before the Closing Body Tag

Scroll to the bottom of the theme.liquid file. Locate the closing </body> tag. Paste your Chatsby embed script immediately above this tag:

    <!-- Chatsby AI Agent -->
    <script
      src="https://chatsby.co/widget.min.js"
      bot-id="YOUR_BOT_ID"
      async
      defer
    ></script>
  </body>
</html>

Save the File

Click Save in the top-right corner. The Chatsby widget is now live across every page of your Shopify store, including product pages, collection pages, the cart, and the homepage.

Method 2: Shopify 2.0 App Embed Blocks

If your store uses a Shopify 2.0-compatible theme (such as Dawn, Craft, Sense, or Ride), you can use the theme customizer's App Embed feature for a code-free experience. However, since Chatsby does not currently have a dedicated Shopify app listing, this method uses the Custom Liquid section as an alternative.

Open the Theme Customizer

Go to Online Store > Themes and click Customize on your active theme.

Access App Embeds or Add a Custom Liquid Section

In the customizer sidebar, navigate to the footer section of your theme. Click Add section and select Custom Liquid.

Paste the Script in the Custom Liquid Block

In the Custom Liquid content field, paste your Chatsby embed script. This will inject the script into every page that uses this layout.

Save and Publish

Click Save in the top-right corner. The widget will appear on your live store immediately.

The theme.liquid method (Method 1) is the most reliable across all Shopify themes. We recommend it as the primary approach unless you have a specific reason to avoid editing theme code.

Verifying the Installation

Visit Your Live Storefront

Open your Shopify store URL in a new browser tab. Use an incognito or private browsing window to bypass any cached pages.

Confirm the Chat Bubble Appears

Look for the Chatsby chat bubble in the bottom-right corner (or bottom-left, depending on your widget configuration). It should appear on every page --- homepage, product pages, collection pages, and the cart.

Send a Test Message

Click the chat bubble and ask a question related to your training data. Verify the agent responds accurately.

Check Multiple Pages

Navigate to at least three different page types (homepage, a product page, and a collection page) to confirm the widget loads consistently across your entire store.

Shopify-Specific Tips

Product Recommendation Context

To get the most out of your Chatsby agent on a Shopify store, train your agent on product-specific data:

  • Product Catalog: Export your product data from Products > Export in CSV format, then upload it as a data source in the Chatsby dashboard. This enables your agent to answer detailed questions about specific products, sizes, materials, and pricing.
  • Shipping Policies: Add your shipping information, delivery timelines, and return policies as a text data source so the agent can answer the most common pre-purchase and post-purchase questions.
  • FAQ Content: If you have an existing FAQ page on your store, add its URL as a website data source in the Chatsby dashboard.

Order Tracking

While the Chatsby widget cannot directly access Shopify's order management system, you can train your agent to provide helpful guidance:

  • Include instructions on how customers can track their orders (e.g., "Visit your order confirmation email and click the tracking link").
  • Add your returns process documentation as training data.
  • Use Chatsby Actions to collect order numbers and escalate to a human agent when needed.

Checkout Page Considerations

By default, Shopify restricts custom scripts on checkout pages for stores not on the Shopify Plus plan. The Chatsby widget will not appear on the /checkout page on Basic, Shopify, or Advanced plans. On Shopify Plus, you can add the embed script to the checkout layout via Settings > Checkout > Additional Scripts.

Troubleshooting

Widget Not Appearing

Possible CauseSolution
Script not saved in theme.liquidRe-open the file and confirm the script is present above the </body> tag
Agent not set to PublicEnable the Public toggle on the Connect tab in the Chatsby dashboard
Theme preview vs. live themeMake sure you edited the active theme, not a draft or unpublished theme
Browser cacheClear your browser cache or test in an incognito window

Theme Conflicts

Some heavily customized Shopify themes may include JavaScript optimization that interferes with third-party scripts. If the widget does not appear:

  1. Check the browser Developer Tools console (F12 > Console) for JavaScript errors.
  2. Temporarily switch to the default Dawn theme to verify the issue is theme-specific.
  3. Contact your theme developer and ask them to whitelist chatsby.co in any script optimization or lazy-loading configuration.

Shopify CDN and Caching

Shopify uses an aggressive CDN that caches storefront pages. After adding the embed script, changes may take a few minutes to propagate. If the widget does not appear immediately:

  • Wait 2--5 minutes and reload the page.
  • Append ?v=nocache to your URL to bypass the CDN temporarily.
  • Open the page in an incognito window to confirm the widget loads for new visitors.

Dawn Theme Specifics

Shopify's default Dawn theme is fully compatible with the Chatsby widget. No special configuration is needed. The widget renders above Dawn's sticky footer and does not interfere with the theme's built-in lazy loading or section rendering. If you experience layout issues on Dawn, ensure your embed script is placed inside theme.liquid (the layout file) rather than inside a section or template file.

Updating the Widget

The Chatsby widget is served from a CDN and updates automatically. You do not need to modify your Shopify theme code when Chatsby releases new features. To change which agent is displayed on your store, update the bot-id attribute in your embed script to the new agent's ID and save the theme.liquid file.

FramerSlack