产品目录

电子商务目录展示供客户浏览的产品。它通过 产品类别、可用的 产品变体、排序选项和导航路径进行组织。本质上,电子商务目录就是您网站的商店页面。

产品目录包含侧边栏(或滑出式菜单)中的 工具栏和一些筛选器,以及专门的 产品列表区域。此外,可以自定义商店和类别页面的 布局 以及 电子商务页脚,并且您可以根据需要添加 构建块。

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

工具栏和筛选器

工具栏和侧边栏(或滑出式菜单)提供高级筛选工具,帮助客户使用 类别 和 属性 搜索和浏览产品目录。

小技巧

如果您不想显示工具栏或侧边栏,请在网站编辑器中禁用所有相关选项,隐藏属性,并确保只为网站分配一个价格表。

类别

要在工具栏中创建 类别 快捷访问,或在侧边栏中创建常规访问,请点击 类别 旁边的 顶部 和/或 侧边栏 按钮,并为其选择一种 样式。选中 侧边栏 时,会出现 折叠类别递归 选项,允许您在侧边栏中折叠类别。

工具栏中的类别快速访问入口。

注解

侧边栏中的类别筛选器不受 筛选器 设置的影响。

工具栏

通过点击 工具栏 标签旁边的 排序方式、搜索 和/或 租赁 按钮,可以在商店页面的工具栏中显示搜索栏、排序选项或 租赁产品 的日期选择器。开启 浮动 开关,可始终在窗口底部显示搜索栏、价格表选择器 (如有)和排序选项,即使滚动时也是如此,并选择 默认排序 选项。

注解

默认排序适用于 所有 类别。

筛选器

将 筛选器 字段设置为:

  • 侧边栏:在侧边面板中显示筛选器;

  • 离屏菜单:在滑出式菜单中显示筛选器,点击工具栏中的 筛选器 按钮时该菜单会打开;

  • 隐藏:完全隐藏筛选器。

默认情况下,会启用两个 筛选器:

  • 价格:使用该开关显示 价格范围 条,客户可通过拖动手柄按特定价格范围筛选产品。

  • 标签:开启该开关可在商店页面上显示产品 标签,并允许客户进入 标签 部分使用这些标签筛选产品。

    小技巧

    要在电子商务中创建产品标签,请转到 网站 ‣ 电子商务 ‣ 产品,选择要为其创建标签的产品。在产品表单上,转到 电子商务 选项卡,然后在 标签 字段中选择标签或 创建并编辑 一个。在 创建标签 弹出窗口中,添加 标签 名称,打开/关闭 对客户可见 开关,并选择 颜色。可选:添加图像。然后转到产品表单,在需要的位置分配相关标签。

属性

当您提供具有不同 属性 的 产品变体 时,显示筛选器后,这些选项会出现在侧边栏或滑出式菜单中。菜单会根据属性部分的数量自动调整:

  • 最多 4 个属性 :显示所有属性值。

  • 超过 4 个属性 :自动折叠各部分。

注解

  • 对于 单选按钮 和 选择 显示类型,当值超过 8 个时会出现 查看更多 按钮,当值的数量超过 20 个时会出现搜索字段。

  • 筛选器至少需要两个属性值才会显示。

  • 位于侧边栏或滑出式菜单中的属性筛选器受 筛选器 设置的影响。

产品列表区域

通过配置每页和每行显示的 大小,定义商店页面上显示的产品数量,并为 移动 设备指定列数。

注解

页面上显示的产品数量可能会影响性能和页面加载速度。

此外,您可以手动更改产品在商店页面或产品类别页面上的位置。为此,请点击特定产品,更改其 大小,并使用 样式 选项卡中 产品 部分的箭头 重新排序。 (双左箭头)和 (双右箭头)按钮可将产品移到最左侧或最右侧,而 (单左箭头)和 (单右箭头)按钮可将其向左或向右移动一行。您还可以选择或创建 丝带或徽标 来突出显示特定产品。

小技巧

您也可通过前往 网站 ‣ 电子商务 ‣ 产品,切换至列表视图,并通过拖放操作调整产品在列表中的顺序,从而改变其在商店页面的展示位置。

产品卡片设计

要自定义产品卡片的设计,请选择一种 产品设计,点击其旁边的 (画笔) 图标以:

  • 选择 预设 布局;

  • 调整 常规 设计;

  • 自定义 文本和内容 (例如,显示 描述 和 评分);

  • 自定义 图像 的布局(例如,启用 次要图像,以便在商店或类别页面上将鼠标悬停在产品图像上时显示第二张图像);

  • 启用一些 操作 (例如 添加到购物车、 比较 或 愿望清单),并自定义其位置。

小技巧

您还可以在产品卡片上添加 变体图片。

商店与分类页面设计

商店页面和各个类别页面的设计可按以下方式自定义:

  • 选择商店和类别页面的 内容宽度 应为 常规 还是 全宽。

  • 定义页眉:导航到相关页面,然后根据需要直接在页面上更改页眉。切换 显示标题 和/或 内容居中 开关。对于产品类别页面,切换 显示描述 开关以显示 类别描述。

  • 使用 构建块 在页面顶部/底部区域添加内容,既可针对整个商店页面,也可针对特定类别。在后一种情况下,该块 仅 在按该类别筛选时显示。为此,请将块移到最顶部或最底部区域以在常规商店页面上显示,或移到顶部类别名称下方或产品列表下方的区域,以便仅在按该特定类别筛选时显示。

    将构建块放置于页眉或页脚区域。

    小技巧

    • 向电子商务类别页面添加内容有助于改进 SEO 策略。使用与产品或电子商务类别相关的关键词还可以增加自然流量。此外,每个类别都有其特定的 URL,可被指向并被搜索引擎收录。

    • 电子商务类别还可以作为 巨型菜单项 添加,以便快速访问。

    • 也可以自定义单个 产品页面。

目录块

目录 构建块 可用于例如创建商店页面的快捷访问、展示特定产品类别、突出显示特定产品选择,或添加包含一般信息或促销的横幅。

根据所选的模板,您可以在 样式 选项卡中 自定义 这些块。

Example

特定产品的目录块示例

例如,这个特定的 目录 构建块模板会展示一组产品,并可通过以下方式进行自定义:

  • 调整构建块的设计。

  • 选择 卡片设计,并使用 (paint brush) 图标对其进行 配置。

  • 通过选择相关的 筛选 选项来定义构建块中显示哪些项目,例如选择 最新产品 以展示最新到货的商品。

  • 在 类别 下拉列表中选择特定的产品类别。

  • 通过切换 标签 和/或 显示变体 选项来筛选产品。