51黑料不打烊

文档CommercePage Builder

添加内容 — 产物

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主题：

创建对象：

  • 初学者
  • 中级
  • 用户

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

使用产物轮播的准则

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

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

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

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

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

    处于连续轮播模式的产物列表 {width="600"}

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

    默认轮播模式下的产物列表 {width="600"}

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

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

产物工具箱

工具
图标
描述
移动
移动图标 {width="25"}
将产物容器及其内容移动到舞台上的另一个位置。
设置
设置图标 {width="25"}
打开? 编辑产物 ?页面，您可以在其中选择产物列表并更改容器的属性。
隐藏
隐藏图标 {width="25"}
隐藏当前产物容器及其内容。
显示
显示图标 {width="25"}
显示隐藏的产物容器及其内容。
复制
图标重复 {width="25"}
制作产物容器及其内容的副本。
移除
删除图标 {width="25"}
从阶段中删除产物容器及其内容。
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 ?占位符拖到舞台上。

    添加产物内容类型 {width="600" modal="regular"}

配置产物列表容器

将鼠标悬停在空的? 产物 ?容器上以显示工具箱，然后单击? 设置 （ 设置图标 {width="20"} ）图标。

产物工具箱 {width="500" modal="regular"}

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

外观

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

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

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

    产物外观 {width="300"}

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

  2. 对于? Select Products By，选择产物选择方法：

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

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

      按类别的产物选择 {width="500"}

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

      选择目录类别 {width="500"}

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

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

      按SKU的产物选择 {width="500"}

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

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

      按条件选择产物 {width="500"}

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

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

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

    产物排序选项 {width="300"}

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

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

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

轮播设置

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

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

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

    轮播设置 {width="600" modal="regular"}

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

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

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

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

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

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

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

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

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

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

高级

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

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

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

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
    选项 描述
    Default 应用关联样式表指定的默认边框样式。
    None 不提供任何容器边框的可见指示。
    Dotted 容器边框显示为虚线。
    Dashed 容器边框显示为虚线。
    Solid 容器边框显示为实线。
    Double 容器边框显示为双线。
    Groove 容器边框显示为一条开槽线。
    Ridge 容器边框显示为脊线。
    Inset 容器边框显示为内嵌行。
    Outset 容器边框显示为外线。

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

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

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

    用空格分隔多个类名。

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

    在图表中输入相应的值。

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

在舞台上保存并预览

单击右上角的? Save ?以应用设置并返回到Page Builder工作区。

如果您配置了产物轮播，则它应该类似于以下示例：

阶段上的 产物轮播 {width="600"}

您现在可以使用小组件将此块放置到商店中要显示的任意位置。 或者，您可以使用添加内容 — 块将块添加到现有页面、选项卡或块。

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d