Adding Tidio Chat to Your Website

Shopify Installation Guide

In this article we will show you how to easily install Tidio Chat in your Shopify Store. There are two options available for you:

Option 1. Install Tidio Chat using a plugin

For the best way to install Tidio Chat to your Shopify store, simply install our plugin from your Shopify panel.

1. First, log into your Shopify account and select the store you would like to add chat to. Click on to the Apps (1) tab and select Visit Shopify App Store (2).

2. Next, search for “Tidio” In the search bar and select Tidio Live Chat from the results.

3. Click on the Get button to download Tidio Chat to your Shopify store.

4. Select the Install App button on the page that follows. You will then be taken to your Tidio Chat panel where you can customize your chat.


How to log into the Tidio Chat panel.

After you install Tidio Chat to your site, go to the Apps section in Shopify and select Tidio Live Chat from the Installed apps

You will be automatically transferred to your chat panel where you can edit the chat to your preferences.

If you would like to be able to log into Tidio Chat at or to login with your desktop and mobile apps, please select the Create your account button in the top left of your Tidio Chat panel.

Option 2. Install Tidio Chat via JavaScript code

1. You can easily add an existing project to your Shopify website by adding the chat manually. If you want to transfer your chat from another website to Shopify, please copy the code snippet from your chat panel. You can find this in the Channels (1) > Integration (2) section.

2. After clicking on the Integration section, please Click here to see a set of instructions with a JavaScript code. Copy the JavaScript code to your clipboard.

3. Next, go to your Shopify panel and select the Online Store tab.

4. In the Themes (1) section, you will find a 3 dots menu ( . . . ). Click on it and select the Edit HTML/CSS (2) option from the list.

5. Choose the theme.liquid file under the Layout folder and paste the code from above right before the closing tag. The screenshot below will help you find this. Please remember to save the changes and refresh your website once you are finished.

In case you run into any troubles during installation or experience any difficulties with our application, please contact us via chat on our website or at [email protected]

Go Back