SupportFast SupportFast Guide

Website

Installing the widget on Shopify

Add the chat widget to every page of your Shopify store by pasting the code into the theme's main file.

View as Markdown

In Shopify, every page of the store is built from one theme file, theme.liquid. Paste the widget code there and the chat appears on the home page, collections, products and cart.

Before you start

  • The widget code of an Active chat agent, copied from Chat agentAgent profileShare, Chat button panel.
  • Access to the Shopify admin with permission to edit the theme.
Video: Put the chat on your website AC-10The chat button code, WordPress and Shopify, the publishing domain, the check.

#Paste the code into the theme

  1. Open the themes

    In the Shopify admin, go to Online StoreThemes (in an admin set to Italian, Negozio onlineTemi).

  2. Open the code editor

    Next to the published theme, press the three dots and choose Edit code (Modifica codice in Italian).

  3. Open theme.liquid

    In the file search on the left, type theme.liquid and open the file. It's in the layout folder.

  4. Find where the header closes

    Look for the </head> tag with Ctrl + F (on Mac ⌘ + F).

  5. Paste and save

    Paste the widget code on the line right before </head>, then press Save (Salva in Italian).

Screenshot: theme.liquid with the widget codeThe Shopify code editor with the layout/theme.liquid file open, the widget code highlighted right before </head> and the Save button. Test store, sample agent code.

Duplicate the theme before editing it. From the theme's three dots, choose Duplicate: if something goes wrong, you have a copy ready to publish.

Result

The widget appears on every page of the store that uses the theme.

#How to check

Open the store in a private window and follow the check in Installing the widget, checking the home page, a product page and the cart. If the store is password protected, enter the password: the password page doesn't show the widget.

#Good to know

  • The code lives in the theme. If you publish another theme, or install a new version of yours, check that the code is still there. If it's missing, paste it again.
  • No widget at checkout. The payment pages aren't built from the theme file, so the chat doesn't appear there.
  • The .myshopify.com address. If you fill in the publishing domain with your own domain, the widget doesn't appear on the address ending in .myshopify.com.

#Removing the widget

Open theme.liquid again, delete the line with the code and press Save.

#Frequently asked questions

The chat button covers the cart or another app's button. What do I do?

Move it to the other side in Agent profileInterface, with Button position.

Can the chat recognize customers who have an account in the store?

Yes, with a few lines in theme.liquid. The example is in Passing user data.

#See also

Installing the widgetThe code, the publishing domain and the check. Passing user dataRegistered customers' data, with the Shopify example. Website widgetWhat to do if the widget doesn't appear or covers other elements.