---
description: 学习如何在您的店铺上安装 web 聊天小部件。
title: 在商店安装网站聊天小部件
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)](/zh/whatsapp-business-calling-api)

帮助我... ⌘ 

1. [All Collections >](/zh/help)
2. [ 频道 >](/zh/help/channels)
3. [ 网站聊天小部件 >](/zh/help/website-chat-widget)
4. 在商店安装网站聊天小部件

# 在商店安装网站聊天小部件

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

JQ Lee

· 09 May 2025

小于一分钟

将 web 聊天小部件添加到您的店铺是一个快速和简单的过程。 它不需要任何编码技能或技术知识。 

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

## 安装设置

为了在Shopify上安装一个 web 聊天小部件，您需要：

* 访问您的 [商店账户](https://accounts.shopify.com/store-login)
* 您的 web 聊天窗口小部件的代码片段。

如果您还没有代码片段，您将在创建 [网站聊天小部件](https://respond.io/zh/help/website-chat-widget/website-chat-widget-overview) 或使用 [Facebook聊天插件](https://respond.io/zh/help/facebook-messenger/facebook-chat-plugin) 时生成一个。

> 如果您已在 respond.io 平台上连接频道，并且需要检索生成的代码片段，请按照此处 [的说明进行操作](https://respond.io/zh/help/website-chat-widget/website-chat-widget-overview#finding%5Fthe%5Fwebsite%5Fchat%5Fwidget%5Fcode%5Fafter%5Fconnecting%5Fthe%5Fchannel)。

## 在商店安装

**第 1 步：登录到商店**

登录到您的 [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 步：粘贴脚本**

从回复.io平台复制您的插件脚本。 在编辑代码页面的左侧面板上，单击 **部分** 文件夹来扩展它。 点击**footer.liquid**部分并粘贴聊天插件脚本。

一旦您将脚本粘贴到相应的部分，按左上角的紫色 **保存** 按钮。

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

**完成！**

打开网站并查看聊天插件。 你会在右下角找到它。 现在您的网站访问者可以不费力地与您聊天。 如果您使用了从响应生成的代码片段 o 平台，您将能够管理对话并从平台上更新小部件外观。

> 聊天窗口小部件现在在您的网站上处于活动状态。

> **注意**: 如果您正在使用外部主题且小部件无法正常工作，请尝试在 **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)

## 

相关文章 :woman\_technologist：

* [在Squarespace 上安装网站聊天小部件学习如何在您的 Squarespace 网站上安装Web 聊天小部件。 ](/zh/help/website-chat-widget/install-on-squarespace)
* [在 Joomla 上安装网站聊天部件学习如何在您的 Joomla 网站上安装 web 聊天小部件。 ](/zh/help/website-chat-widget/install-on-joomla)
* [在 Wix 上安装网站聊天小工具学习如何在您的Wix网站上安装网络聊天小部件。 ](/zh/help/website-chat-widget/install-on-wix)
* [在 WordPress 上安装网站聊天小部件学习如何在您的 WordPress 网站上安装网页聊天小部件。 ](/zh/help/website-chat-widget/install-on-wordpress)
* [网站聊天小工具快速入门将 respond.io 网站聊天小部件添加到您的网站。 ](/zh/help/website-chat-widget/website-chat-widget)

找不到您正在寻找的东西？ 🔎

[联系客服支持](/zh/contact-us)

2025-12-05T04:06:45.869Z

help

```json
[{"@context":"https://schema.org","@type":"TechArticle","articleBody":"学习如何在您的店铺上安装 web 聊天小部件。","author":{"@type":"Person","image":"https://assets2-proxy.respond.io/ph8r57dk1q9w/7tin8k9c1emscQGOhIuNbC/0ed3f91c8580c4e5dfa90f035355122e/Petrina_Jo_avatar.svg","name":"JQ Lee","url":"https://respond.io/zh/author"},"dateCreated":"2023-02-27T08:55:38.000Z","dateModified":"2025-05-09T08:17:09.018Z","datePublished":"2023-02-27T08:55:38.000Z","headline":"在商店安装网站聊天小部件","image":"https://assets2-proxy.respond.io/ph8r57dk1q9w/4g8hW8m6uO1gSyElwlebfS/067c4806e0789fd1cef13b1ecfe7e065/shopify-logo.png","mainEntityOfPage":"https://respond.io/zh/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/zh/help/website-chat-widget/install-on-shopify"},{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Help","item":"https://respond.io/zh/help","position":1},{"@type":"ListItem","name":"频道","item":"https://respond.io/zh/help/channels","position":2},{"@type":"ListItem","name":"网站聊天小部件","item":"https://respond.io/zh/help/website-chat-widget","position":3},{"@type":"ListItem","name":"在商店安装网站聊天小部件","item":"https://respond.io/zh/help/website-chat-widget/install-on-shopify","position":4}]}]
```
