Skip to content
Platforms

Shopify

How to add the Otto chat code to your Shopify theme, where to get a product feed, and what to do if the chat disappears after a theme change.

On this page

Shopify is an online store platform. You add the chat code to the theme.liquid file of your theme in the code editor, which takes about 5 minutes. If you do not work with theme code, send it to your developer.

What you need

  • An Otto account. You find the chat code in the panel under Overview, on the Installation & integrations card, on the Shopify tile.
  • Access to the Shopify admin as the store owner, or as staff with the Themes and Edit code permissions.
  • A purchased theme. Shopify lets you edit the code of a paid theme only after you buy it, not during its trial.

Chat code

On the Shopify tile, click Copy code. You get one line with your company’s public key:

<script async src="https://ottoai.sk/widget.js" data-otto-key="pk_vas_kluc"></script>
The sample shows pk_vas_kluc instead of a key, the tile gives you the code with your own key. The key is not a password, you do not need to hide it. Add the code once, it covers the whole site.

Adding the code

  1. In your Shopify admin, go to Online Store, Themes.
  2. Next to your current theme, click the three dots button and duplicate the theme first. The copy is your backup.
  3. In the same three dots menu, choose Edit code.
  4. In the file list, open the layout folder and the theme.liquid file in it.
  5. Paste the chat code on its own line just before </body>, which is near the end of the file.
  6. Click Save.

A guide with pictures and answers to common questions is at ottoai.eu/otto-for-shopify.

The code is stored in the theme. When you publish a different theme, add it there too.
The chat does not show at checkout. Shopify does not run theme scripts there.

You can also follow the official Shopify help.

Email for support

Is support, an agency or a developer adding the code for you? Send them this email and paste the chat code from the tile below it.

Hello,

please add the attached Otto chat code to the current theme of our Shopify store. It belongs in layout/theme.liquid just before </body>, so it is on every page. It is a single line that loads asynchronously.

Thank you.

Checking it works

  1. Open your website in a new browser window and reload. A chat bubble should pop up in the bottom right.
  2. Send the chat a test question. Otto answers within a few seconds.
  3. In the panel, under Settings, Connections, the Your website row shows the domain the chat runs on.
The chat may already show in the theme editor preview on the .myshopify.com address. It moves to your domain on its own the first time it shows up there.

Product catalogue

Shopify does not create a Heureka or Zboží feed. A Heureka or Google format feed with a public address is made by an app from the Shopify App Store. The Google & YouTube channel sends products only to Google Merchant Center and gives no feed address.

Paste the feed address in the panel under Settings, Catalogue, and click Check feed. The panel tells you how many products it found, and Otto keeps the feed up to date on its own. More in Product catalogue.

Troubleshooting

The chat disappeared after a theme change or update

The code is part of the theme, so add it to a new theme again. When you update a theme, Shopify carries code edits over if they do not conflict with the new version. If the theme card says it could not include them, add the code again.

I cannot open Edit code

A paid theme on trial has to be bought first. If you are staff, the store owner needs to give you the Themes and Edit code permissions.

The store is password protected and the chat is not visible

The chat does not show on the password page and Otto cannot read your store pages. You will see the chat after entering the password. Give Otto your products through a feed.

Prices from a Heureka feed are in the wrong currency

A feed from an app usually lives on the app's address, so Otto cannot tell the currency from it. In the Otto panel, go to Settings, Catalogue and set Price currency.

Also check

  • Reload the page without cache with Ctrl+F5, or open it in a private window.
  • The code should be on the page only once, a second copy is ignored.
  • A cookie consent bar can block scripts until the visitor agrees. If the chat only shows up after consent, see Cookie consent.
  • If your site sends a Content-Security-Policy header, allow https://ottoai.sk in it, as shown in Content-Security-Policy.
  • In the browser console (F12), look for messages starting with [Otto]. They tell you what the chat is missing.
  • Still nothing? Write to us at podpora@ottoai.sk and include your website address.

Removing the chat

In Online Store, Themes, open Edit code on your current theme, delete the chat code line from layout/theme.liquid and click Save.