WebChatAgent Logo

Shopify

Add an AI chatbot to your Shopify store in just a few minutes — no app installation required.

Method 1: Theme Editor (Recommended)

  1. Open the Theme Editor — In your Shopify admin, go to Online Store > Themes and click Customize on your active theme.
  2. Add a Custom Liquid block — In the left sidebar, scroll down and click Add section. Search for Custom Liquid (or Custom HTML depending on your theme).
  3. Paste the code — Enter the following code:
<script src="https://webchatagent.com/widget/web-chat-agent.js" async></script>
<web-chat-agent chatbot-id="YOUR_ID"></web-chat-agent>
  1. Replace YOUR_ID with your actual Chatbot ID from the WebChatAgent dashboard.
  2. Save — Click Save in the top right corner. The chat widget will now appear on your store.

Method 2: Edit Theme Code

Use this method if your theme does not support Custom Liquid sections or if you want the widget on every page.

  1. Go to Online Store > Themes and click the three dots (⋯) next to your active theme, then select Edit code.
  2. In the Layout folder, open theme.liquid.
  3. Paste the following code before the closing </body> tag:
<script src="https://webchatagent.com/widget/web-chat-agent.js" async></script>
<web-chat-agent chatbot-id="YOUR_ID"></web-chat-agent>
  1. Replace YOUR_ID with your Chatbot ID and click Save.

Finding Your Chatbot ID

Log in to your WebChatAgent dashboard, open your chatbot, and go to the Widget Integration section. Your Chatbot ID is displayed there and can be copied with one click.

Troubleshooting

  • Widget not showing? — Clear your Shopify theme cache and try viewing your store in an incognito window.
  • Widget only on certain pages? — If you used Method 1, make sure the Custom Liquid section is placed in a template that loads on all pages (e.g., the footer area).
  • Conflicts with other apps? — Try disabling other chat or popup apps temporarily to rule out conflicts.