产品目录

电商目录展示供客户浏览的商品。它通过 产品分类 <ecommerce/categories_variants/categories>、可用的 产品变体 <ecommerce/categories_variants/product-variants>、排序选项和导航路径进行组织。实质上，电商目录就是您网站的商店页面。

产品目录在侧边栏（或滑出菜单）中提供 工具栏和一些过滤器 <ecommerce/catalog/toolbar-and-filters>，并配有专用的 产品列表区域 <ecommerce/catalog/product-listing>。此外，商店和分类页面的 布局 <ecommerce/catalog/customize-layout>、以及 电商页脚 <ecommerce/catalog/footer> 都可以自定义，您还可以根据需要添加 构建块 <ecommerce/catalog/catalog-blocks>。

要自定义目录，请前往商店页面，点击右上角的 编辑，选择要更改的部分，然后进入 样式 选项卡。

工具栏和侧边栏（或滑出菜单）提供高级过滤工具，帮助客户使用 分类 <ecommerce/catalog/categories> 和 属性 <ecommerce/catalog/attributes> 在产品目录中搜索和导航。

:::: tip ::: title 提示 :::

如果不想显示工具栏或侧边栏，请在网站编辑器中禁用所有相关选项，隐藏属性 <ecommerce/categories_variants/attributes>，并确保仅为网站分配一个价目表。 ::::

要在工具栏中创建 分类 <ecommerce/categories_variants/categories> 的快捷访问或在侧边栏中创建常规访问，点击 分类 旁的 顶部 和/或 侧边栏 按钮，并为它们选择 样式。当选择 侧边栏 时，会出现 递归折叠分类 选项，允许您在侧边栏中折叠分类。

:::: note ::: title 注意 :::

侧边栏中的分类过滤器不受 过滤器 设置的影响。 ::::

通过点击 工具栏 标签旁的 排序方式 和/或 搜索 按钮，可以在商店页面的工具栏中显示搜索框或排序选项。打开 浮动 开关后，搜索框、价目表选择器 <ecommerce/prices/pricelists>（如有）以及排序选项会始终显示在窗口底部，即使滚动时也不消失，并可选择 默认排序 选项。

:::: note ::: title 注意 :::

默认排序适用于 所有 分类 <ecommerce/categories_variants/categories>。 ::::

将 过滤器 字段设为：

  • 侧边栏：在侧边面板显示过滤器；
  • 屏幕外菜单：在点击工具栏中的 fa-sliders 过滤器 按钮时，弹出滑出菜单显示过滤器；
  • 隐藏：完全隐藏过滤器。

默认情况下，启用了两个 过滤器：

  • 价格：打开开关后显示 价格区间 条，用户可通过拖动可调手柄按特定价格范围过滤商品。

  • 标签：打开开关后在商店页面显示商品 标签，用户可通过 标签 部分过滤商品。

    :::: tip ::: title 提示 :::

    在电商后台创建商品标签，路径为 网站 --> 电子商务 --> 商品标签，点击 新建，填写 标签名称，打开 对客户可见 开关，选择 颜色，可选上传图片。随后在商品表单中为需要的商品分配相应标签。 ::::

对于 租赁产品 <../../../sales/rental>，您还可以添加 租赁日期 选项，显示日期范围日历以检查其在特定期间的可用性。

当您提供带有不同 属性 <ecommerce/categories_variants/attributes> 的 产品变体 <ecommerce/categories_variants/product-variants> 时，这些选项会在显示过滤器时出现在侧边栏或滑出菜单中。菜单会自动根据属性区段数量进行适配：

  • 最多 4 个属性：显示所有属性值。
  • 超过 4 个属性：属性区段会自动折叠。

:::: note ::: title 注意 :::

  • 对于 单选 和 下拉选择 显示类型 <products/variants/attributes>，当属性值超过 8 时会出现 查看更多 按钮，超过 20 时会出现搜索框。
  • 至少需要两个属性值过滤器才会可见。
  • 位于侧边栏或滑出菜单的属性过滤器受 过滤器 设置影响。 ::::

::: seealso

  • ../../../sales/sales/products_prices/products/variants
  • ../../ecommerce/products/categories_variants :::

