分类页设计
商品分类页面是所有产品系列的中心，客户单击此页面中的产品分类并访问其中的产品，您可以根据需要自定义设计页面。
分类页样式
Shopper App 提供了 3 套不同的分类页设计模版，可完全满足您的设计需求。
- 图文平铺
- 纯文字列表
- 三级图文
您可以在预览区查看各个样式类型，以决定您的商店想要哪一种布局。
访问并配置商品分类页面
安装 Shopper App 后，点击应用> 我的应用> Shopper App > App 设计> 设计按钮，在顶部选择分类页 。
配置顶部应用栏
【顶部应用栏】模块允许你自定义显示在商品分类页页眉中的组件。该模块包含三个可配置区域：【左侧 icon】、【中间】和【右侧 icon】。每个区域都旨在提升导航体验并增强用户互动。
各区域可用组件
| 区域 | 组件类型 | 描述 |
|---|---|---|
| 左侧 icon | 图标 | 最多可添加 3 个预设图标（例如心愿单或账户按钮）。 |
| 图片 | 上传店铺 Logo 或品牌图片，以强化店铺识别度。 | |
| 搜索栏 | 添加搜索栏，方便用户进行导航和内容搜索。 | |
| 中间 | 页面名称 | 显示商品分类页的标题。 |
| 图片 | 上传品牌或促销图片，用于展示店铺或活动。 | |
| 搜索栏 | 添加搜索栏，方便用户搜索商品或内容。 | |
| 右侧 icon | 图标 | 最多可添加 3 个预设图标（例如购物袋、收件箱或更多按钮）。 |
配置顶部应用栏组件
你可以按照以下步骤配置【顶部应用栏】区域：
- 前往【分类页】，然后点击【顶部应用栏】展开菜单。
-
选择你要配置的区域：【左侧 icon】、【中间】和【右侧 icon】。
-
在【组件类型】下拉菜单中，选择要添加的组件类型：
-
- 【图标】：点击【+ 添加图标】，最多可插入 3 个预设选项。
- 【图片】：根据需要上传品牌或促销图片。
- 【搜索栏】：添加预设搜索栏，为顾客提供便捷的站内浏览方式。
- 【页面名称】：显示商品分类页的标题。
-
- 点击【保存】或【发布】，应用你的设置。
设置分类页公告栏
公告栏位于页面顶部，不可移动顺序，支持选择同步 App 首页公告栏或者是独立设定两种设置。如选择【同步 App 首页公告栏】，则公告栏文字、颜色等都不可编辑；如选择【独立设定】，则可编辑公告栏文字、颜色，设定发布时间等，也可隐藏单条公告栏内容。
启用或禁用搜索栏
在【搜索栏】区域，你可以选择是否在【公告栏】下方显示搜索栏，为顾客提供快速便捷的商品查找方式。搜索栏的位置不可调整，但可通过点击【眼睛图标】将其隐藏。
设置分页组件
分页组件位于公告栏组件下方，不可删除及调整顺序。
- 开启分页：点击分页组件，开启分页，组件默认关闭状态。
- 编辑分页名称：点击”Section"，编辑分页名称；可点击”添加分页组件“添加分页，最多可添加 10 个分页。
- 编辑分页页面：选择您需要编辑的分页，并在下方正文部分进行页面编辑。当切换页面时，中间预览区会自动切换预览页面。
设置商品分类页面
Shopper App 提供两种 【分类列表】 组件版本，用于设计商品分类页面。为获得更完整且灵活的分类管理体验，我们建议优先使用新版组件。
【分类列表（旧）】：支持 Shopper App 2.3.0 及更早版本，该组件已计划逐步淘汰。
【分类列表（新）】：全新设计的配置面板，提供更结构化的方式来管理分类分组与层级结构。
|
注意：
|
设置商品分类页面（分类列表 – 旧）
若要使用 【分类列表（旧）】 组件配置商品分类页面，请按照以下步骤操作。
配置显示样式
在设计编辑器左侧菜单中，点击 【分类列表（旧）】。
-
为商品分类页面选择样式：
图文平铺：以图文形式自上而下显示分类名称与图片。
纯文字列表：以纯文字列表形式显示分类。
三级图文：支持最多三层分类结构，方便顾客浏览第二层与第三层分类。
若选择【图文平铺】或【三级图文】，请进一步选择图片比例（2:3、3:4 或 1:1）。
管理分类设置
-
点击 【添加分类】，选择要在 App 中显示的商品分类，然后点击 【完成】。
-
在【分类设置】下，点击分类旁的展开图标以配置其设置：
【分类图】：上传自定义图片（可选）。若未上传，则默认使用后台中的分类图片。
【分类名称】：编辑在 App 中显示的分类名称。
【发布计划】（可选）：设置开始时间与结束时间，或启用 【永不过期】。
【添加二级分类】：在主分类下添加子分类。
-
通过上下拖动调整分类显示顺序，左右拖动以调整层级结构。若要移除分类，请将鼠标悬停在分类上并点击 【删除】 图标。
完成配置后，点击 【保存】 以暂存设置，或点击 【发布】 立即将设置应用至 App。
设置商品分类页面（分类列表 – 新）
【分类列表（新）】 组件采用以「分类分组」为核心的结构化配置方式，使商品分类页面的设计更加精细且灵活。若要使用该组件配置商品分类页面，请按照以下步骤操作。
配置显示样式
在左侧菜单中，点击 【＋ 添加组件】，并选择 【分类列表（新）】。
点击 【分类列表（新）】 以打开分类管理面板。
-
在设置面板中，切换至 【样式设置】 标签页。
-
在 【展示样式】 下选择分类的展示方式：
【标签宫格】：以分页标签显示主分类，并在下方以网格形式展示子分类项目。
【图文目录】：以图文形式展示分类项目。
-
根据所选显示样式配置对应选项：
-
若选择【标签宫格】样式：
【叶子项展示风格】：设置叶子项在宫格中的展示方式（例如每行显示数量）。
【叶子项图片比例】：选择叶子项的图片比例（1:1、2:3、3:4 或原图比例）。
【宫格标题对齐方式】：选择标题对齐方式（居左或居中）。
-
若选择【图文目录】样式：
【类目分组图片默认来源】：选择类目分组使用的图片来源（例如自定义图片或自动读取分类/商品图片）。
【类目分组图片比例】：设置类目分组图片比例（1:1、2:3、3:4 或 原图比例）。
【叶子项展示风格】：设置叶子项的展示方式（例如缩略图文字）。
【叶子项图片比例】：选择叶子项的图片比例（1:1、2:3、3:4 或原图比例）。
-
管理分类设置
-
在 【分类列表（新）】 设置面板中，切换至 【分类管理】 标签页。
-
点击 【添加类目分组】 以新增一个分类分组。
-
在分类分组中配置以下内容：
-
【分组名称】：点击该类目分组名称，并配置：
【自定义分组名称】：设置该类目分组在 App 中显示的名称（【标签宫格】与【图文目录】皆适用）。
-
【类目分组图片】：仅在选择 【图文目录】 显示样式时可配置分组图片来源：
如选择【自动读取分类/商品图片】：需进一步指定对应的【商品分类】。
如选择【自定义图片】：需上传自定义图片。
【发布计划】（可选）：设置该类目分组的显示时间（【标签宫格】与【图文目录】皆适用）。
-
【分组图片】：点击 【＋ 添加图片】 上传最多 3 张分组图片。上传后，点击图片以打开 【编辑图片】 面板，并配置：
【自定义图片】：上传、替换或移除图片（支持格式：.png、.jpg、.jpeg、.gif；最大 1 MB）。
【跳转页面】：设置用户点击图片后的跳转目标（商品分类、自定义页面或网页）。
【商品排序方式】：选择该分类下商品的排序方式（例如推荐排序）。
【发布计划】（可选）：设置图片及其对应项目的显示时间。
-
-
根据需要新增分类结构：
点击 【＋ 子分组名称】 新增第二层分类。支援功能与主分类雷同。
点击 【＋ 叶子入口】 新增叶子入口，可直接添加至分组中，或添加至子分组下；针对每个叶子入口，您可以设置其显示名称、跳转页面、入口图片，并通过 【发布计划】 控制其显示时间。
如有需要，可重复以上步骤新增更多分类分组。
完成配置后，点击 【保存】 以暂存设置，或点击 【发布】 立即将设置应用至 App。
设置悬浮图标
悬浮图标功能可让您设定一个在顾客滚动页面时持续显示的快捷入口。您可以将该图标链接到在线客服或指定的活动页面，以提升客户支持效率或推进活动参与度。请按照以下步骤进行设置：
- 在左侧菜单中，点击【悬浮图标】。然后选择如何配置分类页的图标：
- 【同步自首页悬浮图标组件】：所有设置将跟随首页的悬浮图标，无法单独更改。
- 【独立设定】：为分类页配置不同于首页的悬浮图标。请看第 2 步了解设置说明。
- 如果选择了【独立设定】，点击【添加悬浮图标】，并为图标配置以下选项：
- 基础设置：为图标命名，选择图标显示的位置，并上传要在 App 中展示的图标图片。
-
功能类型：选择将图标链接至【活动页面】或【在线客服】：
- 若选择【活动页面】：请设置跳转的页面链接。
- 若选择【在线客服】：
- 请选择要使用的客服服务。Shopper App 目前支持与 Shulex 集成，这是一款基于 AI 的实时客服解决方案。如需了解更多，请参阅《Shulex 集成指南》。
- 请确认是否启用【未读消息提示】。启用后，当用户有未读消息时将显示红点提醒。
- 启用时间：您可根据需要设置悬浮图标的发布时间。
-
点击【保存】保存设置以便后续修改，或点击【更新并使用】立即生效配置。
发布上线
完成编辑并确认预览一切正常后，点击右上角的“应用”按钮将您的设计发布到应用中。如果您想暂时保留发布，可以点击“保存”以保留您的编辑内容。