购物车页设计

购物车页是 App 购物链路中非常重要的一部分，优质的购物车页有助于提高转化率。

设置路径

安装 Shopper App 后，从以下位置访问设计面板：Apps > Shopper App > App Design > Design > Shopping Bag。

设置方法

购物袋页编辑器内可以选择您想要展示的内容，不可任意添加组件或挪动顺序。

• 设置公告栏：公告栏组件展示在购物袋页顶部，公告栏组件内容支持选择同步 App 首页公告栏或者是独立设定两种。如选择【同步 App 首页公告栏】，则公告栏文字、颜色等都不可编辑；如选择【独立设定】，则可编辑公告栏文字、颜色，设定发布时间等，也可隐藏单条公告栏内容。
  
  
• 设置商品推荐：您可设置展示或隐藏商品推荐模块，还可以设置展示样式。

  备注：店铺安装“Product Recommendation”插件，且开启商详推荐，商品推荐才可使用展示或隐藏功能；如店铺未安装“Product Recommendation”插件或插件未开启商详推荐，商品推荐模块将为置灰状态，不可展示，您看通过下方提示进行操作。

  
  
  

• 设置自定义组件：您可以在 Shopper App 后台创建自定义组件后，将其嵌入至商店应用的购物车页，用以优化页面的设计或功能。点击【+ 添加组件】后，下滑至【自定义组件】区块，选择适用的组件嵌入页面，或点击【+ 创建自定义组件】前往组件编辑器新增组件。关于自定义组件的创建详情，请参阅此帮助中心文档。
  
  标记为【开发中】的组件为未发布状态，无法直接应用于正式版本中。但您可以通过 Snaplook 预览组件效果。确认内容无误后，可在代码编辑器中发布该组件，并将其用于正式应用。详细说明请参见《发布上线》部分说明。
  

• 配置悬浮图标：您可以在购物车页添加一个随页面滚动始终可见的悬浮图标，并链接至在线客服或活动页面，以提升客服效率或推动活动参与。该组件支持【同步自首页悬浮图标组件】或【独立设定】两种方式。如果选择同步首页，图标将继承首页的设置，无法单独更改。如选择独立设定，您可为购物车页单独配置图标，包括以下选项：
  
  
  • • 基础设置：为图标命名，选择图标显示的位置，并上传要在 App 中展示的图标图片。
    • 功能类型：选择将图标链接至【活动页面】或【在线客服】：
      • 若选择【活动页面】：请设置跳转的页面链接。
      • 若选择【在线客服】：
        • 请选择要使用的客服服务。Shopper App 目前支持与 Shulex 集成，这是一款基于 AI 的实时客服解决方案。如需了解更多，请参阅《Shulex 集成指南》。
        • 请确认是否启用【未读消息提示】。启用后，当用户有未读消息时将显示红点提醒。
    • 启用时间：您可根据需要设置悬浮图标的发布时间。
      
      

• 设置悬浮结账栏：悬浮结账栏可将特定栏位固定显示于页面上，方便用户在浏览过程中随时进行结账操作，有助于提升使用体验与购买转化率。系统预设提供【添加折扣码入口】及【结账按钮】两个选项，你也可以点击【+ 添加内容】插入自定义组件作为悬浮结账栏使用。详细操作请参见《设置自定义组件》。
  

发布上线

完成编辑并确认预览无误后，您可以根据实际需求，点击右上角的【保存】或【发布】按钮：

• 【保存】：用于暂存当前编辑内容，便于后续继续修改，不影响现有商店应用的展示。

• 【发布】 >【发布到 Snaplook】：将组件发布至 Snaplook，以预览并测试实际效果。适用于正式发布前的功能验证与样式检查。详见相关帮助中心文档。

• 【发布】 >【发布到正式 App】：将当前设置发布至正式商店应用，使更改内容对终端用户生效。