Start Strong
Sell Smart
Manage with Ease
Market to Success

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

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

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

开始之前：确认您使用的是正确工具

本文介绍的是 OS 3.0 主题编辑器中的商品分类列表页设置，用于控制客户在网页浏览器中看到的店铺前台。如果您要设置 的是 SHOPLINE Shopper app 的分类页面，请参阅《分类页设计》 移动应用有独立的分类页编辑器，其组件与主题编辑器不同。

 

 

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

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

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

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

注意：

  • 如需查看主题编辑器中所有可用组件的完整总览，请参阅《在主题编辑器中使用组件设计店铺页面（OS 3.0 主题）》。
  • 主题编辑器顶部导航和页面选择器中，此页面显示为【分类列表】，与单个分类页面【分类页】不同，后者在《在主题编辑器中设计商品列表页（OS 3.0 主题）》中单独介绍。

 

 

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

如需配置页面标题：

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

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

      注意：【文本标签】设置仅用于 SEO，不会影响标题在店铺前台的视觉样式。
  • 版式：设置标题的视觉字体样式（例如标题 3）。
  • 文字对齐：将标题在桌面端设置为左对齐、居中或右对齐。
  • 移动端文字对齐：为移动设备单独设置对齐方式。
  • 背景：为标题添加背景颜色（默认值：无颜色）。
  1. 点击【保存】以应用更改。

 

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

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

选择要显示的分类

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

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

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

    注意：

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

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

 

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

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

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

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

    • 方向

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

  • 自动换行

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

  • 对齐方式

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

  • 分布方式

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

  • 间距

    选项  Effect
    行 设置卡片行与行之间的垂直间距（单 位：像素）。
    列 设置卡片列与列之间的水平间距（单 位：像素）。
注意：以上布局设置仅适用于【商品分类卡片】模块。如需设置适用于店铺所有页面的全局间距，请前往【全局设置】>【布局】。更多详情请参阅《在主题编辑器中配置全局设置（OS 3.0 主题）》。

 

配置分类图片 

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

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

显示分类名称 

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

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

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

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

      注意：【文本标签】设置仅用于 SEO，不会影响分类名称在店铺前台的视觉样式。
  • 版式：设置文字的视觉字体样式（例如正文 3）。
  • 文字对齐：将文字设置为左对齐、居中或右对齐。
  1. 点击【保存】以应用更改。

 

设置配色方案 

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

  1. 在侧边栏中选择【分类列表】。
  2. 在【颜色】下，点击【更换】以选择其他配色方案，或点击【编辑】以修改当前方案。
  3. 点击【保存】以应用更改。
注意：如需编辑店铺内所有可用的配色方案，请前往【全局设置】>【颜色设置】。更多详情请参阅《在主题编辑器中配置全局设置（OS 3.0 主题）》。

 

 

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

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

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

如需添加多级筛选：

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