# Embedding for Shopify

The Wonderchat chat widget allows both prospective and existing clients to chat with your business directly from your website. To set up the chat widget, you will have to copy the Wonderchat embed code and then paste it into the footer of your Shopify page.

***

## Step 1: Copy Your Chatbot's Embed Code

#### **Get the Embed Code**

* In a separate window, go to the ↗ [**Wonderchat App**](https://app.wonderchat.io/).
* Go the **Chatbots page**> **Actions (⋮)** > **"Embed to website"**
* Copy the embed code

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2FBjlEoEMERhWPw3PBZ0fd%2Fimage.png?alt=media&#x26;token=156dad7a-3786-46db-b686-eb9aaf6862a0" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-68060503ebf59ccd56911190df575d4e8a2e24cf%2Fimage.png?alt=media" alt=""><figcaption><p>Click on <strong>"Copy to clipboard"</strong></p></figcaption></figure>

### (Optional) Adjust Chatbot Position and Size

If the chatbot needs to be resized or repositioned, you can modify your changes on the [**Wonderchat App**](https://app.wonderchat.io/) before copying the embed code over.

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-5e2b22c2cb70f43c99bdcfdb67117a79b7a2d781%2Fimage.png?alt=media" alt=""><figcaption><p>Configure your customizations and preview widget, before copying the embed code over</p></figcaption></figure>

For a more detailed guide on how customize your chat widget or page, see the pages below:

[how-to-embed-a-chat-widget](https://docs.wonderchat.io/setup-guides/adding-your-chatbot-to-your-website/how-to-embed-a-chat-widget "mention")

[how-to-embed-a-chat-screen](https://docs.wonderchat.io/setup-guides/adding-your-chatbot-to-your-website/how-to-embed-a-chat-screen "mention")

***

## Step 2: Login to Shopify.

Log into your Shopify store by going to [**↗ Shopify Admin**](https://www.shopify.com/sg/store-login).

***

## Step 3: Edit Theme

#### **1. Go to "Edit Code"**

From your Shopify dashboard left sidebar, go under **"Themes"** section. Find the theme you want to edit and click on "**Actions (...)"**, then choose "**Edit code"**.

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-d6c83861f1afee5ec081f9e4605cf102facbdd4d%2Fimage%20(160).png?alt=media" alt=""><figcaption><p>Click on <strong>"Edit code"</strong></p></figcaption></figure>

#### **2. Locate the HTML File to Edit**

You will be taken to the theme editor. On the left-hand side, you’ll see a list of files. Find the file where you want to embed the chatbot. Typically, this will be the **`theme.liquid`** file located under the **Layout** folder or the `footer.liquid` file under **Sections** if you want the chatbot to appear site-wide.

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-c512c3a40e20587a0dbabbfe30ce72677786dbdc%2Fimage.png?alt=media" alt=""><figcaption><p>Select the <strong>"theme.liquid"</strong></p></figcaption></figure>

***

## Step 4: Paste the Chatbot Embed Code

#### **1. Find the \</body> tag**

Scroll down to the section of the code where you want to add the chatbot. You might place it just before the closing `</body>` tag if you want it site-wide.

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-19243e30b8a88b0b5112321046d16e3315f3c502%2Fimage%20(158).png?alt=media" alt=""><figcaption><p>Scroll down to find the <strong>&#x3C;/body></strong> tag</p></figcaption></figure>

#### 2. Insert the copied embed code just before the \</body> tag.

Paste the chatbot's embed code you copied from the chatbot platform.

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-c034c6116ead29014466d1e50317e05a17f360cb%2Fimage%20(165).png?alt=media" alt=""><figcaption><p>Paste the copied chatbot embed code just before the &#x3C;/body> tag.</p></figcaption></figure>

***

## Step 5: Save and Preview Your Store

#### **1. Save Your Changes**

After pasting the embed code, click **Save** in the top-right corner of the Shopify editor.

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-7b93cb3d9ddfc79d969a78b47a9f683e2ae68be7%2Fimage.png?alt=media" alt=""><figcaption><p>Click on <strong>"Save"</strong> (top-right corn</p></figcaption></figure>

#### **2. Preview Your Store**

Go to your store’s preview page to make sure the chatbot appears as expected.

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-98edbcb969662801454a245aa7f3158d9d549435%2Fimage.png?alt=media" alt=""><figcaption><p>Click on "Preview" (top-right corner)</p></figcaption></figure>

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-06897703ff2eb46ac9be3c303ff8fc10da7f8aef%2Fimage.png?alt=media" alt=""><figcaption><p>Make sure the chatbot widget appears on the page.</p></figcaption></figure>

***

## Step 6: Test Your Chatbot

Ensure the chatbot works properly by interacting with it on your live store. Test the chatbot's functionality across different devices (desktop, tablet, mobile) to make sure it's responsive.

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-f93267ebbcc7a05971286215b5220785ab2cfcf0%2Fimage.png?alt=media" alt=""><figcaption><p>Ensure that Chat Widget is visible</p></figcaption></figure>

<figure><img src="https://3760420285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0WUvfmkdMPXz3x7NXP8i%2Fuploads%2Fgit-blob-ed8c10e7caaa837033ad52091ed79c338b8e71fe%2Fimage.png?alt=media" alt=""><figcaption><p>Click on Chat Widget icon to expand for Chat Pop-up</p></figcaption></figure>

***

#### **Conclusion**

By following these steps, you can easily embed a chatbot widget into your Shopify store to provide real-time customer support and increase engagement. If you run into any issues or need assistance, you can always consult Shopify’s support or Wonderchat team for further help.

***

If you have any more questions, feel free to reach out to us at <mark style="color:purple;">**<support@wonderchat.io>**</mark>