Skip to main content

Add a Custom Chat Widget to a Shopify Website

You can add a Kyrios Chat Widget to a Shopify website by copying the widget embed code and pasting it into the theme.liquid file before the closing </body> tag.

Updated over 2 months ago

Who This Is For / When to Use

Use this guide if you:

  • Have a Shopify store

  • Want to display a Kyrios Chat Widget on all store pages

  • Need real-time chat, lead capture, or customer support on your website

What This Setup Does

Adding the chat widget embed code to Shopify:

  • Displays the widget across your entire storefront

  • Enables real-time conversations with visitors

  • Works on desktop and mobile automatically

This method uses Shopify’s theme editor and does not require advanced coding.

Step 1: Get the Chat Widget Embed Code

  1. Go to Sites → Chat Widget

  2. Open an existing chat widget or create a new one

  3. Click Get Code in the top-right corner

In the modal, copy the embed code

Step 2: Open Your Shopify Theme Editor

  1. Log in to your Shopify Admin

  2. Go to Online Store

  1. Click Themes

  2. Open the theme menu and select Edit code

Step 3: Locate the theme.liquid File

  1. In the left sidebar, open the Layout folder

  2. Click theme.liquid

Step 4: Paste the Embed Code

  1. Scroll to the bottom of theme.liquid

  2. Locate the closing </body> tag

  3. Paste the chat widget embed code directly above </body>

Step 5: Save and Publish

  1. Click Save in the top-right corner

  2. Refresh your Shopify storefront

  3. Confirm the chat widget appears in the bottom corner

What Happens After Installation

Once installed:

  • The chat widget loads on every page using the theme

  • Visitors can start conversations immediately

  • Changes made to the widget update automatically without re-embedding

Common Issues and Fixes

The widget does not appear

  • Confirm the code was pasted above </body>

  • Ensure the theme you edited is the published theme

Widget appears only on some pages

  • Verify the code was added to theme.liquid, not a template file

Changes to the widget are not updating

  • Refresh the page or clear browser cache

  • Confirm the widget is saved in Kyrios

FAQ

Do I need coding experience to do this?

No. This is a copy-and-paste setup inside Shopify’s editor.

Will this work on mobile devices?

Yes. The chat widget is fully responsive by default.

Where exactly should I paste the code?

Directly above the closing </body> tag in theme.liquid.

Will this affect my store’s performance?

No. The widget loads asynchronously and does not block page loading.

Can I remove the widget later?

Yes. Remove the embed code from theme.liquid and save.

Related Articles
How to Add a Chat Widget to Your Membership Section
How to Add and Use Multiple Chat Widgets
How to Customize the Chat Widget
How to Add a Chat Widget to a WordPress Site
Adding the Review Widget to a Funnel or Website
Did this answer your question?