# Shopify

This guide will help you seamlessly integrate Wonderchat, our AI-powered chatbot, with your Shopify store. By following these steps, you'll enhance customer engagement and streamline support, providing a more efficient shopping experience for your users.

Let’s get started on setting up Wonderchat in Shopify!

***

## Installing Wonderchat App on your Shopify Store

### Step 1: Login to your [Shopify Store](https://www.shopify.com/sg/store-login).

<figure><img src="/files/6MhdxozZEcq1rzomGYAZ" alt=""><figcaption><p>Login to <a href="https://www.shopify.com/sg/store-login"><strong>↗ Shopify Store Admin</strong></a>.</p></figcaption></figure>

### Step 2: On the left-panel, click on "Apps".

<figure><img src="/files/K85xTGExndk0LkJonkrh" alt=""><figcaption><p>Click on "Apps" on the left-panel.</p></figcaption></figure>

### Step 3: In the pop-up, click on "Shopify App Store".

<figure><img src="/files/XFOQeBG5bYA3po6YGQRQ" alt=""><figcaption><p>Click on "Shopify App Store" link on the bottom of the pop-up window.</p></figcaption></figure>

### Step 4: Search for "Wonderchat" in Shopify App Store.

<figure><img src="/files/M7WncPOXKDAbnf0tEK9k" alt=""><figcaption><p>Type in "Wonderchat" in the search bar.</p></figcaption></figure>

### Step 5: Click on 'Install'.

<figure><img src="/files/OaBCGkNNGUIUZWwrhU9G" alt=""><figcaption><p>Install the 'Wonderchat' app.</p></figcaption></figure>

### Step 6: Select 'Install' again.

<figure><img src="/files/Im8Cb2s3nKwOPN85IaEV" alt=""><figcaption><p>Click 'Install' to grant access permissions.</p></figcaption></figure>

### Step 7: Access Wonderchat from the Shopify Dashboard

1. In your Shopify dashboard, click on **Apps** from the left-hand sidebar to open the Apps menu.
2. In the search bar at the top, type **Wonderchat**.
3. Once Wonderchat appears under **Installed apps**, click on it to open the Wonderchat integration interface.

<figure><img src="/files/7aTSNW2XJOAYvMzdLrRF" alt=""><figcaption><p>Click on "Wonderchat" to open <a href="https://app.wonderchat.io/"><strong>↗ Wonderchat App</strong></a>.</p></figcaption></figure>

### Step 8: Verify Shopify Store Connection

1. After connecting your Shopify store to Wonderchat, navigate to the **Dashboard** in Wonderchat.
2. You should see your Shopify chatbot listed under **Bot Name** with its status toggled on.
3. A notification will appear at the bottom of the screen, confirming that your Shopify store has been successfully connected. It will state:

> *"Your Shopify Store has already been connected to your Wonderchat account. Please go to Settings > Integrations > Shopify to connect your store to an existing chatbot."*

<figure><img src="/files/o2OHTV8S5d9t1XPUBLj4" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/lZ4nlyVUF5pOWRwkJLfZ" alt=""><figcaption><p>Shopify Icon in Green under Integrations</p></figcaption></figure>

If you see the Shopify Icon lighted up in green, your integration has been successful, and your chatbot is now ready to interact with your Shopify customers. From here, you can now **embed** your chat widget to your website.

***

## How to Embed Chat Widget on Shopify

### Step 1: Go to "Edit Code"

On your Shopify Admin Dashboard, find the left-panel and click on **"Themes" > "(...) > "Edit Code"**.

<figure><img src="/files/eLXepc2AHYKGOojbMjrb" alt=""><figcaption><p>Click on "Edit Code".</p></figcaption></figure>

### Step 2: Select "theme.liquid"

On the left-panel under the 'Layout' folder, click on **"theme.liquid"**.

<figure><img src="/files/ia2inqTGu9a9BlwnYYPd" alt=""><figcaption><p>Click on "theme.liquid"</p></figcaption></figure>

### Step 3: Scroll down to find the \</body> tag

<figure><img src="/files/dpdYXfkj73tgNV7hUS2T" alt=""><figcaption><p>Find where the &#x3C;/body> tag is</p></figcaption></figure>

### Step 3: Retrieve Embed Code from Wonderchat App

In a separate window, open the **↗** [**Wonderchat App**](https://app.wonderchat.io/)**.**

<figure><img src="/files/ZjuxUfF5W2cJBSH72myT" alt=""><figcaption><p>From your dashboard, Click on the “⋮” and go to “Embed to website”</p></figcaption></figure>

From the pop-up, copy the embed code.

<figure><img src="/files/FnEHTK4k1XNjTCwfweyw" alt=""><figcaption><p>Click on <strong>"Copy to clipboard"</strong>.</p></figcaption></figure>

### Step 4: Paste copied code before \</body> tag

<figure><img src="/files/AXvtyuPhDgD7IfKO9IWz" alt=""><figcaption><p>Paste copied code just before &#x3C;/body> tag.</p></figcaption></figure>

### Step 5: Click on 'Save'

<figure><img src="/files/DV7fAa6OFhiPJ5VmfzIv" alt=""><figcaption><p>Click on 'Save' to save changes.</p></figcaption></figure>

### Step 6: Preview Widget on Store

<figure><img src="/files/Otf0HnhdVywE1mmWpTtG" alt=""><figcaption><p>Click on "Preview Store" (top-right corner)</p></figcaption></figure>

<figure><img src="/files/kWyPQtNgRcEfY0gWBAP7" alt=""><figcaption><p>Check if chat widget appears on the page.</p></figcaption></figure>

### Step 7: Test Chatbot on Live Store

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="/files/RtBHfpwNJJgWFqBTtriv" alt=""><figcaption><p>Click on Chatbot Widget Icon to expand pop-up</p></figcaption></figure>

<figure><img src="/files/6MubUcXixtZyyghp9rj4" alt=""><figcaption><p>Test and interact with chatbot to ensure everything is working well</p></figcaption></figure>

***

#### **Conclusion**

By following this guide, you've successfully integrated Wonderchat with your Shopify store. Your AI-powered chatbot is now ready to enhance customer engagement, streamline communication, and provide round-the-clock support to your store visitors. This integration will not only improve the overall user experience but also help automate routine tasks, allowing you to focus on growing your business.

If you encounter any issues or need further assistance, don't hesitate to explore the Wonderchat help resources or reach out to their support team. Happy selling!

***

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wonderchat.io/integration-guides/shopify.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.