在主题编辑器中设计商品列表页（OS 3.0 主题）
商品列表页是客户在您的店铺中浏览特定分类或系列商品的页面。在 OS 3.0 主题的主题编辑器中，您可以直接在 SHOPLINE 管理后台自定义该页面的页头、商品列表及其他专属设置，无需编写代码。
本指南将说明如何在主题编辑器中进入商品列表页、配置其页头、控制商品在移动端的展示方式，以及设置【快速查看】、【悬停效果】和【促销卡片】等互动功能。
|
开始之前：确认您使用的是正确工具 本文介绍的是主题编辑器（OS 3.0 主题）中的商品列表页，用于控制客户在网页浏览器中看到的店铺外观。如果您要设计的是 SHOPLINE Shopper App 中的商品列表页，请参阅《分类页设计》。Shopper App 拥有独立的商品列表页编辑器，其组件与主题编辑器无关。 |
在主题编辑器中进入商品列表页
如需在主题编辑器中打开商品列表页：
- 在 SHOPLINE 管理后台，进入【在线商店】，然后在要编辑的主题上点击【设计】>【我的主题】。选择一个 OS 3.0 主题，点击设计以进入主题编辑器。
- 在主题编辑器顶部，点击页面选择器，并从页面类型列表中选择【商品列表页】。
- 将鼠标悬停在【商品列表页】上以打开其模板列表，选择【默认模板】以编辑标准商品列表页布局，或点击【 + 创建模板】以创建可分配给特定分类的自定义布局。
- 使用左侧边栏的分类下拉列表，选择要在编辑时预览的分类。
| 注意：主题编辑器左侧边栏始终分为三组：【header】与【footer】，适用于店铺的每个页面；以及【模板】，其中包含您正在编辑的页面专属内容。对于商品列表页，模板下包含本文介绍的【分类封面】和【商品列表】组件。 |
配置分类封面组件
【分类封面】组件位于主题编辑器的【模板】下，包含多个模块，例如【分类图】、【标题】和【分类描述】。本节介绍最近更新的两项设置页头：【banner 图片】和【面包屑】显示状态， 两者均位于分类图模块内。标题和分类描述模块则沿用主题编辑器中通用的设置，完整的组件与设置列表请参阅《在主题编辑器中使用组件设计店铺页面（OS 3.0 主题）》。
上传页头 Banner 图片
如需上传或更新页头 banner 图片：
- 在主题编辑器中，进入【商品列表页】。在【模板】下，点击【分类封面】。
- 点击【分类图】以打开其设置面板。
- 上传【页头 banner 图片】。在同一面板中，设置【移动端 banner 图】，以控制移动端访客看到的图片。
- 点击【保存】以应用更改。
隐藏商品列表页面包屑中的「首页」节点
经典版商品列表页的面包屑中包含一个无法删除的硬编码【首页】节点，但您可以将其隐藏。如需隐藏：
- 在主题编辑器中，进入【商品列表页】。在模板下，点击【分类封面】。
- 点击【分类图】以打开其设置面板。
- 开启【隐藏面包屑】。
- 点击【保存】以应用更改。
| 注意：开启隐藏面包屑只会隐藏【首页】节点，并不会将其删除。如需了解更多面包屑配置选项，请参阅《在主题编辑器中使用组件设计店铺页面（OS 3.0 主题）》。 |
配置商品列表组件
商品列表页的商品网格可以依照客户的浏览方式做出调整，在移动端每行显示一件或两件商品、让客户不需离开页面即可预览商品、在商品之间加入促销卡片以吸引注意、让客户筛选与排序商品，以及当分类商品数量过多时自动隐藏筛选器。
本节将说明这些设置，皆位于【商品列表】组件中。其他模块，例如【商品标题】、【商品价格】、【售罄标签】和【购买按钮】，则沿用主题编辑器中通用的设置，完整的组件与设置列表请参阅《在主题编辑器中使用组件设计店铺页面（OS 3.0 主题）》。
选择移动端每行显示的商品数量
如需让客户在移动端浏览商品列表页时，切换每行显示一件或两件商品：
- 在 SHOPLINE 管理后台，进入【在线商店】>【设计】>【我的主题】。选择一个 OS 3.0 主题，点击【设计】以进入主题编辑器。
- 进入【商品列表页】，并从下拉列表中选择一个分类。在【模板】下，点击【商品列表】以打开其设置面板。
-
开启【移动端展示多列切换器】。
提示：如需在配置时预览移动端效果，可点击主题编辑器顶部的设备切换按钮，切换至移动端视图。 - 从下拉菜单中设置【移动端默认列数】和【移动端备选切换列数】，然后点击【保存】。
|
注意：
|
在商品卡片上启用快速查看与悬停浮层效果
客户可以在不离开商品列表页的情况下，透过商品图片上方出现的【快速查看】按钮预览商品详情。您也可以控制该按钮及其他浮层内容在客户悬停商品时的淡入淡出方式，即【悬停浮层】效果。这两项设置皆位于【顶层图片浮层】模块中。设置步骤：
- 在主题编辑器中，进入【商品列表页】。在【商品列表】下，点击下拉箭头图标以选择要预览的分类。
- 在商品列表下，进入【商品卡片】>【商品图片】，将鼠标悬停在【顶层图片浮层】上，点击【 +（添加内容）】，选择【快速查看】按钮（您也可以为该浮层添加其他内容）。
- 在其设置中自定义【快速查看】按钮的文案、颜色和样式。默认按钮文案为 View more。
- 点击【顶层图片浮层】本身，以配置【悬停浮层效果】选择 ——【浮层常显】、【浮层淡入】或【浮层淡出】，以控制浮层内容的呈现方式。
- 点击【保存】以应用更改。
|
注意：
|
为商品列表页添加促销卡片
您可以在商品网格中加入【促销卡片】，与【商品卡片】并列显示，用于突出展示促销、活动或主打商品。添加与配置步骤：
- 在主题编辑器中，进入【商品列表】页。在【商品列表】下，点击【 +（添加内容）】，选择【促销卡片】。
- 点击【促销卡片】以打开其设置面板。
- 在图片下，点击【 + 添加图片】上传促销图片。您也可以单独上传移动端图片，并设置【图片展示区域】（例如正中）。
- 设置【标题文字】，并选择【标题版式】（例如标题 5）。
- 使用【富文本】编辑器添加【描述】。
- 点击【保存】以应用更改。
| 注意：默认开启【继承配色方案】，此时【促销卡片】将跟随页面的全局配色方案。 |
为商品列表页开启筛选器
开启【启用筛选器】（位于商品列表设置面板内）后，客户即可在商品列表页依条件筛选商品，例如价格或款式选项。客户看到的是主题原生筛选器，还是筛选类应用提供的筛选器，取决于您安装了哪些应用。开启步骤：
1. 在主题编辑器中，进入【商品列表页】。在【模板】下，点击【商品列表】以打开其设置面板。
2. 在【排序与筛选】下，开启【启用筛选器】。
3. 点击【保存】以应用更改。
了解商品列表页与搜索页的筛选器显示上限
为确保最佳性能，仅当商品数量在支持范围内时，筛选器才会显示：
- 商品列表页：最多 5,000 个商品。
- 搜索结果页：最多 1,000 个商品。