Install the chat on Shopify

On Shopify you install the chat by pasting your agent’s line of code into the theme’s theme.liquid file, which is the template the store’s pages share. You paste it once, right before </body>, and the chat appears across the store except at checkout. There is no iAgentify app in the Shopify App Store, and you do not need one.

Before you start

• The agent has to be active. An agent that is a Draft or is Paused does not show the chat even when the code is in place. Switch it on with the Activate button (or Resume, if it was paused) on the agent’s page.
• You need to be able to edit the theme code. The store owner can, and so can a staff account with permission to manage themes. If you do not see the Edit code option, it depends on your permissions or on your Shopify plan: ask whoever manages the store or check the Shopify help.
• The code is stored in the theme. If you publish a different theme later, you will have to paste it into the new one.

Copy your agent’s code

1. In iAgentify, go to Agents and open your agent.

2. Open the Widget tab and, inside it, Installation.

3. Under Installation code, press Copy. It is a single line, like this one:

   <script src="https://backendiagentify.yarqat.com/widget.js" data-agent="your-agent-key" async></script>

Always copy the one in the app, not the one in this article: yours carries your agent’s public key. There is more detail in install the chat on your website.

Paste it into your store’s theme

1. In the Shopify admin, go to Online Store › Themes.

2. Find the published theme, which is the one your customers see, and open its three-dot menu.

3. Choose Duplicate. Shopify keeps a copy of the theme as it is now, in case you need to go back.

4. Open the three-dot menu of the published theme again and choose Edit code. This opens the code editor, which is where Shopify lets you change the theme’s files.

5. Open the theme.liquid file. It is in the layout folder; if you do not see it, type its name into the editor’s file search.

6. Scroll to the end of the file and find the </body> tag.

7. Paste the chat line on the line above it:

       <script src="https://backendiagentify.yarqat.com/widget.js" data-agent="your-agent-key" async></script>
     </body>
   </html>

8. Press Save. The change applies to the store straight away, with nothing else to publish.

Check that it works

1. Open your store in a private browser window. Look at it at its public address, not inside the theme editor.

2. The chat button appears in a bottom corner of the page. Press it.

3. Type a question. The reply arrives within seconds and the conversation shows up under Conversations, inside the app.

That test is a real conversation: it uses credits and counts in your analytics.

Common problems on Shopify

• You edited a theme that is not the published one. If you pasted the line into the copy or into an unpublished theme, your customers do not receive it. Check that it is in the theme.liquid of the published theme.
• The chat does not show at checkout. Checkout pages do not use theme.liquid, so the chat does not appear on them. That is how Shopify works, not a fault in the installation.
• The store is password protected. The page that asks for the password uses a different file (password.liquid) and does not show the chat. Enter the password and you will see it on the rest of the store.
• Some pages use a different template. A page that does not use theme.liquid, such as some landing pages created with design apps, does not carry the chat.
• You switched or updated the theme. If you publish a different theme, paste the line into the new theme’s theme.liquid. After updating the theme to a new version, check that the line is still there: changes made in the code may not carry over to the new version.

Add your store’s domains to the allowed domains

While the Allowed domains list is empty, any website that copies your line of code can load your chat and use up your credits. Under Agents › your agent › Widget › Installation › Allowed domains, type your store’s domain, press Add and then Save changes. A domain such as yourcompany.com also includes www.yourcompany.com.

If your store does not have its own domain yet and is seen at its Shopify address, add that full address, for example your-store.myshopify.com. Do not use a wildcard such as *.myshopify.com, which would let any Shopify store use your chat. If you sell on several domains, by country or by language, add them all: at an address that is not on the list the chat does not appear. The details are in limit the chat to your domains.

If the chat does not appear

On Shopify the most common causes are that the line is in a theme that is not the published one, or that you are looking at a page that does not use theme.liquid. Then check that the agent is active and that the store’s domain is under Allowed domains. The full list, with how to check each cause, is in the chat does not appear on your website.