Skip to content
Sites

Add GHL Customer Care's Chat Widget to Your Shopify Website

Are you looking for an easy way to connect with your website visitors and convert them into customers?GHL Customer Care Webchat for Shopify is the perfect solution for you! In this article, we'll walk you through the steps to start with HL Webchat for Shopify

1 min read234 words7 explained imagesUpdated Fri, 2 May, 2025 at 11:15 AM
View as markdownOpen in ClaudeOpen in ChatGPT
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.

Video 1 Open in a new tab

Are you looking for an easy way to connect with your website visitors and convert them into customers? GHL Customer Care Webchat for Shopify is the perfect solution for you!

In this article, we'll walk you through the steps to start with GHL Customer Care Webchat for Shopify.

How to obtain the embed code for web chat for the website:

Copy the embed code from Sites > Chat Widget > Get Code
How to obtain the embed code for web chat for the website: (image 1 of 7) What this shows Copy the embed code from Sites > Chat Widget > Get Cod e What this shows Illustrates the "How to obtain the embed code for web chat for the website:" section of "Add GHL Customer Care's Chat Widget to Your Shopify Website". This animation appears in the "How to obtain the embed code for web chat for the website:" section of "Add GHL Customer Care's Chat Widget to Your Shopify Website". The text alongside this image reads: Copy the embed code from Sites > Chat Widget > Get Cod e. The navigation path used here is Sites > Chat Widget > Get Cod. Immediately after, the guide continues: Log in to your Shopify account: Go to your Shopify account and log in. Navigate to the "Online Store" section: From your Shopify dashboard, navigate to the "Online Store" section. Path: Sites > Chat Widget > Get CodImage 1 of 7 What to copyCopy the embed code from Sites > Chat Widget > Get Cod e
Buttons and menus referenced SitesChat WidgetGet Cod
Next stepLog in to your Shopify account: Go to your Shopify account and log in. Navigate to the "Online Store" section: From your Shopify dashboard, navigate to the "Online Store" section.

Here are detailed steps on how to add a custom chat widget to a Shopify website using different methods:

  • Log in to your Shopify account: Go to your Shopify account and log in.
  • Navigate to the "Online Store" section: From your Shopify dashboard, navigate to the "Online Store" section.
Here are detailed steps on how to add a custom chat widget to a Shopify website using different methods: (image 2 of 7) What this shows Log in to your Shopify account: Go to your Shopify account and log in. What this shows Illustrates the "Here are detailed steps on how to add a custom chat widget to a Shopify website using different methods:" section of "Add GHL Customer Care's Chat Widget to Your Shopify Website". This screenshot appears in the "Here are detailed steps on how to add a custom chat widget to a Shopify website using different methods:" section of "Add GHL Customer Care's Chat Widget to Your Shopify Website". The text alongside this image reads: Log in to your Shopify account: Go to your Shopify account and log in. Navigate to the "Online Store" section: From your Shopify dashboard, navigate to the "Online Store" section. Immediately after, the guide continues: Edit your website's theme: Select the theme that you want to edit and click on the " Actions " button. Choose " Edit code " from the drop-down menu. Image 2 of 7 What this coversLog in to your Shopify account: Go to your Shopify account and log in. Navigate to the "Online Store" section: From your Shopify dashboard, navigate to the "Online Store" section.
Buttons and menus referenced ActionsEdit codeLayouttheme.liquidtheme.liquid,
Next stepEdit your website's theme: Select the theme that you want to edit and click on the " Actions " button. Choose " Edit code " from the drop-down menu.
All 2 steps in this procedure
  1. Log in to your Shopify account: Go to your Shopify account and log in.
  2. Navigate to the "Online Store" section: From your Shopify dashboard, navigate to the "Online Store" section.
  • Edit your website's theme: Select the theme that you want to edit and click on the "Actions" button. Choose "Edit code" from the drop-down menu.
Here are detailed steps on how to add a custom chat widget to a Shopify website using different methods: (image 3 of 7) What this shows Edit your website's theme: Select the theme that you want to edit and click on the " Actions " button. What this shows Illustrates the "Here are detailed steps on how to add a custom chat widget to a Shopify website using different methods:" section of "Add GHL Customer Care's Chat Widget to Your Shopify Website". This screenshot appears in the "Here are detailed steps on how to add a custom chat widget to a Shopify website using different methods:" section of "Add GHL Customer Care's Chat Widget to Your Shopify Website". The text alongside this image reads: Edit your website's theme: Select the theme that you want to edit and click on the " Actions " button. Choose " Edit code " from the drop-down menu. Immediately after, the guide continues: Open your theme's theme.liquid file: In the list of files that appears, select the " Layout " folder and then select the " theme.liquid " file. Image 3 of 7 What to chooseEdit your website's theme: Select the theme that you want to edit and click on the " Actions " button. Choose " Edit code " from the drop-down menu.
Buttons and menus referenced ActionsEdit codeLayouttheme.liquidtheme.liquid,
Next stepOpen your theme's theme.liquid file: In the list of files that appears, select the " Layout " folder and then select the " theme.liquid " file.
All 2 steps in this procedure
  1. Log in to your Shopify account: Go to your Shopify account and log in.
  2. Navigate to the "Online Store" section: From your Shopify dashboard, navigate to the "Online Store" section.
