Live Chat on Shopify: Add the Widget and Test the Storefront

The simplest Shopify live chat installation is to paste the widget code into your theme layout file so it loads across your storefront. You do not need an App Store app or an order integration for this: the Meetlead widget runs as a separate script in the customer's browser. This guide covers an Online Store with an editable theme: where the code goes, how to prepare and what to check on a phone.

Before you start, name one person responsible for the rollout and pick a single embed method. If you are still deciding where chat should appear and who will answer it, begin with our guide to live chat for an online store. This article focuses on the technical side: code, theme, domains and testing.

Where to paste the chat code in Shopify

Paste the chat code into the theme.liquid file in the Layout folder, just before the head section closes. This is the default theme layout, so one entry usually covers the home page, collections, product pages and the cart. If your theme uses extra layouts, for example for a password page, check them separately. The Meetlead script uses the async attribute, so it does not hold up the rendering of your store content.

Shopify's theme developer documentation describes theme.liquid as the default layout for pages outside checkout. It says nothing about specific chat tools or how your particular theme organizes its other files. Shopify.dev: Layouts.

In practice, a widget embedded in the theme will not appear in checkout. So handle payment and delivery questions earlier: keep a clear contact route on the product page and in the cart.

Before the change: access, theme copy and domains

Editing code requires the right permissions in Shopify. Since April 2023 the code editor has its own Edit code permission, separate from managing themes, so a staff member who can see themes does not automatically get code access. If an outside contractor does the work, grant only the scope they need and keep a record of who changed the file.

Shopify Help recommends duplicating your theme before editing code, lets you restore an earlier version of a single file in the Timeline view and warns that incompatible changes can disappear when the theme is updated. The page does not cover installing third-party tools. Shopify Help Center.

• You have an account with permission to edit code, or a person who does.
• The theme is free or purchased; Shopify only lets you edit a paid theme's code after purchase.
• A copy of the theme exists, made with Duplicate and dated in its name.
• In Meetlead you have a website with its own clientId and a copied embed code.
• The allowed domain list includes every exact host of the store: the domain with and without www, plus the myshopify.com address if you use it.

That last item is what most often blocks the launch. Meetlead does not support wildcards in domains, so you add each host separately and without paths. Every entry counts toward the domain limit in your plan, so check it before adding hosts. Remove test domains after the rollout.

Step-by-step installation

The sequence below assumes you paste the code into the published theme after making a copy. You can also edit the copy first and publish it later; mind the preview limitation below.

1. Copy the code from Meetlead.In the website settings, copy the base script with the correct clientId. The identifier is public, but it must belong to this website, otherwise conversations end up in the wrong place.
2. Open the code editor.In Shopify admin, go to Online Store, open the menu next to the theme and choose Edit code. Item names depend on your admin language.
3. Find theme.liquid.The file sits in the Layout folder. Search for the end of the head section and place the cursor right before it.
4. Paste and save.Paste the script on its own line, add a short comment above it with the tool name and date, then save the file.
5. Open the store in a private window.Check the home page, a product page and the cart. The launcher should appear without you being signed in to Shopify.
6. Send a test message.Write from a phone and reply from the panel. Only a reply that reaches the customer confirms the installation works.

You change the widget's look, languages and texts later in Widget Studio, without editing the theme again. The code in theme.liquid only loads the widget, while its configuration comes from Meetlead.

One widget instead of two

The most common mistake when switching tools is two launchers in the corner of the screen, one of which never answers. In Shopify an old chat can load from several places at once. Check all of them before you call the rollout finished.

↔ Scroll the table sideways to see all columns.

The same rule applies on other platforms; for WordPress we cover it in our guide to adding chat to a WordPress website. Record in your store documentation where the code lives and in which theme. According to Shopify Help, apps added to a theme have to be re-activated in the new theme after you change the published one. A manually pasted script also belongs to one specific theme, so you add it again in a new one. On a Squarespace site the chat code goes into a single field in the Code Injection panel rather than into a theme file, as the guide on adding chat to Squarespace explains.

Testing on a phone and in theme preview

Theme preview can be misleading. The link you share with people outside the admin runs on a shopifypreview.com address that is usually not on your allowed host list. The widget may fail to load there even though it works correctly on the real domain. Run the final test on the live domain.

Shopify Help states that visitor preview links use the shopifypreview.com domain and expire after two days. It does not describe how third-party scripts behave on them. Shopify Help Center.

On a phone, check that the launcher does not cover the add-to-cart button, the price bar or the consent banner. Test on a real device, in portrait and landscape. If the buy button disappears under the icon, change the widget position or offset; our guide to sticky elements covering buttons explains how to find such collisions. See also our article on mobile conversion.

• The widget opens full screen and is easy to close.
• The keyboard does not hide the message field or the send button.
• The launcher does not cover the buy button on the product page.
• The consent banner and the widget do not overlap.
• A message sent from the phone reaches the panel, and the reply gets back to the customer.

What to set up after the first test

Working code is only half of the rollout. In Meetlead you can set visibility rules: all pages, only listed path prefixes or everywhere except listed ones, plus selected devices. This lets you hide the widget in the customer account, for example, without touching the theme code. Also set an availability schedule and offline mode, so customers outside working hours are not left waiting for a reply that will not come.

Keep the boundary in mind: a widget embedded in the theme does not connect to Shopify orders. Agents will not see shipping status or purchase history in the conversation unless the customer provides it, so prepare a standard question asking for the order number. If the widget will record sessions, settle the legal basis and start mode first; we cover data questions in our article on live chat and GDPR. This text is not legal advice.

Frequently asked questions

Will the chat appear on the payment page? No, not if you embed it in theme.liquid, because that layout does not cover Shopify checkout. Customers will see the widget on product, collection and cart pages. If payment questions come up often, answer them before checkout: on the product page, in the cart and in the post-order message.

Do I need to paste the code again after a theme update? Possibly. Shopify warns that incompatible code changes can disappear in the updated copy of a theme, and a new theme does not inherit manual edits from the old one. After every theme update or switch, open the store in a private window and send one test message.