Add Chat to Shopify ‘Checkout’ and ‘Thank You’ Page

Prev Next
REQUIRED USER ROLE 
Administrator
PERMISSION OVERVIEW
View permissions by role

Shopify permission requirement

Ensure you have Shopify user permission to manage and install apps and channels

Expose Chat (Chat) in your Shopify Checkout (https://<store>.com/checkouts/) and Thank You pages to allow your Customers to chat with you if they need support or have questions while completing their purchase.

Checkout page displaying contact, delivery, and payment information for a snowboard purchase.

Before you start

Review the following information before you expose Chat on a Shopify Checkout or Thank you page.

  • Ensure you have a Chat configured for this chat experience.

  • Proactive Chat will not work on the Shopify checkout page. This is a Shopify-imposed limitation.

  • Custom icon styling for the Chat in minimized view is not supported. It will default to the standard Gladly minimized icon style.

  • Chat will be minimized by default and will not open unless clicked.

  • Chat event activities on the Shopify checkout page will not be available.

Ensure Gladly Shopify app is installed in Shopify

To get started, ensure you have a Chat configured and the Gladly Shopify app installed in Shopify. If the app isn’t installed, follow the steps outlined in Install Gladly Shopify App.

If the Gladly Shopify app is installed, proceed to the Take Note of the Chat ID section below.

Take note of the Chat ID

To start, you’ll need to take note of the Chat ID of the Chat you want to use in a Shopify Checkout or Thank you page.

  1. Click Hamburger menu icon on the top left corner of the screen.

  2. Click Settings.

  3. Under the Channels category, click Chat. The Chat page will show you a list of Chats you currently have.

  4. Look under the Chat ID column and take note of the ID of the Chat you want to use in Shopify.

Use a different Chat between checkout and thank you page

  • You can use the same Chat ID for both the checkout and thank you pages (if you decide to set up both) or use two different Chat IDs (if you have multiple Chats) for each page if you want a specific Chat for each page.

  • Chat sessions that start from the checkout page continue to the thank you page if both pages are configured with the same Chat ID. Chat sessions that start from a non-checkout page will not continue to the checkout page, even if they have the same Chat ID and the Conversation Timeline will say “The customer signed in from a new location. Please use your best judgment before sharing out sensitive information.”

Next, log into Shopify as a user with permission to manage and install apps and channels. This is where you’ll need to configure the Chat ID.

Configure Chat ID in Shopify

You must already have the Gladly Shopify app installed to proceed with the steps below.

  1. From your Shopify store’s homepage, click Settings on the bottom left corner of the page.

  2. Click Checkout on the left side menu.

  3. Click Customize in the Configurations section of the Checkout page.

  4. From the Customize page, Click the Apps icon [1] and add the Chat Checkout extension by clicking the “plus” icon [2]. Select whether to add Chat on the Checkout or Thank you page [3].

Configuration settings for Chat Checkout in the mth-dev-store interface.

  1. In the App block settings section, enter the Chat ID for the Chat you want to use on the page.

Gladly Chat configuration settings with highlighted Chat ID input field.

  1. Click Save.

  2. Repeat step 5 if you need to add Chat to the Checkout or Thank You page, depending on which one you configured first, and then click Save.

That’s it. Test by navigating to your Shopify store with the extension installed and adding something to your cart. Then, go to the checkout page and verify that the minimized Chat chat icon appears and opens when clicked.

Agents can respond to inbound chats from Chat as they usually would.