---
description: 了解如何在您的 Shopify 商店上安裝網路聊天小工具。
title: 在 Shopify 上安裝網站聊天小工具
image: https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2F3f43c48b21b24f4e8b02b100c0c8fab0
---

[新的🔥 搶先試試 WhatsApp Business Calling API（開放式測試版）！![arrow-icon](https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2Fe43213a7a9314673bd8d2060c25f9b87)](/tw/whatsapp-business-calling-api)

幫助我... ⌘ 

1. [All Collections >](/tw/help)
2. [ 頻道 >](/tw/help/channels)
3. [ 網站聊天小工具 >](/tw/help/website-chat-widget)
4. 在 Shopify 上安裝網站聊天小工具

# 在 Shopify 上安裝網站聊天小工具

![Avatar](https://assets2-proxy.respond.io/ph8r57dk1q9w/7tin8k9c1emscQGOhIuNbC/0ed3f91c8580c4e5dfa90f035355122e/Petrina_Jo_avatar.svg)

JQ Lee

· 09 May 2025

少於一分鐘

在您的 Shopify 商店中新增網路聊天小工具是一個快速且簡單的過程。 它不需要任何編碼技能或技術知識。 

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/4g8hW8m6uO1gSyElwlebfS/067c4806e0789fd1cef13b1ecfe7e065/shopify-logo.png?fm=avif&w=1000) 

## 安裝設定

為了在 Shopify 上安裝網路聊天小工具，您需要以下內容：

