添加内容 — 产品

最近更新： 2024年7月13日
  • 主题：

创建对象：

  • 初学者
  • 中级
  • 用户

使用​ Products ​内容类型以网格或轮播布局将产品列表添加到Page Builder 阶段。 使用添加内容 — 块工具将块放在Page Builder舞台上，然后在块内放置产品列表。 或者，您也可以直接在页面的一行中添加产品列表。

使用产品轮播的准则

产品轮播提供了一种强大而引人入胜的方式展示您的产品。 为了充分利用，建议遵循以下准则：

  • 将产品轮播直接添加到页面宽度容器，如行、选项卡或一列布局。 使用页面宽度布局可确保产品得到最佳的响应式显示。 Page Builder根据页面宽度而不是容器宽度减少显示的产品数。

  • 不要将产品轮播添加到窄列。 如前所述，Page Builder默认根据页面宽度而不是列宽确定要显示的产品数量。

  • 如果希望产品轮播连续自动滚动，请将​ Autoplay ​和​ Infinite Loop ​都设置为Yes。 如果自动播放设置为Yes，而无限循环设置为No，则自动滚动将在产品列表的末尾停止。

  • 将​ Carousel Mode ​设置为Continuous以在轮盘中一次高亮、居中和滚动一个产品。 其他产品在列表中是可见的，但为突出显示居中的产品，其他产品是透明的。

    处于连续轮播模式的产品列表

  • 要在轮播中一次显示和滚动最多五个产品，请将​ Carousel Mode ​保留设置为Default。

    默认轮播模式下的产品列表

以下说明显示如何将Products列表添加到块。 然后，您可以使用小组件将块放置在商店中任何页面上的特定位置。

NOTE
如果您对Page Builder内容进行了重大更改，建议您增加管理员会话生命周期以防止会话在您工作时超时。

产品工具箱

工具图标描述
移动 移动图标 将产品容器及其内容移动到舞台上的另一个位置。
设置 设置图标 打开​ 编辑产品 ​页面，您可以在其中选择产品列表并更改容器的属性。
隐藏 隐藏图标 隐藏当前产品容器及其内容。
显示 显示图标 显示隐藏的产品容器及其内容。
复制 图标重复 制作产品容器及其内容的副本。
移除 删除图标 从阶段中删除产品容器及其内容。
NOTE
隐藏元素存储在数据库中，对客户不可见。 但是，这些元素对搜索引擎和对您的网站爬网的其他机器人可见。 如果通过具有不可见属性的API调用发出请求，则它们也会作为内容的一部分返回，除非您将它们从阶段中删除。

创建产品列表块

  1. 在​ 管理员 ​侧边栏上，转到​ Content > Elements>Blocks。

  2. 单击​ Add New Block。

  3. 输入​ Block Title ​和​ Identifier。

  4. 选择要提供块的​ Store View。

  5. 向下滚动并单击​ Edit with Page Builder ​或在内容预览区域中打开Page Builder工作区。

  6. 在Page Builder面板中，展开​ Add Content ​并将​ Products ​占位符拖到舞台上。

    添加产品内容类型

配置产品列表容器

将鼠标悬停在空的​ 产品 ​容器上以显示工具箱，然后单击​ 设置 （ 设置图标 ）图标。

产品工具箱

根据以下部分完成​ 设置：

外观

  1. 要确定产品列表在页面上的显示方式，请选择以下外观类型之一：

    类型描述
    产品网格显示网格中的产品，其中每行显示五个产品（默认情况下），每行的行数与显示在​ Number of Products to Display ​设置中输入的数字所需的行数相同。
    产品轮播显示轮盘中的产品（也称为滑块）。 每张幻灯片最多可显示五个产品。

    响应性警报：选择此外观时，最好直接将“产品”内容类型添加到响应式所在的行、选项卡或一列布局中，在较小的屏幕上每侧显示的产品更少。 如果将其添加到宽度小于页面宽度的内容类型（例如窄列），则无论屏幕大小如何，轮盘每张幻灯片显示的产品都会超过容器允许的数量。

    产品外观

    如果选择产品轮播，则还必须配置轮播设置。

  2. 对于​ Select Products By，选择产品选择方法：

    您可以按类别、SKU或条件选择产品。 这些选项相互排斥。 例如，您无法依次选择类别选项和类别选择器，然后再切换到条件选项以添加某些条件。 您的产品仅基于您为这三个选项中的​ 一个 ​设置的内容进行选择。

    • Category — 选择此选项可显示使用选定类别的产品。

      按类别的产品选择

      选中此选项后，将提供​ Category ​选择器。 单击箭头并向下展开以选择要显示的产品类别。 例如，在Commerce示例数据中，钻取并选择​ 女性>顶端>T恤 ​会显示该类别的所有产品。

      选择目录类别

    • SKU — 选择此选项可显示使用一个或多个SKU的产品

      选中此选项后，会提供一个​ Product SKUs ​文本框，您必须在该文本框中输入要显示的SKU列表（以逗号分隔）。

      按SKU的产品选择

    • Condition — 选择此选项可根据您定义的一个或多个条件显示产品。

      选中后，便可使用一些工具将条件添加到您的产品选择中。 例如，您只能选择将性别设置为Unisex的产品。

      按条件选择产品

      NOTE
      选择类别或SKU选项会提供Position的​ Sort By ​选项。 使用此排序选项，产品会以它们在目录中的显示顺序显示。
      对于“类别”选项，按位置排序会按照产品在目录中的显示顺序来显示产品。 对于SKU选项，按位置排序将按您在​ Product SKUs ​文本框中输入的顺序显示产品。

  3. 对于​ Sort By，选择列表中产品的排序顺序：

    选项描述
    Position （仅适用于类别和SKU选项）选择“类别”选项时，位置会按照产品在目录中的位置显示的顺序显示产品。 选择SKU选项后，职位会按照与产品SKU文本框中的SKU相同的顺序显示产品。
    Newest products first按产品添加到目录的日期对产品进行排序，首先显示具有最近输入日期的产品。
    Oldest products first按产品添加到目录的日期对产品进行排序，首先显示具有最早录入日期的产品。
    Name: A - Z按字母顺序对产品排序。
    Name: Z - A按反字母顺序对产品排序。
    SKU: ascending按SKU的字母数字顺序对产品排序。
    SKU: descending按SKU以反向字母数字顺序对产品排序。
    Stock: low stock first将产品从最低库存排序到最高库存。
    Stock: high stock first对产品从最高库存到最低库存进行排序。
    Price: high to low将产品从最高价排序到最低价。
    Price: low to high按从最低到最高的价格对产品进行排序。

    产品排序选项

  4. 在轮播或网格中输入​ Number of Products to Display。

    值可以从1到999。 网格的默认值为5，轮播的默认值为20。

    NOTE
    类别、SKU或条件设置中的某些产品可能不会显示在产品网格或轮播中。 例如，不会显示已禁用的产品、标记为不可见的产品、缺货的产品以及分配给其他网站的产品。
    IMPORTANT
    管理员中未定义可配置、分组和捆绑（动态价格）产品的价格。 因此，如果按价格过滤产品，则这些产品不会显示在​ Preview ​中。 如果按价格排序，则无法在​ Preview ​中正确订购这些产品。

