Skip to main content

Adding Chat to Shopify

Add your TAB chat widget to your Shopify store. Works with all Shopify themes.

Looking to connect your store data?

This guide covers adding the chat widget to your Shopify storefront. If you want to connect your Shopify store so your agent can search products, check orders, and more, see Connecting to Shopify.

What you need​

  • Access to your Shopify admin
  • Your TAB embed code (from Channels > Chat Widget > Embed)

Step-by-step guide​

Step 1: Go to your Shopify admin​

Log in to your Shopify store and go to the admin dashboard.

Step 2: Open theme editor​

  1. Click Online Store in the left sidebar
  2. Click Themes
  3. Find your current theme and click Actions > Edit code

Step 3: Find the theme.liquid file​

  1. In the left sidebar, look under Layout
  2. Click on theme.liquid

This is the main template file that loads on every page.

Step 4: Add the code​

  1. Scroll to the bottom of the file
  2. Find the </body> tag
  3. Paste your TAB embed code just before </body>

It should look something like:

    <!-- Your other code above -->

    <script src="https://widget.theagentbuilder.ai/..." async></script>
  </body>
</html>

Step 5: Save​

Click Save in the top right corner.

Step 6: Test it​

  1. Go to your store's website
  2. Look for the chat bubble
  3. Click it and test a conversation

Alternative: Use Shopify's app integrations​

Some users prefer not to edit code. You can also:

  1. Look for "Custom code" or "Script injection" apps in the Shopify App Store
  2. Install one and use it to add your embed code
  3. These apps handle the code injection for you

Where the chat appears​

Once installed, the chat bubble will appear on:

  • Home page
  • Product pages
  • Collection pages
  • Cart page
  • All other pages

Shopify Plus​

If you're on Shopify Plus:

  • The standard method above works
  • You can also use checkout.liquid for checkout pages
  • Consider using Script Editor for more control

Troubleshooting​

Chat not showing​

  1. Clear your browser cache
  2. Make sure the code is saved
  3. Try viewing in incognito mode
  4. Check you added code before </body>, not after

Chat shows on wrong pages​

The standard installation shows the chat everywhere. To limit where it appears, you'd need conditional Liquid code or to add the script only to specific templates.

Theme update removed my code​

When you update your theme, custom code can be lost. After theme updates:

  1. Re-add your embed code
  2. Or use an app that handles this automatically

Conflicts with other apps​

If other chat or popup apps are installed, they might conflict. Try:

  • Disabling other chat apps temporarily
  • Checking for JavaScript errors in browser console
  • Adjusting widget position to avoid overlaps

Customizing for Shopify​

Match your store's colors​

Go to TAB's Channels > Chat Widget and customize colors to match your Shopify theme.

Product-focused welcome message​

For e-commerce, try welcome messages like:

  • "Hi! Looking for something? I can help you find the perfect product."
  • "Need help with your order? Ask me anything!"

Need more help?​

Check our Chat Widget Issues guide or contact support.