Shopify AI Chatbot

A Shopify AI chatbot from Nivon answers shoppers' questions about products, shipping and returns using your own store content. Copy the HTML code from your Nivon dashboard, paste it into your theme's layout file, and save. The chat widget then appears across your storefront.

How do I add Nivon to a Shopify store?

Before you begin

• A Shopify account with permission to edit themes. Store owners have it by default; staff need the Themes permission.
• A Nivon agent that's set up and ready to answer questions.
• Optional but smart: duplicate your live theme first, from the three-dot menu in Online Store > Themes, so you have a backup.

Step 1: Copy the HTML code from Nivon

Log in to the Nivon dashboard, open your agent and go to the Integration tab. Under Add the code manually, select HTML and copy the code. It already includes your published key and chatbot ID.

The code looks like this. Paste the version from your Integration tab rather than this example, so your own values are in it.

<script
  src="https://assets.nivon.ai/agent/widget.min.js"
  data-publish-key="YOUR_PUBLISH_KEY"
  data-chatbot-id="YOUR_CHATBOT_ID"
  defer
></script>
</body>

Step 2: Paste the code into your theme

1. In your Shopify admin, go to Online Store > Themes.
2. Next to the theme you want to edit, click the three-dot menu and choose Edit code.
3. In the Layout folder, open theme.liquid.
4. Find the closing </body> tag near the bottom of the file and paste the Nivon code on the line just above it.
5. Click Save.

Step 3: Make it live

If you edited your live theme, saving is enough and the widget goes live right away. If you edited a copy, preview it, then click Publish on that theme when you're happy with it.

Step 4: Test the chatbot

Open your store in a new browser tab, open the chat widget and ask something a shopper would, such as your return window. Check that the right agent replies.

Only want it on certain pages?

Skip theme.liquid and use the theme editor instead. Open Online Store > Themes > Customize, go to the template you want, add a Custom Liquid section and paste the code into it. The widget then loads only on pages that use that template.

What can you use a Shopify chatbot for?

• Pre-sale questions: sizing, materials, compatibility and stock questions answered from your product pages.
• Shipping and returns: delivery times, costs and return rules answered from your store policies, day or night.
• Fewer support emails: repeat questions get answered on the page, so your team can focus on the ones that need a person.

What if the widget doesn't show up on Shopify?

It's missing on the storefront

• Check that you edited the theme that's actually published, not a copy.
• Check that the code sits above </body> in theme.liquid and that you saved the file.
• Check that you pasted the complete script from the Integration tab.
• If you've added allowed domains in Nivon, add your store's domain too, plus the myshopify.com address if shoppers or you can reach the store there.

It's missing at checkout

That's expected. Checkout and the thank you page are run by Shopify and don't load your theme's layout file, so the widget can't appear there with a theme embed.

It disappeared after a theme change

The code belongs to the theme you edited. If you published a new theme or a fresh copy of a theme update, add the script to that theme's theme.liquid again.

Good to know

• Installing takes a few minutes and works with any Shopify theme, including Dawn and third-party themes.
• Model, tone, appearance and knowledge are managed in Nivon, so changing them doesn't mean editing your theme.
• If you regenerate your published key in Nivon, replace the code in theme.liquid and save.
• When no allowed domain is listed, the widget loads on any site. Once you add one, add your Shopify store's domain to the list as well.
• Installing somewhere else? See Installation Guides for HTML, React, Next.js, WordPress and Google Tag Manager.