Demeterics.ai (Beta)
Log In Get Started

Shopify Integration Guide

Learn how to integrate Demeterics into your workflows with step-by-step guides and API examples.

Shopify Integration Guide

Add the Demeterics AI Chat widget to your Shopify store using the theme editor.

Requirements

  • A Shopify store (any plan)
  • A Demeterics AI Chat widget (get your widget key from the AI Chat dashboard)
  • Staff access with permission to edit your theme

Important: Theme code does not run on Shopify's checkout, Thank you, or Order status pages. The widget will appear on your storefront — home, collection, product, cart, and page templates — but not during checkout.

This method works site-wide across every storefront page.

Step 1: Get Your Widget Code

  1. Log into your Demeterics dashboard
  2. Go to AI Chat
  3. Click on your widget
  4. Copy your Agent Key (e.g., DEM-A4E4OWSVGHBN)

Shopify recommends backing up before editing theme code:

  1. From your Shopify admin, go to Online Store → Themes
  2. Find your live theme and click … → Duplicate
  3. Make your edits on the duplicate, then publish it once you've tested

This makes it easy to discard your changes and start again.

Step 3: Open the Code Editor

  1. From your Shopify admin, go to Online Store → Themes
  2. Find the theme you want to edit and click … → Edit code
  3. In the file list, open the Layout folder
  4. Click theme.liquid

Step 4: Add the Widget Code

  1. Scroll to the bottom of the file and find the closing </body> tag
  2. Paste this code just before </body>:
<!-- Demeterics AI Chat Widget -->
<script src="https://demeterics.com/widget/embed.js?k=DEM-YOUR-KEY-HERE" async></script>
<dem-agent name="default" title="Need help?" state="minimized"></dem-agent>
  1. Replace DEM-YOUR-KEY-HERE with your actual Agent Key
  2. Click Save

Why before </body>?: Your store's content loads first, so the widget never slows down your product pages.

Watch your quotes: If you retype the snippet, make sure it uses straight quotes ("), not curly quotes. Curly quotes will break the script tag.

Step 5: Test Your Widget

  1. Visit your live storefront (not the theme preview)
  2. The widget should appear in the bottom right corner
  3. Click it and send a test message

Method 2: Custom Liquid Section (No Code Editing)

If you'd rather not touch theme.liquid, you can add the widget to a specific page with a Custom Liquid section.

Limitation: This only applies to the template you add it to, not your whole store.

Steps:

  1. From your Shopify admin, go to Online Store → Themes
  2. Click Customize on your theme
  3. Navigate to the page or template where you want the widget
  4. Click + Add section
  5. Search for and select Custom Liquid
  6. Paste your widget embed code into the Custom Liquid field:
<script src="https://demeterics.com/widget/embed.js?k=DEM-YOUR-KEY-HERE" async></script>
<dem-agent name="default" title="Need help?" state="minimized"></dem-agent>
  1. Replace DEM-YOUR-KEY-HERE with your actual key
  2. Click Save

Note: The floating widget positions itself in the corner of the viewport regardless of where the section sits on the page.

Customization Options

Change the Widget Title

<dem-agent name="default" title="Chat with us!"></dem-agent>

Use Different Prompts on Different Templates

If you've created multiple prompts in Demeterics (e.g., support, sales, product), you can pick one per template using Liquid in theme.liquid:

<script src="https://demeterics.com/widget/embed.js?k=DEM-YOUR-KEY-HERE" async></script>

{% if template contains 'product' %}
  <dem-agent name="product" title="Product Questions?"></dem-agent>
{% elsif template contains 'cart' %}
  <dem-agent name="checkout" title="Need help checking out?"></dem-agent>
{% elsif template contains 'index' %}
  <dem-agent name="home" title="Welcome!"></dem-agent>
{% else %}
  <dem-agent name="default" title="Need help?"></dem-agent>
{% endif %}

Make sure you've created these prompts (product, checkout, home) in your Demeterics dashboard first!

Start the Widget Open

<dem-agent name="default" title="Need help?" state="open"></dem-agent>

Embedded Widget (Inline on Page)

To place the widget inline (not floating), use a Custom Liquid section with:

<script src="https://demeterics.com/widget/embed.js?k=DEM-YOUR-KEY-HERE" async></script>
<dem-agent mode="embedded" name="support" title="Support Assistant"></dem-agent>

Troubleshooting

Widget doesn't appear

Check these:

  1. Did you click Save in the code editor?
  2. Are you editing the theme that's actually published? Edits to an unpublished theme only show in its preview.
  3. Is your widget key correct?
  4. Is your Shopify domain added to Allowed Domains in your Demeterics widget settings?
  5. Clear your browser cache and hard refresh (Ctrl+Shift+R / Cmd+Shift+R)

Check the browser console (F12 → Console tab) for errors mentioning "demeterics".

"Domain not allowed for this agent"

  1. Go to your Demeterics dashboard → AI Chat → Your Widget
  2. Add your Shopify domain to Allowed Domains
    • Built-in domain: yourstore.myshopify.com
    • Custom domain: yourstore.com (and www.yourstore.com)
    • Add all of them if you use more than one
  3. Save and refresh your storefront

Widget doesn't show during checkout

This is expected. Shopify's checkout, Thank you, and Order status pages don't run theme code, so no theme-installed widget appears there. Put your order, shipping, and returns information into your default prompt so shoppers can get those answers before they reach checkout.

Widget appears multiple times

If you added the code in more than one place:

  1. Check theme.liquid for a duplicate snippet
  2. Check the theme editor for a leftover Custom Liquid section
  3. Keep the <script src="...embed.js..."> tag in exactly one place per page

Content Security Policy errors

Some themes and security apps add a restrictive Content Security Policy. If the console shows a CSP error blocking demeterics.com, add this near the top of the <head> in theme.liquid:

<meta http-equiv="Content-Security-Policy"
      content="script-src 'self' https://demeterics.com; connect-src 'self' https://demeterics.com;">

If your theme already sets a CSP, extend the existing directive rather than adding a second one.

Changes disappeared after a theme update

If your code changes are incompatible with a theme update, Shopify removes them. Re-add the snippet to theme.liquid after any theme update, or use Method 2 so the widget lives in a section instead of the layout file.

Ecommerce Tips

Specialized prompts make a real difference on a storefront:

Product pages:

  • Create a product prompt with sizing, materials, and compatibility details
  • Target it with {% if template contains 'product' %}

Cart and pre-checkout:

  • Create a checkout prompt covering shipping times, rates, and returns
  • Target it with {% if template contains 'cart' %} — remember the widget can't run on the checkout itself

General support:

  • Use the default prompt store-wide with your policies, contact details, and FAQ

Need Help?

Email us: support@demeterics.com

We can help with:

  • Placing the snippet correctly in theme.liquid
  • Choosing between theme code and a Custom Liquid section
  • Writing product and shipping prompts for your store
  • Troubleshooting CSP and theme conflicts
  • Advanced widget customization

Additional Resources