商品列表页设计

为了能让您提前预览商品列表页面展示样式，Shopper App 提供了商品列表页的预览及编辑功能。

进入商品列表页编辑器

安装 Shopper App 后，从以下位置访问设计面板：【应用】 > 【Shopper App】 > 【App 设计】 > 【设计】 > 【商品列表】。

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

选择预览分类

每次进入 Product List 编辑页时右侧预览区会默认展示 Shopper App 渠道下的第一个分类，您可点击 🔽 箭头切换预览分类。如您还未有创建商品数据或未有标记 Shopper App 渠道的分类，则预览区会出现 [No available collection.] 的提示。

配置顶部应用栏

【顶部应用栏】模块允许你自定义显示在商品列表页页眉中的组件。该模块包含三个可配置区域：【左侧 icon】、【中间】和【右侧 icon】。每个区域都旨在提升导航体验并增强用户互动。

各区域可用组件

设置公告栏

【公告栏】固定显示在页面顶部，不能删除或调整顺序。要配置公告栏，请选择你偏好的内容来源方式：

• 【同步首页公告栏】：文本、颜色和其他设置将继承首页公告栏的配置，且不可单独编辑。
• 【独立设定】：你可以新增最多 3 条公告，自定义文本、颜色和其他设置，设置发布时间，并可隐藏单条公告。

配置排序 & 筛选 & 列表视图

【排序 & 筛选 & 列表视图】组件由三个模块组成：【列表排序】、【列表筛选】与【列表视图】，可让您统一配置商品列表页的排序方式、外层筛选项与列表展示密度。三个模块的顺序固定，无法删除或调整。【列表排序】与【列表筛选】默认为启用状态且不可关闭；【列表视图】可单独开启或关闭，默认关闭。

设置列表排序

在【列表排序】模块中，您可以设置以下内容：

• 【预设排序名称】：为您的默认排序方式命名（例如 "精选推荐"），该名称将显示在 App 的排序按钮上，为必填项，且支持多语言设置。
• 【次级预设排序】：为商品列表页额外提供一个排序入口。点击【选择排序规则】选择一种排序方式（【推荐排序】以外的选项均可选择，例如热销、最新上架等），选定后需填写【次级预设排序名称】。若该排序方式在智能搜索推荐插件中被关闭，或您在此处清除了排序规则，此排序入口将不再展示，但已填写的名称不会被清空。
• 【价格排序】：默认关闭。开启后需设置【默认顺序】（【价格从低到高】或【价格从高到低】，默认选中【价格从低到高】），前台将展示价格排序按钮，顾客点击后按您设置的方向排序。

设置列表筛选

在【列表筛选】模块中，您可以设置外层筛选项：

1. 点击【添加筛选项】，从智能搜索推荐插件提供的筛选维度中选择要展示的筛选项（例如尺码、颜色、价格等），最多可添加 10 个。

   

2. 在【已设置筛选项】列表中，您可以单独启用或停用每个筛选项。

设置列表视图

在【列表视图】模块中，您可以设置商品列表的展示密度：

• 视图选项支持勾选【一行 1 个】、【一行 2 个】（默认勾选）、【单双列错落】与【一行 3 个】，可勾选一个或多个，但至少需保留一个视图。
• 若仅启用一个视图，前台只展示该视图效果，不会出现切换图标；若启用两个或以上视图，前台会显示切换图标，并需要您指定其中一个为【默认视图】。

配置悬浮图标

您可以在列表页添加一个随页面滚动始终可见的悬浮图标，并链接至在线客服或活动页面，以提升客服效率或推动活动参与。该组件支持【同步自首页悬浮图标组件】或【独立设定】两种方式。如果选择同步首页，图标将继承首页的设置，无法单独更改。如选择独立设定，您可为列表页单独配置图标，包括以下选项：

• 基础设置：为图标命名，选择图标显示的位置，并上传要在 App 中展示的图标图片。
• 功能类型：选择将图标链接至【活动页面】或【在线客服】：
  • 若选择【活动页面】：请设置跳转的页面链接。
  • 若选择【在线客服】：
    • 请选择要使用的客服服务。Shopper App 目前支持与 Shulex 集成，这是一款基于 AI 的实时客服解决方案。如需了解更多，请参阅《Shulex 集成指南》。
    • 请确认是否启用【未读消息提示】。启用后，当用户有未读消息时将显示红点提醒。
• 启用时间：您可根据需要设置悬浮图标的发布时间。

发布上线

编辑完且预览无问题后，点击右上角的【保存】或【发布】按钮将设计发布至 App 端。