在主题编辑器中设计购物车与结账页面（OS 3.0 主题）
购物车和结账页面是顾客完成购买流程的最后两个步骤，帮助顾客确认购物车中的商品、完成付款并成功提交订单。
对于 OS 3.0 主题，【购物车页】在【主题编辑器】中进行设计，您可以自定义其核心组件，并添加促销或说明内容，鼓励顾客完成购买。【结账页】则需在独立的【结账编辑器】中进行配置，您可在其中管理结账页面布局及其他结账体验相关设置。
本文将介绍如何在【主题编辑器】中自定义购物车页面、说明【结账编辑器】的用途，并引导您前往相关指引，进一步配置结账页面。
|
开始之前：确认您使用的是正确的工具 本文介绍的是主题编辑器（OS 3.0 主题）中的购物车页面，用于控制购物者在网页浏览器中的商店前台查看和操作购物车商品的方式。如果您要使用 Shopper App 为 SHOPLINE 移动应用设计购物袋页面，请参阅《设计购物袋页面》。Shopper App 使用独立于主题编辑器的另一套页面编辑器和组件。 |
在主题编辑器中导航至购物车页面
如需在主题编辑器中打开购物车页面，请按以下步骤操作：
- 在 SHOPLINE 管理后台中，依次进入【在线商店】>【设计】，然后点击您要编辑的 OS 3.0 主题上的【设计】按钮。
-
在主题编辑器顶部，点击页面选择器，并从页面类型列表中选择【购物车页】。
|
注意：
|
了解购物车页面的核心组件
【购物车】组件位于主题编辑器的【模板】下，包含三个核心区块：【标题】、【商品列表】和【小计】。各区块的作用如下：
- 【标题】：在页面顶部显示页面标题（例如"购物车"）。
- 【商品列表】：显示购物车中的每件商品，包括商品图片、名称、数量选择器和小计金额。
-
【小计】：显示购物车的当前总计，并包含另外两个区块：
- 【小计价格】：显示购物车中当前商品的总费用。
- 【结账按钮】：购物者点击以进入结账流程的按钮。
| 注意： 不同主题支持的区块可能有所不同，请以实际显示为准。 |
点击某个区块以打开其设置面板。每个区块仅支持主题编辑器中通用的标准【边距】和【内边距】设置，不包含任何其他内容或显示选项。
您也可以点击并拖动【六点拖动图标】，以调整组件内各区块的顺序。
在购物车页面添加和排列自定义组件
除核心组件外，您还可以使用自定义组件在购物车页面添加额外内容，用于突出促销信息、营造紧迫感，或在购物者准备结账时增强其信心。
在购物车页面添加自定义组件
如需在购物车页面添加组件，请按以下步骤操作：
- 在主题编辑器中，进入购物车页面。
-
在【模板】下，点击【+ 添加组件】。
-
在打开的面板中，于【主题】标签页下浏览或搜索组件。
- 点击该组件，将其添加到购物车页面并进行配置。
购物车页面推荐自定义组件
以下组件常被添加到购物车页面，以提高转化率、促进追加购买，并在结账前增强购物者的信心。
| 组件 | 描述 |
| 倒计时器 | 显示倒计时时钟以营造紧迫感，促使购物者在促销或优惠结束前完成结账。 |
| 折扣推广 | 突出促销、折扣或限时优惠信息，促使购物者完成购买或在购物车中添加更多商品。 |
| 特色推荐商品 | 展示相关或互补商品，鼓励购物者在结账前提高订单金额。 |
| 商标列表 | 展示信任徽章、支付方式或认证标志，在结账前增强购物者的信心。 |
| 富文本 | 添加自定义文本，例如运费详情、退货政策或安全结账提示，以解决结账前的常见疑虑。 |
示例：在购物车页面添加倒计时器
如需在购物车页面添加并配置【倒计时器】，请按以下步骤操作：
- 在主题编辑器中，进入购物车页面。
-
在【模板】下，点击【+ 添加组件】，然后在【主题】标签页中选择【倒计时器】。
-
点击新添加的【倒计时器】组件以打开其【设置】面板。配置组件的整体外观，包括【倒计时字体颜色】、【配色】、【全屏显示】和【布局】，使其与您的商店设计保持一致。
-
在【倒计时器】下，点击【图片】，为倒计时横幅上传促销图片、设置图片宽度并设定转跳链接。
-
点击【倒计时设置】。在【设置】下，选择内容是否【继承配色方案】。在【布局】下，根据需要调整内容区域的间距和排版。
然后配置以下区块：
- 【标题】：输入促销的主标题。
- 【描述】：添加辅助文本，例如促销详情或行动号召语。
- 【分割线】：添加或移除分割线，以分隔内容区块。
- 【倒计时器】：设置倒计时的结束日期和时间，并自定义计时器的外观。
- 【按钮】：配置按钮文本和跳转链接，将购物者引导至相关页面或促销活动。
- 点击【保存】以应用您的更改。
设计结账页面
结账页面在【结账编辑器】中进行配置，这是一个专门用于管理商店结账体验的编辑器。
如需访问该编辑器，请打开主题编辑器顶部的页面选择器并选择【结账页】。系统将跳转至结账编辑器，您可以在其中自定义结账页面布局、支付方式和物流信息等设置。
有关详细的设置和自定义说明，请参阅《结账步骤设定》和《自定义商店结账页面》。