How to Install Tidio on Shopify

In this article, we will show you how to install Tidio Chat in your Shopify Store. Before you start, please visit our official plugin page on

There are two options for installation available:

NOTE: Please, make sure the Tidio chat widget is installed on your website via the use of only one installation method – the plugin or the javascript code.

Install Tidio Chat via the Shopify plugin

The best way to install Tidio Chat in your Shopify store is by our official plugin available in Shopify App Market. 

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).

You can download our Tidio app from the Apps section inside your Shopify panel

2. Next, search for “Tidio” In one of the search bars (at the top of the screen or the one visible on the screenshot below) and select Tidio Live Chat from the results.

To find our app – search for the Tidio App
Our Tidio App in the Shopify Market Place

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

Click on the ‘add app’ button to add our app to your Shopify store

4. Select the Install App button on the page that follows. That will transfer you to your Tidio Chat panel where you can customise your chat.

You will be asked about your permission and then you will be able to install our chat

All set. Tidio Chat is installed!

The next steps will take you to your admin panel where you can customise your chat. 

Log into and configure the Tidio Chat Panel

You will be immediately taken to what we call a “Starting Tour.”

Customize the widget to meet all your needs

Select what features are most important for you. We picked Automation + Bots and a Live chat on your site. Click Continue.

Next, please edit the basic appearance of your chat widget:

You can configure your live chat – for example. change the color of the chat’s widget

Fill in the remaining details.

Fill up all the account information – if you will have some more questions regarding that – please contact us at [email protected]

If you get a warning that your email is already in use, please contact our support team on chat. We’ll help you sort it out. 

The preview option allows you to see our chat widget on your website

Press continue, and your chat will be ready to use on your website. Use the preview option to see the widget on your site: Give yourself a pat on the back; your customers can now write to you on chat!

An example of the Tidio Chat widget

Alternative method – Install Tidio chat via javascript code

If you wish to install the chat using an existing account – this is the option for you! Shopify-exclusive bots and automations will still work correctly, although you will not be able to upgrade your plan via Shopify – only directly via the Tidio panel.

1. You can 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 Settings > Channels > Integration  section.

You will find your unique Tidio code in the Channels > Integration section

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

An example of how your unique JavaScript code will look

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

Go to the ‘Online Store’ section in your Shopify Panel to install your Tidio JavaScript code

4. In the Themes (1) section, you will find the Actions menu. Click on it and select the Edit code (2) option from the list.

You can edit your code in the Online Store > Themes > Edit Code section

5. Choose the theme.liquid file under the Layout folder and paste the code from above, right before the closing </body> tag. The screenshot below will help you find this. Please remember to save the changes and refresh your website when you finish.

Choose the theme. liquid folder to insert the javascript code
Remember to ‘save’ all the changes made in your website’s code

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].

Can't find what you're looking for?