* 造訪您的 [Shopify 帳戶](https://accounts.shopify.com/store-login)。
* 您的網路聊天小工具的程式碼片段。

如果您還沒有代碼片段，則在創建 respond.io [網站聊天小工具](https://respond.io/tw/help/website-chat-widget/website-chat-widget-overview) 或使用 [Facebook 聊天插件](https://respond.io/tw/help/facebook-messenger/facebook-chat-plugin) 用於 [Facebook Messenger](https://respond.io/tw/help/facebook-messenger/facebook-messenger-overview) 時，將生成一個。

> 如果您已在 respond.io 平台上連接頻道，並且需要檢索生成的程式碼片段，請按照此處 [的說明進行操作](https://respond.io/tw/help/website-chat-widget/website-chat-widget-overview#finding%5Fthe%5Fwebsite%5Fchat%5Fwidget%5Fcode%5Fafter%5Fconnecting%5Fthe%5Fchannel)。

## 在 Shopify 上安裝

**步驟 1：登入 Shopify**

登入您的 [Shopify 帳戶](https://accounts.shopify.com/store-login) 並點擊導覽列上的 "線上商店" 。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/7tRcn0OXfRGQUMZjFjphGO/501489927f139ed86837a55efd2c8faf/Screenshot_2025-05-09_at_9.45.09_AM.png?fm=avif&w=1000) 

**第 2 步：點選編輯程式碼**

導航到主題部分。 在這裡，點擊“操作”下拉式選單並選擇“編輯程式碼”選項。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/3cn3wZrdJVpQjhuXsIe706/ec513e34543161d111e48851eb599f06/Screenshot_2025-05-09_at_9.39.10_AM.png?fm=avif&w=1000) 

**步驟 3：貼上腳本**

從 respond.io 平台複製您的插件腳本。 在編輯代碼頁的左側面板上，按一下 **Sections** 資料夾以展開它。 按下 **footer.liquid** 部分並貼上聊天插件腳本。

將腳本貼到對應的部分後，按左上角的紫色 **儲存** 按鈕。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/70gjY4BLtHDpF6SjG0APKT/8863b7fd0ec2ad0599ea4327059debae/Screenshot_2025-05-09_at_9.38.15_AM.png?fm=avif&w=1000) 

**完畢！**

打開網站並查看聊天插件。 您會在右下角找到它。 現在您的網站訪客可以輕鬆地與您聊天。 如果您使用從 respond.io 平台產生的程式碼片段，您將能夠從平台管理對話並更新小工具的外觀。

> 聊天小工具現已在您的網站上處於活動狀態。

> **注意**：如果您正在使用外部主題且小工具無法正常工作，請嘗試將網站代碼嵌入到 **theme.liquid** 部分，放置在 **</body>** 之前

分享這篇文章

[![Telegram](https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2F44daca77a4844f0c8fd29040ddeba057?width=22)](https://api.whatsapp.com/send?text=https://respond.io/help/website-chat-widget/install-on-shopify)[![Facebook](https://assets1-proxy.respond.io/api/v1/image/assets/11f7a662b80a4675973850b067c01fa5/fff57eeb01160bc604392f519b4f3461ca16f0fa1b6a587b20b142cdf1ad0ba7?placeholderIfAbsent=true&width=22)](https://www.facebook.com/sharer/sharer.php?u=https://respond.io/help/website-chat-widget/install-on-shopify)[![Linkedin](https://assets1-proxy.respond.io/api/v1/image/assets/11f7a662b80a4675973850b067c01fa5/7aaf8d87b5410844d83e06a4ed663e4f551b8c5ef51dbb20a8ff064a1eed9a0f?placeholderIfAbsent=true&width=22)](https://www.linkedin.com/sharing/share-offsite/?url=https://respond.io/help/website-chat-widget/install-on-shopify)[![Twitter](https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2F4e03e02422a94e8eab9b8b41457c2371?width=22)](http://twitter.com/share?url=https://respond.io/help/website-chat-widget/install-on-shopify)

## 

相關文章

* [在 Squarespace 上安裝網站聊天小工具了解如何在 Squarespace 網站上安裝網路聊天小工具。 ](/tw/help/website-chat-widget/install-on-squarespace)
* [在 Joomla 上安裝網站聊天小工具了解如何在您的 Joomla 網站上安裝網路聊天小工具。 ](/tw/help/website-chat-widget/install-on-joomla)
* [在 Wix 上安裝網站聊天小工具了解如何在您的 Wix 網站上安裝網路聊天小工具。 ](/tw/help/website-chat-widget/install-on-wix)
* [在 WordPress 上安裝網站聊天小工具了解如何在您的 WordPress 網站上安裝網路聊天小工具。 ](/tw/help/website-chat-widget/install-on-wordpress)
* [網站聊天小工具快速入門將 respond.io 網站聊天小工具加入您的網站。 ](/tw/help/website-chat-widget/website-chat-widget)

找不到您想要的東西？ 🔎

[聯繫支持](/tw/contact-us)

2025-12-05T04:04:43.420Z

help

```json
[{"@context":"https://schema.org","@type":"TechArticle","articleBody":"了解如何在您的 Shopify 商店上安裝網路聊天小工具。","author":{"@type":"Person","image":"https://assets2-proxy.respond.io/ph8r57dk1q9w/7tin8k9c1emscQGOhIuNbC/0ed3f91c8580c4e5dfa90f035355122e/Petrina_Jo_avatar.svg","name":"JQ Lee","url":"https://respond.io/tw/author"},"dateCreated":"2023-02-27T08:55:38.000Z","dateModified":"2025-05-09T08:17:09.018Z","datePublished":"2023-02-27T08:55:38.000Z","headline":"在 Shopify 上安裝網站聊天小工具","image":"https://assets2-proxy.respond.io/ph8r57dk1q9w/4g8hW8m6uO1gSyElwlebfS/067c4806e0789fd1cef13b1ecfe7e065/shopify-logo.png","mainEntityOfPage":"https://respond.io/tw/help/website-chat-widget","publisher":{"@type":"Organization","logo":"https://respond.io/favicon/favicon.svg","name":"respondio"},"thumbnailUrl":"https://assets2-proxy.respond.io/ph8r57dk1q9w/4g8hW8m6uO1gSyElwlebfS/067c4806e0789fd1cef13b1ecfe7e065/shopify-logo.png","url":"https://respond.io/tw/help/website-chat-widget/install-on-shopify"},{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Help","item":"https://respond.io/tw/help","position":1},{"@type":"ListItem","name":"頻道","item":"https://respond.io/tw/help/channels","position":2},{"@type":"ListItem","name":"網站聊天小工具","item":"https://respond.io/tw/help/website-chat-widget","position":3},{"@type":"ListItem","name":"在 Shopify 上安裝網站聊天小工具","item":"https://respond.io/tw/help/website-chat-widget/install-on-shopify","position":4}]}]
```