轮播设置

  1. 要确定产品在轮盘中的显示方式，请选择​ Carousel Mode：

    选项描述
    Default默认情况下，轮盘每张幻灯片显示五个产品，并且会根据需要相应地减少该数量。
    Continuous默认情况下，轮盘每张幻灯片显示五个产品（右侧和左侧显示一半产品），但会以无限循环的方式一次居中和滚动一个产品。 居中产品的右侧和左侧的产品将变暗，以便突出显示居中产品。

    如果在这两种模式之间切换，则保留其他轮播设置，但​ Infinite Loop ​设置除外，该设置始终在连续模式下设置为Yes，并且字段被禁用。

    轮播设置

  2. 如果需要，请将​ Autoplay ​选项设置为Yes。

    启用自动播放后，轮盘会在页面加载时自动开始滚动。 如果保留默认设置(No)，客户必须单击幻灯片导航（点或箭头）以按顺序显示每张幻灯片。

    如果启用此功能，请输入​ Autoplay Speed ​以指定每张幻灯片之间的延迟时间（以毫秒为单位）。 默认值为4000 （4秒）。

  3. 如果需要，请将​ Infinite Loop ​选项设置为Yes。

    启用无限循环后，在页面打开时，幻灯片放映将无限期地重播。 如果保留默认设置(No)，则幻灯片放映仅播放一次。

    NOTE
    如果您将​ Infinite Loop ​设置为No，将​ Autoplay ​设置为Yes，则自动播放将在要显示的产品数结束时停止。

  4. 如果需要，请将​ Show Arrows ​选项设置为Yes。

    启用此选项后，每张幻灯片在左侧和右侧都包含​ 下一个 ​和​ 上一个 ​导航箭头。 如果保留默认设置(No)，幻灯片将不会显示导航箭头。

  5. 如果需要，请将​ Show Dots ​选项设置为No。

    当设置为默认设置(Yes)时，导航点出现在轮盘滑块底部。 如果禁用此设置，则轮播滑块不会显示导航点。

高级

  1. 要控制“产品”列表在父容器中的位置，请选择​ Alignment：

    选项描述
    Default应用在当前主题的样式表中指定的对齐默认设置。
    Left将列表沿父容器的左边框对齐，并允许使用指定的任何边距。
    Center将列表与父容器的中心对齐，并允许使用指定的任何边距。
    Right将列表沿父容器的右边框对齐，并允许使用指定的任何边距。

  2. 设置应用于产品容器所有四个侧面的​ Border ​样式：

    选项描述
    Default应用关联样式表指定的默认边框样式。
    None不提供任何容器边框的可见指示。
    Dotted容器边框显示为虚线。
    Dashed容器边框显示为虚线。
    Solid容器边框显示为实线。
    Double容器边框显示为双线。
    Groove容器边框显示为一条开槽线。
    Ridge容器边框显示为脊线。
    Inset容器边框显示为内嵌行。
    Outset容器边框显示为外线。

  3. 如果设置了除None之外的边框样式，请完成边框显示选项：

    选项描述
    Border Color通过选择色板、单击拾色器或输入有效的颜色名称或等效的十六进制值来指定颜色。
    Border Width输入边框线条宽度的像素数。
    Border Radius输入像素数，以定义用于使边框每个角倒圆角的半径大小。

  4. （可选）从当前样式表中指定要应用于容器的​ CSS classes ​的名称。

    用空格分隔多个类名。

  5. 输入​ Margins and Padding ​的值（以像素为单位）以确定“产品”容器的外边距和内边距。

    在图表中输入相应的值。

    容器区域描述
    Margins应用于容器所有边的外边缘的空白空间量。 选项： Top / Right / Bottom / Left
    Padding应用于容器所有边的内边缘的空白空间量。 选项： Top / Right / Bottom / Left