Skip to main content

How to Add the Thinkstack Chatbot to Your Shopify Store

info

This guide walks you through the steps to integrate the Thinkstack chatbot into your Shopify store.

Copy the ChatBot Embed Script from Thinkstack Dashboard#

Log in to your Thinkstack account. Navigate to the Embed > Shopify > Select a Chatbot View and copy it's respective script/iframe code. Copy the emebed script

Add the Thinkstack Embed Script to Your Shopify Theme#

  1. Log in to your Shopify Admin Dashboard: Go to Shopify Admin page. Shopify Admin Page

  2. Access the Theme Code: In the left navigation menu, click Online Store > Themes. Under your current theme, click on the 3-dots. Select Edit code. Shopify Themes

  3. Paste the Thinkstack Script: In the file explorer, locate the theme.liquid file. This file controls your site's global layout.

    Paste the Thinkstack embed script you copied earlier just above the closing </body> tag. Shopify Admin Page

note

Add Defer Attribute: To optimize the loading of the script, add the attribute defer="defer" to the Thinkstack script. Shopify defer

Add Chat Toggler for Direct Embedding#

To ensure the chatbot is easily accessible and visible, add the following script below the Thinkstack embed script:

<script>  let thinkstackCounter = 0;  function initializeChatToggler() {    let e = document.getElementById("thinkstack-chat-window-toggler");    if (e) {      let t = document.createElement("button");      t.style.cssText = `background-color: #fff; position: fixed; bottom: 1rem; right: 1rem; height: 50px; width: 50px; border-radius: 50%; z-index: 999; background-image: url('${e.getAttribute("data-main-icon")}'); background-repeat: no-repeat; background-position: center; background-size: cover; cursor: pointer; transition: all 300ms ease; outline: none; border: none;`;      t.addEventListener("click", () => { e.click(); });      document.body.appendChild(t);    } else {      if (++thinkstackCounter > 120) return;      setTimeout(initializeChatToggler, 500);    }  }  initializeChatToggler();</script>

This script creates a custom floating chat button that users can click to open the chatbot. Shopify Admin Page

Save and Verify#

  1. Click "Save" in the Shopify code editor. Go to your Shopify store homepage.
  2. Refresh the page to verify the chatbot appears and functions correctly. Shopify Admin Page

Test Your Chatbot#

Ensure the chatbot opens when the chat icon is clicked. Test a few questions to confirm the chatbot responds as expected. Shopify Admin Page

That's a wrap 🎉, you have added the Thinkstack chatbot to your Shopify store. You can now interact with your visitors and provide real-time support.