> 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

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="/files/or5oj7fk2vESDToBn626" 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="/files/cFPjVjjbLv5XTinqJPT4" 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! 😊