产品列表元素

关于产品列表元素

此 产品列表 通过展示一系列产品，产品列表发挥着至关重要的作用。其目的是通过向客户进行追加销售和交叉销售来有效提高销售价值。与之前的版本不同，产品列表元素 V7 提供了选择性显示特定产品的功能，从而增强了网页设计的灵活性。

如何向您的页面添加产品列表元素？

要开始使用 GemPages 中的产品列表元素，请按照以下步骤操作：

第三步： 登录到您的 Shopify 管理员 和访问 GemPages 仪表板 > 前往.

第三步： 找到目标页面以打开编辑器。

第三步： 从左侧边栏拖放 产品列表 元素下的 产品 部分到页面上您喜欢的部分。

第三步： 单击元素即可访问其配置选项，其中包括 个人设置 以及 先进的 标签。

配置“设置”选项卡

布局

您可以通过两种方式展示您的产品列表：

• 网格： 商品列表将以默认样式呈现。
• 滑杆： 产品图片将以轮播形式显示。

产品来源

您可以通过选择以下选项之一来选择产品的显示方式：

• 产品介绍： 手动选择特定产品进行展示。
• 采集： 如果您希望展示特定系列的产品，请选择此选项。请确保您已事先在 Shopify 后台中设置该系列，因为该元素将从后台检索信息。

• 相关新闻： 根据相同的集合、供应商或标签自动显示与当前产品相关的产品。

展示

使用滑块或输入精确的数字来选择一行中应出现的产品数量。

项目间距

调整 物品之间的间距 在产品列表中。

导航

在此部分中，您可以配置 导航 滑块产品列表的设置，包括：

• 位置： 选择显示列表内部或外部的箭头。
• 图标： 从可用列表中选择您喜欢的图标，或者您可以上传新的 SVG 文件。
• 图标大小： 调整图标大小。
• 按钮尺寸： 修改图标的按钮大小。
• 背景： 设置图标按钮的背景颜色。
• 边界： 在按钮周围添加边框并自定义其宽度和颜色。
• 角： 设置角半径来控制按钮边缘的圆度。
• 阴影： 启用并自定义按钮的阴影。
• 距边缘的间隙： 箭头和滑块边缘之间的空间
• 悬停时显示： 仅当鼠标悬停在产品列表上时才显示箭头。

点

切换滑块下方点的可见性以配置 点 设置以显示滑块下方的分页指示器，包括：

• 职务：选择点的位置。
• 活动颜色：设置当前活动（高亮）点的颜色。
• 非活动颜色：设置非活动（未选择）点的颜色。
• 点尺寸：调整每个点的大小（以像素为单位）。
• 边缘间隙：控制点与容器边缘的距离。

幻灯片效果

在下面 幻灯片效果 部分，您可以配置：

• 自动播放：无需用户交互即可自动滚动浏览产品。
• 滑动方向：选择滑块移动的方向：左或右。
• 无限循环：启用连续循环，以便滑块到达最后一个产品后循环回到开始处。
  
• 拖动/滑动： 允许用户手动拖动（桌面）或滑动（移动设备）滑块。
• 滑动速度：设置幻灯片过渡的持续时间（例如，500毫秒）。
• 动画：选择动画缓和类型，实现更平滑的幻灯片过渡（例如，缓入、缓出、线性）。

尺寸

在此部分中，您可以定义产品列表容器的大小，包括：

宽度：输入固定宽度值（以像素为单位），或激活 全屏宽度 使元素跨越整个页面宽度。

高度： 选择

• Auto：高度将根据内容进行调整。
• 定制化：输入具体的高度值来定义固定高度。

填充：设置元素边框内的间距，为内容创建喘息空间。

背景

此部分允许您自定义产品列表元素的背景样式：

• 颜色：使用颜色选择器应用背景颜色。您可以从预设中选择，输入十六进制代码，或从最近使用的颜色中选择。
• 图片：上传一张图片作为背景。背景可以是图案、纹理或宣传视觉效果，具体取决于您的设计。

形状

在此部分中，您可以塑造产品列表容器的角落：

圆角半径：分别调整每个角（左上角、右上角、左下角和右下角）的圆度。

• 0px = 尖角
• 50px+ = 完全圆角

使用预定义的布局按钮可快速在所有角落应用一致的值或重置为默认值。

配置高级选项卡

如需更多高级定制，请导航至 先进的 选项卡并按照 本文.

常见问题

1. 我可以在不同的页面上显示不同的产品吗？

是的。您可以使用产品列表设置中的“多个产品”或“一个系列”选项，手动选择每页的特定产品或系列。

2. 如何在移动设备上以两列显示产品列表？

单击“每行产品数”滑块旁边的设备图标>切换到移动视图，然后将数字设置为 2。

3. 为什么我的产品列表显示空白或者没有产品？

如果出现以下情况，可能会发生这种情况：

• 链接的 Shopify 系列为空或未发布。
• 所选产品缺货且在店面中隐藏。
• 您正在使用错误的产品名称预览特定于产品的页面。
• 仔细检查您的 Shopify 设置并预览上下文。

4. 我可以在产品列表元素中过滤产品吗？

不可以。产品列表元素不支持实时筛选或智能筛选。如果您使用智能产品筛选和搜索功能，它会将产品列表替换为其自身的输出。

5. 是否可以对列表内的产品卡进行样式设置？

是的。您可以使用 先进的 产品列表内的选项卡和单独的块设置。

6. 我可以在多个页面上使用相同的产品列表元素吗？

每个产品列表元素在其页面上都是唯一的。但是，如果您想在其他页面上重复使用相同的设置，可以复制页面或将其保存为模板。

7. 我可以将 GemPages 产品列表与智能产品过滤和搜索一起使用吗？

不兼容。智能产品筛选和搜索应用会生成自己的产品列表和筛选结构。因此，它与 GemPages 中的产品列表元素不兼容。

8. 为什么我的产品列表没有显示在首页上？

• 确保每篇 GemPages 首页已设置为默认页面否则，Shopify 将继续显示主题的首页。
• 确保首页是 出版不仅仅是保存。
• 如果你正在使用 购物 作为产品来源：
  • 该系列产品已在 Shopify 上发布。
  • 该系列产品均在网上商店有售。
• 如果你正在使用 产品中心 作为产品来源：
  • 产品列表设置中至少选择了一个产品。

9. 我可以更改产品列表元素中的产品顺序吗？

是的，如果您选择 产品中心 （手动拣货），您可以根据自己的喜好安排产品顺序；但是，如果您使用 购物 作为数据源，排序遵循集合的默认排序方式。