> For the complete documentation index, see [llms.txt](https://docs.chatalog.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.chatalog.ai/settings/web-chat/setting-up-web-chat-on-shopify.md).

# Setting up Web Chat on Shopify

Setting up web chat plugin on your Shopify is easy. Just embed the code into the corresponding position to allow your customers to chat with you on their preferred channels, including WhatsApp, Insta

You will need login to your [Shopify](https://www.shopify.hk/) and copy the code in [Chatalog ](https://app.chatalog.ai/zh-HK/setting?key=chat-widget).

```
// the code should be something like this :

<script src="https://widget.chatalog.ai/chatalog-sdk.min.js" app-id="TsGq6dSOhvgKb5dkPPlB" position="bottom-right" lang="en" defer></script>
```

1. Login to [Shopify](https://accounts.shopify.com/store-login)
2. From your Shopify admin, go to **Online Store** > [**Themes**](https://admin.shopify.com/themes).\
   Next to the theme that you want to edit, click **Customize**.

   Click **Sections**.

<figure><img src="https://605198658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP7nf2G1iCRba8EP7DawZ%2Fuploads%2F9kldxJh6hmTFmAr9DIbf%2Fimage.png?alt=media&amp;token=bf6e7eeb-9d13-4675-8a04-38849729c734" alt=""><figcaption></figcaption></figure>

3. Click "**Actions** "->  "**Edit code "**.
4. Navigate to the **Sections** folder and expand it .
5. Open the subs file **" footer.liquid "**
6. Search the **" \</Footer>** " in the  **" footer.liquid "**
7. Copy the code [here](https://app.chatalog.ai/zh-HK/setting?key=chat-widget)

<figure><img src="https://605198658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP7nf2G1iCRba8EP7DawZ%2Fuploads%2F2T4XLMZW3WSAxy72Bjcf%2Fimage.png?alt=media&amp;token=a911d138-dde5-460c-bb12-cb6d1d3b3c06" alt=""><figcaption></figcaption></figure>

8. Paste your code before **{% schema %}.**&#x20;

{% hint style="info" %}
**It is between \</footer> and {% schema %}**\
Please use **"Paste and Match Style"** to paste the code on Shopify.&#x20;
{% endhint %}

9. Click **"Save"**&#x20;
10. You’ve **successfully integrated our messaging platform** into your Shopify website! 🎉 To see the updated changes, simply **open your website**. You’ll find the **widget positioned at the bottom right-hand side**. Feel free to explore and engage with your customers using this powerful tool! 😊