Here are detailed steps on how to add a custom chat widget to a Shopify website using different methods: (image 4 of 7) What this shows Edit your website's theme: Select the theme that you want to edit and click on the " Actions " button. What this shows Illustrates the "Here are detailed steps on how to add a custom chat widget to a Shopify website using different methods:" section of "Add GHL Customer Care's Chat Widget to Your Shopify Website". This screenshot appears in the "Here are detailed steps on how to add a custom chat widget to a Shopify website using different methods:" section of "Add GHL Customer Care's Chat Widget to Your Shopify Website". The text alongside this image reads: Edit your website's theme: Select the theme that you want to edit and click on the " Actions " button. Choose " Edit code " from the drop-down menu. Immediately after, the guide continues: Open your theme's theme.liquid file: In the list of files that appears, select the " Layout " folder and then select the " theme.liquid " file. Image 4 of 7 What to chooseEdit your website's theme: Select the theme that you want to edit and click on the " Actions " button. Choose " Edit code " from the drop-down menu.
Buttons and menus referenced ActionsEdit codeLayouttheme.liquidtheme.liquid,
Next stepOpen your theme's theme.liquid file: In the list of files that appears, select the " Layout " folder and then select the " theme.liquid " file.
All 2 steps in this procedure
  1. Log in to your Shopify account: Go to your Shopify account and log in.
  2. Navigate to the "Online Store" section: From your Shopify dashboard, navigate to the "Online Store" section.
  • Open your theme's theme.liquid file: In the list of files that appears, select the "Layout" folder and then select the "theme.liquid" file.
Here are detailed steps on how to add a custom chat widget to a Shopify website using different methods: (image 5 of 7) What this shows Open your theme's theme.liquid file: In the list of files that appears, select the " Layout " folder and then select the " theme.liquid " file. What this shows Illustrates the "Here are detailed steps on how to add a custom chat widget to a Shopify website using different methods:" section of "Add GHL Customer Care's Chat Widget to Your Shopify Website". This screenshot appears in the "Here are detailed steps on how to add a custom chat widget to a Shopify website using different methods:" section of "Add GHL Customer Care's Chat Widget to Your Shopify Website". The text alongside this image reads: Open your theme's theme.liquid file: In the list of files that appears, select the " Layout " folder and then select the " theme.liquid " file. Immediately after, the guide continues: Paste the embed code: Locate the tag within the theme.liquid, then add embed code above it. Image 5 of 7 Where to goOpen your theme's theme.liquid file: In the list of files that appears, select the " Layout " folder and then select the " theme.liquid " file.
Buttons and menus referenced ActionsEdit codeLayouttheme.liquidtheme.liquid,
Next stepPaste the embed code: Locate </body> the tag within the theme.liquid, then add embed code above it.
All 2 steps in this procedure
  1. Log in to your Shopify account: Go to your Shopify account and log in.
  2. Navigate to the "Online Store" section: From your Shopify dashboard, navigate to the "Online Store" section.
  • Paste the embed code: Locate </body> the tag within the theme.liquid, then add embed code above it.
Here are detailed steps on how to add a custom chat widget to a Shopify website using different methods: (image 6 of 7) What this shows Paste the embed code: Locate the tag within the theme.liquid, then add embed code above it. What this shows Illustrates the "Here are detailed steps on how to add a custom chat widget to a Shopify website using different methods:" section of "Add GHL Customer Care's Chat Widget to Your Shopify Website". This screenshot appears in the "Here are detailed steps on how to add a custom chat widget to a Shopify website using different methods:" section of "Add GHL Customer Care's Chat Widget to Your Shopify Website". The text alongside this image reads: Paste the embed code: Locate the tag within the theme.liquid, then add embed code above it. Immediately after, the guide continues: Save the changes: After adding the embed code, hit the save button. Image 6 of 7 What to copyPaste the embed code: Locate </body> the tag within the theme.liquid, then add embed code above it.
Buttons and menus referenced ActionsEdit codeLayouttheme.liquidtheme.liquid,
Next stepSave the changes: After adding the embed code, hit the save button.
All 2 steps in this procedure
  1. Log in to your Shopify account: Go to your Shopify account and log in.
  2. Navigate to the "Online Store" section: From your Shopify dashboard, navigate to the "Online Store" section.
  • Save the changes: After adding the embed code, hit the save button.
Here are detailed steps on how to add a custom chat widget to a Shopify website using different methods: (image 7 of 7) What this shows Save the changes: After adding the embed code, hit the save button. What this shows Illustrates the "Here are detailed steps on how to add a custom chat widget to a Shopify website using different methods:" section of "Add GHL Customer Care's Chat Widget to Your Shopify Website". This screenshot appears in the "Here are detailed steps on how to add a custom chat widget to a Shopify website using different methods:" section of "Add GHL Customer Care's Chat Widget to Your Shopify Website". The text alongside this image reads: Save the changes: After adding the embed code, hit the save button. Immediately after, the guide continues: Preview the chat widget: Go to your website and refresh the page. The chat widget should now be visible on your website. Please test it out to make sure it's working correctly. Image 7 of 7 How to confirmSave the changes: After adding the embed code, hit the save button.
Buttons and menus referenced ActionsEdit codeLayouttheme.liquidtheme.liquid,
Next stepPreview the chat widget: Go to your website and refresh the page. The chat widget should now be visible on your website. Please test it out to make sure it's working correctly.
All 2 steps in this procedure
  1. Log in to your Shopify account: Go to your Shopify account and log in.
  2. Navigate to the "Online Store" section: From your Shopify dashboard, navigate to the "Online Store" section.
  • Preview the chat widget: Go to your website and refresh the page. The chat widget should now be visible on your website. 
  • Please test it out to make sure it's working correctly.

Was this guide helpful?

Related guides

Getting Started with Chat Widget5 min read · 16 imagesOverview of Chat Widget Customizations6 min read · 10 imagesChat Widget - Business Office Hours in Live Chat1 min read · 7 imagesChat Widget - Send your leads to Whatsapp Chat1 min read · 4 images