How to add live chat to Shopify

Before you start

You need a free Quarito account with your website added. Create one if you haven't yet: it takes a minute and there's no card to enter.

Then copy your install code from Administration › Chat Widget › Install. It's one line that looks like this, with your own site's ID in it:

<script src="https://chat.quarito.com/l/YOUR-SITE-ID.js" async></script>

• A theme you own. Shopify lets you edit a theme's code once it's on your store; a theme you're only trying out has to be bought first.
• Use it exactly as it is. Don't change the address or download the file: the chat updates itself from there.
• You only paste it once. Colours, messages and everything else change from the dashboard and reach your site within about a minute.

Add the code to your theme

1. In your Shopify admin, go to Online Store › Themes.
2. First, make a copy to go back to: on your current theme, choose ⋯ › Duplicate.
3. On your current theme, choose ⋯ › Edit code.
4. In the Layout folder, open theme.liquid.
5. Find </body> near the end of the file (Ctrl+F, or ⌘+F on a Mac) and paste your install code on the line above it.
6. Choose Save.

    …
    {% sections 'footer-group' %}

    <script src="https://chat.quarito.com/l/YOUR-SITE-ID.js" async></script>
  </body>
</html>

Every page that uses this layout now has the chat. You don't need an app from the Shopify App Store.

When you change or update your theme

The code lives in your theme, so a new theme (or a theme update that replaces theme.liquid) won't have it. After you switch or update, open theme.liquid again and check that the line is still above </body>. If not, paste it back.

The chat on some pages only

Keep the code in theme.liquid, then list the pages that shouldn't show the chat under Chat Widget › Behavior › Pages without the chat, for example /account/* or /policies/*.

If the chat doesn't show on Shopify

• You edited a different theme. Only the theme marked Current is what visitors see. Add the code to that one.
• Your store is password-protected. The chat still shows to you once you're past the password page, but our installation check can't get in. Open the store yourself to test.
• The code went into a section file. Paste it into layout/theme.liquid, so it's on every page.

Check that it works

1. Open your site in a private (incognito) window, so you see it the way a visitor does.
2. Look for the chat button in the bottom corner of the page, then send yourself a test message.
3. In the dashboard, the message appears in your Inbox as it arrives. Reply, and watch the answer reach the website.

You can also choose check the installation on the Install tab of Administration › Chat Widget: we load your home page and look for your code. No button? Go through when the chat doesn't show.

Set up the rest

The chat is on your Shopify site. A few minutes in the dashboard makes it yours:

• Customize the chat: your colour, logo, chat button and welcome message.
• Set your office hours, so visitors know when you'll answer.
• Save replies to the questions you hear most.
• Invite your team to answer chats with you.