商品列表页设计
为了能让您提前预览商品列表页面展示样式，Shopper App 提供了商品列表页的预览及编辑功能。
进入商品列表页编辑器
安装 Shopper App 后，从以下位置访问设计面板：【应用】 > 【Shopper App】 > 【App 设计】 > 【设计】 > 【商品列表】。
Product List 页编辑器内可以选择您想要展示的内容，不可任意添加组件或挪动顺序。
选择预览分类
每次进入 Product List 编辑页时右侧预览区会默认展示 Shopper App 渠道下的第一个分类，您可点击 🔽 箭头切换预览分类。如您还未有创建商品数据或未有标记 Shopper App 渠道的分类，则预览区会出现 [No available collection.] 的提示。
配置顶部应用栏
【顶部应用栏】模块允许你自定义显示在商品列表页页眉中的组件。该模块包含三个可配置区域：【左侧 icon】、【中间】和【右侧 icon】。每个区域都旨在提升导航体验并增强用户互动。
各区域可用组件
| 区域 | 组件类型 | 描述 |
|---|---|---|
| 左侧 icon | 图标 | 最多可添加 3 个预设图标（例如心愿单或账户按钮）。 |
| 图片 | 上传店铺 Logo 或品牌图片，以强化店铺识别度。 | |
| 搜索栏 | 添加搜索栏，方便用户进行导航和内容搜索。 | |
| 中间 | 页面名称 | 显示商品列表页的标题。 |
| 图片 | 上传品牌或促销图片，用于展示店铺或活动。 | |
| 搜索栏 | 添加搜索栏，方便用户搜索商品或内容。 | |
| 右侧 icon | 图标 | 最多可添加 3 个预设图标（例如购物袋、收件箱或更多按钮）。 |
配置顶部应用栏组件
你可以按照以下步骤配置【顶部应用栏】区域：
-
前往【商品列表页】，然后点击【顶部应用栏】展开菜单。
-
选择你要配置的区域：【左侧 icon】、【中间】和【右侧 icon】。
-
在【组件类型】下拉菜单中，选择要添加的组件类型：
-
- 【图标】：点击【+ 添加图标】，最多可插入 3 个预设选项。
- 【图片】：根据需要上传品牌或促销图片。
- 【搜索栏】：添加预设搜索栏，为顾客提供便捷的站内浏览方式。
- 【页面名称】：显示商品列表页的标题。
-
-
点击【保存】或【发布】，应用你的设置。
设置公告栏
【公告栏】固定显示在页面顶部，不能删除或调整顺序。要配置公告栏，请选择你偏好的内容来源方式：
- 【同步首页公告栏】：文本、颜色和其他设置将继承首页公告栏的配置，且不可单独编辑。
- 【独立设定】：你可以新增最多 3 条公告，自定义文本、颜色和其他设置，设置发布时间，并可隐藏单条公告。
配置悬浮图标
您可以在列表页添加一个随页面滚动始终可见的悬浮图标，并链接至在线客服或活动页面，以提升客服效率或推动活动参与。该组件支持【同步自首页悬浮图标组件】或【独立设定】两种方式。如果选择同步首页，图标将继承首页的设置，无法单独更改。如选择独立设定，您可为列表页单独配置图标，包括以下选项：
- 基础设置：为图标命名，选择图标显示的位置，并上传要在 App 中展示的图标图片。
-
功能类型：选择将图标链接至【活动页面】或【在线客服】：
- 若选择【活动页面】：请设置跳转的页面链接。
- 若选择【在线客服】：
- 请选择要使用的客服服务。Shopper App 目前支持与 Shulex 集成，这是一款基于 AI 的实时客服解决方案。如需了解更多，请参阅《Shulex 集成指南》。
- 请确认是否启用【未读消息提示】。启用后，当用户有未读消息时将显示红点提醒。
- 启用时间：您可根据需要设置悬浮图标的发布时间。
发布上线
编辑完且预览无问题后，点击右上角的【保存】或【发布】按钮将设计发布至 App 端。