在主题编辑器中设计您的商品分类列表页（OS 3.0 主题）

商品分类列表页是客户浏览店铺中所有商品分类的页面，帮助他们按类别快速浏览您的商品目录。在 OS 3.0 主题编辑器中，您可以自定义此页面的标题、选择要显示的分类、调整分类卡片的排列方式，并设置每张卡片的图片样式。 

本指南将说明如何配置页面标题、选择并排列您的分类，以及自定义分类图片和名称的显示方式。

在主题编辑器中导航至商品分类列表页

如需在主题编辑器中打开商品分类列表页：

1. 从您的 SHOPLINE 管理后台，进入【网店】>【设计】，然后点击您要编辑的 OS 3.0 主题旁的【设计】按钮。
2. 在主题编辑器顶部，点击页面选择器，从页面类型列表中选择【分类列表】。

左侧边栏分为三组：【header】和【footer】，这两组内容适用于店铺的每个页面；以及【模板】，其中包含您正在编辑页面专属的组 件。对于商品分类列表页，【模板】下包含本指南将介绍的【分类列表】组件。

配置商品分类列表页的页面标题

如需配置页面标题：

1. 在左侧边栏的【模板】>【分类列表】下，点击【标题】。
2. 在设置面板中，更新以下内容：
   • 标题：显示在页面顶部的标题文字（默认值为 "All Collections"）。

   • 文本标签：设置此标题的 SEO 标题标签（例如 H2）。

     注意：【文本标签】设置仅用于 SEO，不会影响标题在店铺前台的视觉样式。

• 版式：设置标题的视觉字体样式（例如标题 3）。
• 文字对齐：将标题在桌面端设置为左对齐、居中或右对齐。
• 移动端文字对齐：为移动设备单独设置对齐方式。
• 背景：为标题添加背景颜色（默认值：无颜色）。

3. 点击【保存】以应用更改。

配置商品分类列表页的商品分类卡片

【商品分类卡片】模块位于主题编辑器的【分类列表】下，用于控制显示哪些分类、如何排列这些分类，以及每张卡片的图片和名称如何显示。本节将介绍如何选择分类、调整卡片排列方式，以及自定义分类图片和名称的显示。

选择要显示的分类

如需选择要在网格中显示的分类：

1. 在左侧边栏中，展开【分类列表】>【商品分类卡片】。
2. 在设置面板中，点击【+ 选择商品分类】。

3. 在弹出的选择窗口中，勾选要显示的分类，然后点击【完成】。

   注意： 如果最近创建的分类未出现在列表中，请点击选择窗口中的【刷新】按钮。 如需预览网格在移动端的显示效果，请点击主题编辑器顶部的【移动端】图标 分类卡片在移动端会以两列网格显示，设置与桌面端相同

4. 点击【保存】以应用更改。

在【商品分类卡片】下，您还可以开启或关闭【继承配色方案】，以控制卡片是否使用页面其余部分的配色方案。

调整商品分类卡片的排列方式 

除了选择要显示哪些分类，您还可以使用【布局】选项卡控制分类卡片在页面上的排列方式包括方向、间距和对齐方式。 

如需调整分类卡片的排列方式：

1. 在侧边栏中选择【商品分类卡片】，然后在设置面板中打开【布局】选项卡。
2. 配置以下选项：

   • 方向

     选项	效果
     列	分类卡片垂直堆叠，逐个排列。
     行	分类卡片水平并排排列。

• 自动换行

  选项	效果
  开启	一行内放不下的卡片会自动换到下一 行。
  关闭	所有卡片保持在同一行或同一列内，即使超出可视区域。

• 对齐方式

  选项	效果
  起始	卡片对齐到行或列的起始位置。
  居中	卡片居中对齐。
  末尾	卡片对齐到末尾位置。
  拉伸	卡片拉伸以填满可用空间。

• 分布方式

  选项	效果
  起始	卡片集中排列在容器起始位置，末尾卡片之后留有额外空间。
  居中	卡片居中排列，两侧留有相等的空间。
  末尾	卡片集中排列在容器末尾，首个卡片之前留有额外空间。

• 间距

  选项	Effect
  行	设置卡片行与行之间的垂直间距（单 位：像素）。
  列	设置卡片列与列之间的水平间距（单 位：像素）。

配置分类图片 

如需自定义分类图片的显示方式：

1. 在【商品分类卡片】下，点击【分类图片】。
2. 在设置面板中进行以下配置：
   • 分类图片比例：选择每张分类图片的宽高比 1:1、4:3 或 2:3。
   • 图片填充方式：选择【填充】以裁剪图片使其符合比例，或选择【适应】以 完整显示图片。
   • 分类图片形状：选择【方形】或【圆形】。
   • 图片展示区域：选择图片焦点的锚定位置【正中】、【正上方】、【右上 方】、【左上方】、【左侧】、【右侧】、【左下方】、【右下方】或【下 方】。
3. 点击【保存】以应用更改。

显示分类名称 

分类名称可以出现在每张卡片的两个位置：作为叠加在分类图片上的文字，或作为图片下方的说明文字。这两种位置使用相同的设置。

如需添加或编辑分类名称： 

1. 在【分类图片】下，点击【添加分类名称】，将名称以叠加形式添加到图片上；或选择【分类图片】下方已有的【分类名称】模块，编辑说明文字版本。
2. 在设置面板中进行以下配置：
   • 分类标题：输入要显示的分类名称文字。

   • 文本标签：设置此文字的 SEO 标题标签（例如 H2）。

     注意：【文本标签】设置仅用于 SEO，不会影响分类名称在店铺前台的视觉样式。

• 版式：设置文字的视觉字体样式（例如正文 3）。
• 文字对齐：将文字设置为左对齐、居中或右对齐。

3. 点击【保存】以应用更改。

设置配色方案 

如需更改应用于分类卡片的配色方案：

1. 在侧边栏中选择【分类列表】。
2. 在【颜色】下，点击【更换】以选择其他配色方案，或点击【编辑】以修改当前方案。
3. 点击【保存】以应用更改。

在商品分类列表页添加多级筛选

您可以选择性地添加【多级筛选】模块，帮助客户按商品、品牌或服务类型缩小分类范围，如果您的店铺分类数量较多，这个功能会很有用。

多级筛选区块会显示一个标题和副标题、最多几个筛选下拉选单、一个【搜索】按钮，以及下方一排快捷分类链接（例如「按商品选购」、「按品牌选购」或「按服务类型选购」）。

如需添加多级筛选：

1. 在左侧边栏的【模板】下，点击【添加组件】并选择【多级筛选】。
2. 在设置面板中进行以下配置：
   • 颜色：选择配色方案，或点击【编辑】修改当前方案。
   • 背景图片：点击【+ 添加图片】为筛选区块设置背景图片。
   • 蒙层不透明度：拖动滑块或输入百分比，控制背景图片在蒙层下的可见程度 （例如 30%）。
   • 桌面端高度：为该区块设置桌面端的固定高度（例如 650px）。
   • 移动端高度：设置移动端的高度，选择【自适应内容大小】可让高度自动调 整。
3. 点击【保存】以应用更改。