产品目录¶
电子商务目录显示供客户浏览的产品。它使用 产品类别、可用的 :ref:` 产品变体 <ecommerce/categories_variants/product-variants>`、排序选项和导航路径来组织。从本质上讲，电子商务目录就是网站的商店页面。
产品目录的侧边栏（或滑出菜单）上有一个 :ref:` 工具栏和一些筛选器 <ecommerce/catalog/toolbar-and-filters>`，还有一个专门的 :ref:` 产品列表区 <ecommerce/catalog/product-listing>`。此外，还可以自定义商店和分类页面的 :ref:` 布局 <ecommerce/catalog/customize-layout>`，以及 :ref:` 电子商务页脚 <ecommerce/catalog/footer>`，并可根据需要添加 :ref:` 建构块 <ecommerce/catalog/catalog-blocks>`。
要定制目录，请进入商店页面，点击右上角的 编辑，选择要更改的部分，然后导航到 :guilabel:`样式`选项卡。
工具栏和筛选器¶
工具栏和侧栏（或滑出菜单）提供高级过滤工具，帮助客户使用 类别 和 属性 搜索和浏览产品目录。
小技巧
如果不想显示工具栏或侧边栏，请禁用网站编辑器中的所有相关选项， 隐藏属性，并确保只为网站指定一个价目表。
类别¶
要在工具栏中创建 类别 快速访问或在侧边栏中创建一般访问，请点击 类别 旁边的 顶部 和/或 侧边栏 按钮，并为其选择 风格。选择 侧边栏 时，会出现 折叠类别递归 选项，允许您折叠侧边栏中的类别。
注解
侧边栏中的类别筛选器不受 筛选 设置的影响。
工具栏¶
通过点击 工具栏 标签旁边的 排序方式 和/或 搜索 按钮，可以在商店页面的工具栏中显示搜索栏或排序选项。切换 浮动 开关以始终在窗口底部显示搜索栏、 价格列表选择器 <ecommerce/prices/pricelists>`（如有）和按排序选项，即使在滚动时也是如此，并选择 :guilabel:`默认排序 选项。
注解
默认排序适用于 全部 类别。
筛选¶
将 筛选 字段设置为：
侧边栏：在侧边栏显示筛选项；
屏幕外菜单：在点击工具栏上的 :guilabel:`筛选项`按钮时打开的滑出菜单中显示筛选项；
隐藏：完全隐藏筛选器。
默认情况下，会启用两个 筛选项：
价格：使用该开关可显示 价格区间 栏，客户可通过拖动可调手柄，根据特定价格范围筛选产品。
标签：切换开关以在商店页面上显示产品的 标签，并允许客户通过 标签 部分使用这些标签筛选产品。
小技巧
要在电子商务中创建产品标签，请进入 ，然后点击 新建。添加 标签 名称，切换 客户可见 开关，并选择 颜色。可选择添加图片。然后转到产品表单，在需要的地方分配相关标签。
对于 :doc:` 租赁产品 <…/…/…/sales/rental>`，您还可以添加 租赁日期 选项，以显示日期范围日历，检查特定时期内的可用性。
属性¶
当您提供具有不同 属性 的 产品变体 时，这些选项会在显示筛选器时出现在侧栏或滑出菜单中。菜单会自动适应属性部分的数量：
最多 4 个属性：显示所有属性值。
超过 4 个属性：部分会自动折叠。
注解
对于 单选框 和 选择 显示类型，当属性取值超过**8**时会出现 查看更多 按钮，当值超过**20**时会出现搜索栏。
某一属性需至少包含两个取值，对应的筛选条件才会在页面中显示。
侧边栏或滑出菜单中的属性筛选器受 筛选 设置的影响。
产品列表区域¶
通过配置每页和每行显示的 尺寸 来定义商店页面上显示的产品数量，并为 移动 设备指定列数。
注解
页面上显示的产品数量可能会影响性能和页面加载速度。
此外，您还可以手动更改产品在商店页面或产品类别页面上的位置。要执行此操作，请点击特定产品，更改其 尺寸，然后使用 风格 标签的 产品 部分中的箭头进行 重新订购。:icon:`fa-angle-double-left`（:guilabel:`双向左箭头）和 ）按钮允许您将产品移动到最左或最右，.icon:fa-angle-double-left`（ :guilabel:`双向左箭头）按钮允许您将产品移动到最右或最左： ）和 ）按钮可将产品向左或向右移动一行。您还可以选择或创建 丝带或徽章，以突出显示特定产品。
小技巧
您也可通过前往 ，切换至列表视图，并通过拖放操作调整产品在列表中的顺序，从而改变其在商店页面的展示位置。
产品卡设计¶
要自定义产品卡的设计，请选择 产品设计，然后点击旁边的 （画笔） 图标：
选择 预设 布局；
调整 通用 设计；
自定义 文本和内容`（例如，显示 :guilabel:`描述 和 评级）；
自定义 图片’ 布局（例如，启用 副图展示 以在商店或分类页面上将鼠标悬停在产品图片上时显示第二张图片）；
启用一些 操作`（例如， :icon:`fa-shopping-cart 添加到购物车, 商品对比，或 愿望清单）并自定义它们的位置。
小技巧
您还可以在产品卡上添加 变体图片。
商店与分类页面设计¶
商店和单个类别页面的设计可按以下方式定制：
目录区块¶
例如，可以使用 目录 构建模块 创建快速访问商店页面、展示特定产品类别、突出显示特定产品选择，或添加包含一般信息或促销信息的横幅。
根据所选模板，您可以在 样式 选项卡中 自定义 块。
Example
以该款商品 :guilabel:`目录`专属区块模板为例，其核心功能为展示精选商品组，且支持以下自定义配置：
调整区块的整体设计样式；
选择 商品卡片 并使用 :icon:`fa-paint-brush`(画笔)`图标 :ref:`配置 <ecommerce/catalog/products-design>` 对其进行配置。
选择相关的 筛选 选项，例如，选择 最新产品 以显示最新到货的产品，从而确定在区块中显示哪些产品。
在商品 :guilabel:`分类`下拉列表中，选定展示的专属商品分类；
通过切换 标签 和/或 显示变体 选项筛选产品。