## 开始之前

<Callout type="tip">
要使用编辑器，请先添加您的商店，然后启用您的 **在线商店**（您的网站）、**移动应用**，或两者都启用。[了解如何操作](/docs/adding-a-store-and-turning-on-online-store-or-mobile-app)
</Callout>

---

## 打开编辑器

1. 前往 ⚙️ <Badge>设置</Badge> › **销售渠道** › <Badge>在线商店与移动应用</Badge>。
2. 在商店卡片上，点击 <Badge>编辑在线商店和移动应用</Badge>。如果只启用了一个产品，按钮会显示 <Badge>编辑在线商店</Badge> 或 <Badge>编辑移动应用</Badge>。

![带有“编辑在线商店和移动应用”按钮的商店卡片](https://cdn.easybizcloud.app/knowledge/037e6caa-0a5e-4edd-8334-ce78158811df.png)

编辑器左边是设置，右边是实时预览。左边列出 **页面**、**导航** 和 **应用设置**。预览上方有：

- **网页 · 电脑** 显示您的在线商店在电脑上的样子。
- **网页 · 手机** 显示您的在线商店在手机上的样子。
- **移动应用** 显示您的移动应用。
- **浅色** 和 **深色** 只改变预览。

<Callout type="note" title="浅色和深色模式">
您的在线商店和移动应用会跟随每位客户自己手机或电脑的浅色或深色模式设置。在深色模式下，如果您在品牌资料中添加了深色标志，在线商店会显示这些标志。
</Callout>

---

## 页面

| 页面 | 您可以设置 |
|---|---|
| 订单 | 商店的首页，客户在这里跟进自己的订单。您可以在订单旁边添加卡片，例如促销活动图片或您的优惠。请参阅[设置您的订单和账户页面](/docs/setting-up-your-orders-and-account-pages) |
| 结账 | 客户可以预约哪些业务单元，以及每个业务单元的预约步骤。请参阅[让客户在线预约](/docs/letting-customers-book-online) |
| 价目表 | 哪些业务单元显示价格，以及按您设定的顺序显示。请参阅[在线展示您的价格](/docs/showing-your-prices-online) |
| 付款 | 客户可以使用的付款方式。请参阅[在您的在线商店收款](/docs/payments-on-your-online-store) |
| 账户 | **客户可以修改姓名**。请参阅[设置您的订单和账户页面](/docs/setting-up-your-orders-and-account-pages) |
| 登录 | 客户如何登录和注册。请参阅[客户登录与注册](/docs/customer-sign-in-and-sign-up) |
| 预付套餐 | 可选。开启 **销售预付套餐**，即可销售在 设置 › 预付套餐 中标记为 **在线出售** 的套餐。客户购买套餐并在线付款，之后的订单可以用它抵扣。请参阅[设置预付套餐](/docs/set-up-prepaid-packages) |
| 物品页面 | 可选，仅适用于在线商店，属于专业版功能。开启 **为每件物品提供页面**，客户会再送来护理的物品（例如手袋）每件都有一个终身不变的页面和二维码，显示送修记录、护理建议和下次需要护理的时间。请参阅[设置物品页面](/docs/setting-up-item-pages) |
| 钱包、促销活动、定期订单、推荐好友、会员、预付套餐 | 可选页面。打开页面并开启它的开关：**提供钱包**、**提供促销活动**、**提供定期订单**、**开启推荐好友**、**出售会员** 或 **销售预付套餐**。关闭的页面显示 **已隐藏** |

![商店编辑器中的页面列表，物品页面已用框标出](https://cdn.easybizcloud.app/knowledge/372fa75b-b22d-4a46-b1fe-33a3acd9f84a.png)

---

## 导航

| 设置 | 作用 |
|---|---|
| 公告栏 | 显示在每个页面顶部的一条简短消息。[了解如何操作](/docs/setting-up-your-announcement-bar-footer-and-languages) |
| 页眉 | 网站顶部的按钮（见下文） |
| 网页菜单 | 网站 **菜单** 按钮下列出的页面。拖动可调整顺序 |
| 页脚 | 指向您的隐私政策和条款的链接 |
| 移动端标签 | 手机屏幕底部的标签，在移动应用和网站中都会显示。最多选择 3 个页面，其他所有页面都放在 **菜单** 下 |
| 联系组件 | 用于在线聊天和 WhatsApp 的聊天按钮。[了解如何操作](/docs/setting-up-the-contact-widget-and-live-chat) |

<Callout type="note">
页眉、网页菜单和页脚只在启用了在线商店时显示。如果您关闭某个页面，它也会从菜单中移除。
</Callout>

<Callout type="tip">
新商店的移动端标签默认是订单、价目表和账户。预约页面不会成为标签，客户通过 **立即下单** 按钮打开它。
</Callout>

### 页眉按钮

网站的页眉有两个按钮：

- **主按钮：** 实心，在菜单旁边。
- **次按钮：** 描边，在主按钮前面。只在电脑上显示。

新商店的主按钮是 **立即下单**，用于打开预约。次按钮是 **价格与服务**。

您可以为每个按钮选择它打开的内容：您的某个页面、**WhatsApp** 或 **不显示按钮**。

- 打开预约的按钮显示 **立即下单**。WhatsApp 按钮显示 **通过 WhatsApp 聊天**。
- 对这两种按钮，您可以在 **按钮文本** 中选择其他文字：**立即预订**、**预约取件**、**预约维修** 或 **获取报价单**。
- 打开其他页面的按钮显示该页面的名称。

<Callout type="note">
要添加 WhatsApp 按钮，请先在联系组件中开启 WhatsApp。页眉按钮只在网站上显示，不会出现在移动应用中。
</Callout>

---

## 应用设置

**公司与地点**
选择客户付款的公司。然后开启接受线上订单的地点，只经营门店的地点保持关闭。客户不需要选择地点，由他们的地址决定哪个地点为其服务。

**应用名称和图标**
您的移动应用的名称和图标。您的网站也使用同一个图标。[了解如何操作](/docs/launch-your-mobile-app)

**商店图标**
仅适用于没有移动应用的商店。这张图片会显示在客户的手机主屏幕和浏览器标签上。点击 <Badge>上传或生成</Badge> 或 <Badge>用品牌标志创建</Badge>。在您选择之前，图标会用您的品牌标志生成，或使用其首字母。

**Google Analytics**
添加您的 GA4 ID，追踪网站的访客。[了解如何操作](/docs/adding-google-analytics-to-your-online-store)

<Callout type="note">
从旧版网店迁移过来？公司与地点会显示 **在销售渠道中设置**。这些设置保持不变，因为您的员工和 WhatsApp 订单也在使用它们。
</Callout>

<Callout type="tip">
您的网址和自定义域名在商店卡片上，不在编辑器中。[了解如何操作](/docs/adding-a-store-and-turning-on-online-store-or-mobile-app)
</Callout>

---

## 您的更改会自动保存

每一处更改都会自动保存为草稿。在您发布之前，客户看到的仍是您上次发布的版本。

产品上线后，它的商店卡片会显示 **有未发布的更改**，<Badge>预览</Badge> 按钮会显示有多少处更改在等待发布。

有些更改无需发布就会让客户看到：

- 商店卡片上的 **商店设置**（销售渠道编码和下一个订单号）会立即生效。
- 品牌资料中的 **品牌名称** 和 **标志** 会在页面下次加载时显示。品牌 **颜色** 会随您的下次发布生效。
- 编辑器以外的设置在您保存时即生效：预约选项、时段、服务区域、最低订单金额、取消与改约，以及优惠券。

---

## 预览您的下一个版本

预览让您在发布之前，按客户将来使用的方式试用您的商店。

1. 点击右上角的 <Badge>预览</Badge>。
2. 检查您的更改。不想要的更改，点击它的 <Badge>放弃</Badge>。如果还没有任何内容上线，会跳过这一步。
3. 点击 <Badge>准备预览</Badge>。

![“检查您的更改”对话框，列出了一处更改和“准备预览”按钮](https://cdn.easybizcloud.app/knowledge/9cb1240c-31f4-481e-9849-eca06418897f.png)

### 预览中会发生什么

预览和您已上线的商店一样运作，只是不会产生任何付款：

- **登录是真实的。** 登录会打开该电子邮箱或手机号码对应的客户账户，没有就新建一个，并发送真实的登录验证码。请使用您自己的电子邮箱或号码。
- **预约都是测试订单。** 订单号中带有 **#T**，不会收费。
- **保存的银行卡是真实的。** 您添加的银行卡会通过您商店的 Stripe 或 HitPay 账户保存，并保留在该客户的账户中。测试订单绝不会从这张卡扣款。
- **没有其他付款。** 预览中不出售充值或会员，不提供 **立即付款**，也不使用店铺余额。

登录后，您可以点击右上角的 <Badge>退出登录</Badge>，以新客户的身份重新试一次。

<Callout type="tip">
要查看测试订单，请在 Console 中前往 **销售** › **订单**，然后点击 <Badge>培训</Badge>。试完后请取消这些订单。请参阅[在 Console 中处理线上订单](/docs/handling-online-orders-in-the-console)。
</Callout>

<Callout type="note">
如果有内容还没准备好给客户使用，例如缺少价格、服务区域或时段，预览顶部会显示一条提示条。点击提示条上的 <Badge>设置</Badge> 即可处理。
</Callout>

<Callout type="warning">
客户可以预约的每项服务都需要预约步骤，例如地址、日期和时间以及联系方式。如果有服务没有任何步骤，您将无法预览或发布。请打开 **结账** 页面为它添加步骤，或关闭这项服务。
</Callout>

完成后，点击 <Badge>编辑</Badge> 返回编辑。

### 在手机上试用移动应用

您的移动应用会在手机上的 **EasyBiz Workflow**（您团队使用的应用）中打开。在预览中，选择预览上方的 **移动应用**。旁边的 **在手机上试用真实应用** 卡片会显示以下步骤：

1. 下载 **EasyBiz Workflow** 应用。用手机相机扫描适用于您手机的二维码。
2. 打开应用，用您的 EasyBiz 账户登录。
3. 依次点按 **菜单**、**预览客户应用**，然后选择您的商店。它会按客户看到的样子打开。
4. 要离开时，点按圆形的眼睛按钮，然后点按 **退出预览**。

- 眼睛按钮的菜单会显示您的品牌，以及 **订单：测试订单，不收费**。
- 商店启用移动应用，并且您在 Console 中点击过 <Badge>预览</Badge> 后，它就会出现在 **预览客户应用** 中。
- 新的预览会让手机上的应用重新加载。发布后，预览即结束。
- 如果您关闭 EasyBiz Workflow，再次打开时仍会进入预览，直到您点按 **退出预览**。
- 您团队中登录了 EasyBiz Workflow 的任何人都可以打开它。

编辑时，同一张卡片上有 <Badge>在手机上预览</Badge>，点击即可开始预览。要为您的团队设置这个应用，请参阅[安装并登录 EasyBiz Workflow](/docs/getting-the-easybiz-app-for-your-team)。

---

## 发布

您在预览中发布，所以客户得到的正是您试用过的内容。

1. 在预览中，点击 <Badge>发布</Badge>。
2. 每个产品都有自己的卡片。点击 <Badge>发布在线商店</Badge>、<Badge>发布移动应用</Badge>，或两者都点。

在线商店的客户会在大约 2 分钟内看到更改。移动应用会立即显示。发布一个产品不会改变另一个。

### 首次发布

- **在线商店：** 您的网站上线，并从今天开始计费。只有拥有账单权限的员工才能执行。
- **移动应用：** 按钮显示 <Badge>上架您的应用</Badge>。它会发布您的应用；应用稍后在“上架您的应用”的第 8 步中构建。然后按步骤让您的应用上架 App Store 和 Google Play。从您的应用首次出现在其中一个应用商店时开始计费，但首次发布同样需要账单权限。[了解如何操作](/docs/launch-your-mobile-app)

两者的首次发布都需要有效的 EasyBiz 试用或订阅。移动应用还需要包含它的价格方案。如果您的方案不包含，发布时会显示“您的价格方案不包含移动应用。请联系 EasyBiz 将您切换到当前方案，然后再发布。”

<Callout type="note">
发布不会构建您的移动应用。新的应用名称或图标是打包在应用里的，所以只有在“上架您的应用”第 8 步点击 <Badge>重新构建</Badge> 后，才会出现在 App Store 和 Google Play 上。您的页面、服务和价格会随发布一起生效，无需重新构建。
</Callout>

<Callout type="note">
您的在线商店和移动应用共用一些设置：登录、结账步骤，以及公司与地点。如果您更改了其中一项，但只发布一个产品，这项更改仍会同时用于两个产品。发生这种情况时，发布中该产品的卡片会提醒您。
</Callout>

<Callout type="warning">
如果预览后又有更改，发布时会要求您重新预览。点击 <Badge>重新预览</Badge>，然后发布。
</Callout>

<Callout type="tip" title="担心改坏您的商店？">
在您发布之前，客户看不到您编辑的任何内容。请先预览。如果某个版本出了问题，可以用版本历史恢复到早前的版本。
</Callout>

---

## 恢复到早前的版本

1. 在编辑器中，点击 <Badge>⋮</Badge> › <Badge>版本历史</Badge>。
2. 选择 **Web 端**（您的在线商店）或 **移动应用**。
3. 在您想要的版本上点击 <Badge>恢复</Badge>，然后确认。

客户会立即得到恢复的版本，只影响该产品。

---

## 常见问题

**我已经做了更改，但客户看到的还是旧商店。为什么？**
>更改在发布之前都是草稿。点击 <Badge>预览</Badge>，然后点击 <Badge>发布</Badge>。

**为什么没有发布按钮？**
>发布只在预览中显示。请先点击 <Badge>预览</Badge>。

**预览中的登录是测试账户吗？**
>不是。预览会打开您所用电子邮箱或手机号码对应的真实客户账户，没有就新建一个。您在那里保存的银行卡会真实保存。只有订单是测试订单，不会收费。

**发布时提示我需要账单权限。**
>首次发布会开始计费：在线商店立即开始计费，移动应用从它在应用商店上架的第一天开始计费。请让拥有账单权限的人员来发布。

**发布时显示“要让在线商店上线，需要有效的试用或订阅。”**
>您的 EasyBiz 试用或订阅未生效。点击消息中的 <Badge>打开账单</Badge>。移动应用也是如此。

**发布时显示“新版本尚未上线。”**
>在在线商店卡片上点击 <Badge>重试</Badge>。新版本上线之前，客户看到的仍是之前的版本。

**我的团队可以在客户之前试用商店吗？**
>可以。能打开编辑器的人都可以使用预览。登录了 EasyBiz Workflow 的人都可以打开“预览客户应用”。订单都是测试订单，不会收费。

**在哪里找到我商店的网址？**
>在“设置 › 在线商店与移动应用”的商店卡片上，**网址** 一行。

---

## 下一步

选择客户预约时要填写的内容：[让客户在线预约](/docs/letting-customers-book-online)。