::: {#ecommerce/catalog/layout} 通过配置每页显示的 尺寸、每行显示的商品数量以及 移动端 列数，来定义商店页面的商品展示数量。 :::

:::: note ::: title 注意 :::

每页显示的商品数量可能影响性能和页面加载速度。 ::::

此外，您可以手动更改商品在商店页面或商品分类页面的位置。操作方法：点击具体商品，修改其 尺寸，并在 样式 选项卡的 商品 部分使用箭头进行 重新排序。fa-angle-double-left（双左箭头）和 fa-angle-double-right（双右箭头）可将商品移动到最左或最右，fa-angle-left（单左箭头）和 fa-angle-right（单右箭头）可将商品向左或向右移动一行。您还可以选择或创建 丝带或徽章 <ecommerce/products/additional_features/product-highlight> 来突出显示特定商品。

:::: tip ::: title 提示 :::

也可以在 网站 --> 电子商务 --> 商品，切换为列表视图后拖拽商品来改变其在商店页面的位置。 ::::

要自定义产品卡片的设计，选择 产品设计，点击其旁的 fa-paint-brush（画笔）图标：

  • 选择 预设 布局；
  • 调整 通用 设计；
  • 定制 文本与内容（如显示 描述、评分）；
  • 定制 图片 布局（如启用 次要图片，在鼠标悬停商品图片时显示第二张图片）；
  • 启用部分 操作（如 fa-shopping-cart 添加到购物车、fa-exchange 对比、fa-heart 心愿单），并自定义其位置。

:::: tip ::: title 提示 :::

您也可以在产品卡片上添加 变体图片 <ecommerce/categories_variants/attributes>。 ::::

商店页和单独分类页的设计可按以下方式自定义：

  • 选择商店和分类页的 内容宽度 为 常规 或 全宽。
  • 定义页眉：在相应页面上直接更改页眉，必要时切换 显示标题 和/或 居中内容 开关。对于商品分类页，可切换 显示描述 开关以显示 分类描述 <ecommerce/categories_variants/categories>。
  • 使用 构建块 <../../website/web_design/building_blocks> 在页面顶部/底部添加内容，可针对整个商店页或特定分类页。若针对特定分类，区块仅在按该分类过滤时出现。将区块移动到页面最顶部或最底部，即可在通用商店页显示；或移动到分类名称下方或商品列表下方，仅在该分类过滤时显示。

:::: tip ::: title 提示 :::

  • 向电商分类页添加内容有助于提升 SEO <../../website/structure/seo> 策略。使用与商品或分类相关的关键词可增加自然流量。每个分类都有独立的 URL，可被搜索引擎索引。
  • 电商分类还可以作为 巨型菜单项 <website/header_footer/mega-menus> 添加，以实现快捷访问。
  • 也可以自定义单个 商品页面 <product_page>。 ::::

目录 构建块 </applications/websites/website/web_design/building_blocks> 可用于快速访问商店页、展示特定商品分类、突出特定商品选择或添加包含一般信息或促销的横幅。

根据所选模板，您可以在 样式 选项卡中 自定义 <website/building_blocks/edit> 区块。

::: {.example alt=“特定商品的目录块示例”} .. image:: catalog/catalog-products-block.png

例如，此特定 目录 区块模板展示了一组商品，可自定义以下内容：

  • 调整区块的设计。
  • 选择 卡片设计，并通过 fa-paint-brush（画笔）图标 配置 <ecommerce/catalog/products-design>。
  • 通过选择相应的 过滤器 选项决定显示哪些商品，例如 最新商品 以显示最新上架。
  • 在 分类 下拉列表中选择特定商品分类。
  • 通过切换 标签 和/或 显示变体 选项过滤商品。 :::

网站页脚 <website/header_footer/footer-design> 也可以配置为使用电商专属模板。随后添加相应的 链接 <website/elements/links>，并在网站编辑器中根据需要调整页脚文字和布局。可用支付方式 </applications/finance/payment_providers> 也会显示在此页脚中。若要调整其显示方式，请进入网站编辑器的 支持的支付方式 部分。

:::: note ::: title 注意 :::

无法为每个分类单独创建自定义页脚。 ::::