# 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="https://605198658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FP7nf2G1iCRba8EP7DawZ%2Fuploads%2F9kldxJh6hmTFmAr9DIbf%2Fimage.png?alt=media&#x26;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&#x26;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! 😊