tufu
Start free
Docs menu

Set up

Install on Shopify

Put the support chat on a Shopify store by pasting two lines into your theme, and teach the bot your products and policies.

On this page

There's no tufu app to install from the Shopify App Store. You paste two lines into your theme once, and the chat bubble shows on every page of your store.

Before you start#

  • The bot must be public (Bots → Edit → Public).
  • You need to be able to edit your store's theme in Shopify (the store owner, or staff with the Themes permission).
  • Copy the snippets from your bot's Preview page in tufu: they have your team and bot IDs filled in. Below, they're your-team and your-bot.

1. Open your theme's code#

In Shopify, go to Online Store → Themes. Next to your current theme, open the … menu and choose Edit code. Under Layout, open theme.liquid.

2. Paste the two lines#

Paste the script just before </head>:

HTML 
<script type='module' src='https://tufu.ai/widget/v1/tufu-chat.esm.js'></script>

Paste the support chat just before </body>:

HTML 
<tufu-chat team="your-team" bot="your-bot"></tufu-chat>

Press Save. Open your store: the chat bubble shows in the bottom-right corner.

These lines live in this theme only. If you switch to another theme, or install a new version of yours, paste them again.

Add the Ask console to a page (optional)#

The Ask console is a search box that answers from your knowledge, handy on an FAQ or help page. The script from step 2 already covers it. In Online Store → Themes → Customize, open the page's template, add a Custom Liquid section where the box belongs, and paste:

HTML 
<tufu-ask team="your-team" bot="your-bot"></tufu-ask>

Most current Shopify themes have the Custom Liquid section. If yours doesn't, paste the line into the page's HTML instead (the Show HTML button in the page editor).

Teach the bot your store#

Under Knowledge, add a Website source with your store's sitemap, on the address your customers use:

https://yourstore.com/sitemap.xml

Shopify lists your products, collections, pages and blog posts there, so the bot can answer questions about what you sell. Use your own domain, not the .myshopify.com address: tufu only reads the pages on the sitemap's own address.

Shopify keeps your store policies out of the sitemap. Add them as a second Website source, one address per line:

https://yourstore.com/policies/shipping-policy
https://yourstore.com/policies/refund-policy
https://yourstore.com/policies/terms-of-service

When you add products or change prices, open the source and press Rebuild. On the Team plan, tick Refresh every week and tufu reads your store again each week. See Adding knowledge.

Orders#

tufu doesn't connect to your Shopify admin, so it can't look up a customer's order. Questions about a specific order need a person: the customer can press Talk to a human, or the bot hands the chat to you when it can't help, and you answer from the inbox, your email or Slack. If your store has an order tracking page, add it to your knowledge so the bot can point customers there.

If you've locked the bot to your websites#

If your bot has a list of Allowed websites on its Where it appears page, add your store's domain. Shopify's theme editor may show your store on its .myshopify.com address: add that too if you want to see the chat there.

If nothing shows, see Troubleshooting.