# 在任何网站上嵌入 Shoprocket
> 在你现有的网站上销售。在“嵌入”中创建嵌入，点击“获取代码”，把它粘贴到 WordPress、Squarespace、Wix、Webflow 或普通 HTML 页面中。之后保存的更改会同步到所有页面，无需重新粘贴。
帮助中心 / 嵌入 - 更新于 2026年10月28日
嵌入可以把店铺的一部分放到任何网站上：一件带购买按钮的商品、完整的商品目录、你的分类，或一个搜索框。你在 **嵌入** 中创建它，点击 **获取代码**，再把代码粘贴到你的页面里。购物车和结账就在你的页面上打开，所以客户不会离开你的网站。
代码只需粘贴一次。之后你修改嵌入，哪怕换成了另一种布局，只要保存，所有放有它的页面都会同步更新。
## 开始之前
- 至少添加一件启用状态的商品。单品嵌入需要有商品可卖。
- 你需要能够编辑你的网站，并能在页面中添加代码或 HTML 区块。各个建站工具的说明在下文。
## 第 1 步（可选，推荐）：把 Shoprocket 添加到你网站的每个页面
**嵌入** 顶部有一张名为 **把 Shoprocket 添加到你网站的每个页面** 的卡片。它是一行放在网站页头的代码。装上之后，你的悬浮购物车和在线聊天会在网站的每个页面上都能使用，而不只是有嵌入的页面，以后添加的任何嵌入也都能直接使用。
1. 在后台进入 **嵌入**。
2. 在 **把 Shoprocket 添加到你网站的每个页面** 卡片上，点击 **复制**。
3. 在代码下方的标签页（**HTML**、**WordPress**、**Squarespace**、**Wix** 或 **Webflow**）中选择你的建站工具，按它的两个步骤把这一行粘贴到你网站的页头。
4. 打开你网站的任意页面。卡片的状态会从 **尚未检测到** 变为 **已连接**。
你可以跳过这一步。每个嵌入的代码里都包含同样的这一行，所以嵌入在任何页面上都能独立工作。
## 第 2 步：创建嵌入
1. 在 **嵌入** 中，点击 **新建嵌入**。
2. 在 **显示内容** 下选择一项：**一个商品**、**商品目录**、**分类** 或 **搜索**。
3. 选择一种布局：
- **一个商品**：**按钮**、**紧凑**、**卡片**、**主打** 或 **完整详情**。然后在 **哪个商品？** 下选择商品。
- **商品目录**：**网格**、**轮播** 或 **列表**。在 **哪些商品？** 下选择 **全部商品**、**一个分类** 或 **精选**。
- **分类**：**卡片墙**。
- **搜索**：**搜索框** 或 **搜索图标**。
4. 点击 **继续**。
每一种布局都是同一个嵌入的不同设置，所以你之后可以在编辑器中切换布局，而你粘贴的代码保持不变。
## 第 3 步：自定义
编辑器会显示实时预览，你可以像买家一样在里面操作：加入购物车、打开商品和结账。在 **此嵌入** 标签页中修改嵌入显示的内容。**店铺设计** 标签页为你整个店铺设置颜色和字体，这样你所有的嵌入和悬浮购物车风格一致。
嵌入一开始会有一个名称，例如“Products · Grid”。你可以随时重命名。
满意之后，点击 **保存并获取代码**。
## 第 4 步：复制代码并粘贴到你的网站
保存后会打开 **获取代码** 面板，内容如下：
```html
```
请一定用按钮复制你自己的代码，不要手动重新输入。第一行是嵌入的名称，script 为你的店铺加载 Shoprocket，最后一行则是嵌入显示的位置。
1. 点击 **复制代码**。
2. 在面板的标签页中选择你的建站工具，并把代码粘贴到嵌入要显示的位置：
- **HTML**：把代码粘贴到嵌入要显示的位置。无论有多少个嵌入，script 那一行在一个页面上只需出现一次。
- **WordPress**：在区块编辑器中，在嵌入要放的位置添加一个 **自定义 HTML** 区块。粘贴代码并更新页面。在 WordPress.com 上，脚本需要允许使用插件的套餐。
- **Squarespace**：编辑页面，在嵌入要放的位置添加一个 **代码** 区块。粘贴代码，保持显示方式为 HTML，然后保存。
- **Wix**：在编辑器中依次选择 **添加**、**嵌入代码**、**嵌入 HTML**。把代码粘贴到框中，并调整大小使其适配。Wix 会在框架中显示它，所以请给购物车留出空间。
- **Webflow**：把一个 **Code Embed** 元素拖到嵌入要放的位置。粘贴代码，保存，然后发布网站。
如果你已经在第 1 步把 Shoprocket 添加到了网站页头，页面里只需要代码的最后一行，也就是以 `