关于产品图像元素
产品图片元素是产品模块的一部分，它允许您直接从 Shopify 管理员展示特定产品的图片。
该元素的特点是：
- 特色图片： 主图取自您的媒体部分中的第一张图片 Shopify 管理员 > 产品.
- 图片列表： 来自同一媒体部分的图像集合，以视觉图库的形式显示。
要使用产品图片元素，请确保您的 Shopify 管理员的媒体部分中有一个带有图片的产品。
如何向页面添加产品图片元素
注意： 为了实现正常功能， 产品图像元素 应该定位 产品模块内部.
第三步： 访问 GemPages 仪表板 > 前往，然后点击目标页面打开编辑器。
第三步： 如果您的页面中没有任何产品模块，请拖放 a 产品元素 到你想要的位置。
产品元素包含几个子元素，包括 产品图像元素.
第三步： A签名 元素中的产品 产品来源 部分。
请参阅 本文 了解更多详情 分配产品 在 GemPages 中。
第三步： 点击主图像即可访问产品图像元素
配置设置选项卡
布局
GemPages 目前提供 9 种预先设计的布局，帮助您有效地显示特色图片和图片列表。
注意：
- 您可以微调图像列表中图像之间的间距。
- 确保检查布局在不同设备上的显示情况。
产品来源
有两种方法可以为产品模块选择产品： 按指定产品显示 or 手动选择.
- 按指定产品显示
当您选择按指定产品显示选项时，当前模板将动态应用于所有指定产品。产品将被随机选择显示在当前编辑器页面上。
将鼠标悬停在当前产品来源上，然后单击 编辑 图标打开 选择产品 对话框。从那里，您可以选择其他可用的指定产品。
- 手动选择
此选项允许您在同一模板和特定变体选项上显示多个产品模块。
要进行选择，请点击 手动选择，然后会打开一个窗口，显示产品列表供您选择。
特色图片
特色图片是您产品的主要视觉表现。
本节包括：
| 设置 | 描述 |
| 车架 | 选择：方形、垂直、水平、原始和自定义。 |
| 宽度和高度 | 选择时可用 定制化 帧。 |
| 导航 | 选择布局：内部或外部。选择导航图标并调整按钮的大小、颜色、宽度、高度、填充、背景以及形状选项（包括边框、角落和阴影）。
|
| 角落 | 调整角半径（例如，10px、30px）。 |
| 悬停动作 | 添加悬停效果，例如缩放。您还可以自定义：→ 缩放类型：默认 / 眼镜 → 缩放值：设置缩放百分比
|
| 点击动作 | 选择客户点击图片时发生的情况：→打开产品→缩放→在新标签页中打开：是/否 |
| 滑动速度 | 调整图像之间的过渡速度（例如 500 毫秒）。 |
| 动画 | 选择过渡效果：缓入、缓出、缓入缓出。
|
| 拖动/滑动 | 为移动设备或桌面设备启用滑动功能。 |
| 无限循环 | 滑动时启用连续循环回到第一张图像。 |
图片列表
此部分允许您控制如何在特色图片下方或旁边显示其他产品图片（缩略图）。
配置：
| 设置 | 描述 |
| 展示 | 选择：
– 幻灯片：在轮播滑块中显示图像 – 全部：一次显示所有图像 |
| 车架 | 选择缩略图形状：方形、垂直、水平、原始或自定义 |
| 宽度和高度 | 仅在选择“自定义”时可用。定义缩略图的精确尺寸。 |
| 图像间隙 | 设置缩略图之间的间距（以 px 为单位）。 |
| 影像比例 | 调整鼠标悬停时图片的放大程度。有助于提升视觉清晰度。 |
| 导航 | 启用滑块导航的箭头（如果选择了滑块）。
选择布局（内部/外部），选择图标，调整大小、颜色、宽度、高度、填充、按钮的背景以及形状选项，包括边框、角落和阴影。 |
| 角落 | 设置角半径以创建圆形图像缩略图。 |
| 活动边界 | 用可见边框突出显示选定的图像。 |
| 点击动作 | 设置用户点击缩略图时发生的情况（例如，在主视图中显示）。 |
| 拖动/滑动 | 实现适合移动设备的图像间切换交互。 |
| 无限循环 | 允许旋转木马在到达最后一张图片后循环回到第一张图片。 |
项目间距
显示条件
在下面 显示条件 部分，您可以从下拉菜单中选择默认图像项的条件，包括：
| 第一种可用版本 | 显示与 Shopify 中产品首个活跃变体关联的首个变体图片。非常适合具有基于变体的图片（例如，不同的颜色或样式）的商店。 |
| 第一张图片 | 显示产品媒体列表中的第一张图片。最适合使用一张主图的标准产品。 |
| 第一个视频 | 显示产品媒体版块上传的第一个视频。非常适合用于突出显示促销或演示视频。 |
| 第一个1D模型 | 显示添加到 Shopify Media 部分的第一个 3D 模型（GLB/GLTF 格式）。使用此模型可实现交互式产品视图，客户可以旋转并以 3D 方式查看产品。 |
优化 LCP
如果您希望在访问者访问您的页面时预加载图像，请选择 是 对于本节。
对齐
此参数允许您确定图片在页面上的定位方式。有三个选项可供选择：左对齐、居中和右对齐。
配置高级选项卡
如需更多高级自定义，请导航至“高级”选项卡并按照 本文.
关于产品图像元素的常见问题
1、为什么我的产品图片没有显示在页面上？
如果您的产品图片未显示，可能是因为：
- 产品图像元素未放置在产品模块内。
- 产品模块中分配的产品在 Shopify 管理员中缺少媒体内容。
确保 本文 进行详细的故障排除。
2. 为什么我的产品图片加载缓慢？
加载缓慢可能由以下原因造成：
- 高分辨率图像并未针对网络进行优化。
- 一次加载太多图像，没有延迟加载。
请参阅 本指南 用于优化图像速度。
3. 我可以在非产品页面上使用产品图片元素吗？
是的。产品图片元素可以在任何页面上使用，只要它位于 产品模块.
4. 我可以在 GemPages 中重新排列图片顺序吗？
不可以。图片顺序是从 Shopify 后台的产品媒体部分获取的。要更改显示顺序，您需要在 Shopify 中重新排列媒体。
5. 我可以在产品图片元素中添加视频吗？
- 在MyCAD中点击 软件更新 产品中心 在您的 Shopify 管理员中。
- 选择您想要添加视频的产品。
- 在 相关媒体 部分，点击 + 按钮并上传您的视频。
- 点击 已保存 应用更改。
- 返回 GemPages 中的产品页面并点击 Sync。视频随后将出现在 产品图片 元件。
6. 如何让页面显示特定产品及其图片？
第三步： 拖一个 产品模块 到您的布局中。
第三步： 通过以下方式将产品分配给模块：
- 按指定产品显示： 将当前模板动态应用于所有分配的产品。
- 手动选择： 直接从 Shopify 目录中选择一种产品。
第三步： 一旦产品被分配， 产品图片 模块内的元素将自动从 Shopify Admin 中提取并显示产品的图像。
有关更多信息，请参阅 本文.
7. 为什么我的产品图片无法与我的 Shopify 产品同步？
产品图像元素仅在位于产品模块内且已分配产品时才会动态加载图像。
如果您的产品照片没有更新，请检查该产品是否在 Shopify 中设置了媒体文件，点击“查看”。 Sync 在 GemPages 中，确保显示条件与您的可用媒体相匹配（例如，第一张图片，第一个变体）。
8. 如何创建产品图片幻灯片？
如果你想创建一个 自定义图像幻灯片 您可以手动控制每张图片，并使用以下方式构建自己的滑块： 轮播元素 以及 图像元素.
按照以下步骤创建和更改自定义产品图片轮播中的图片：
第三步： 在 GemPages 编辑器中，拖放 轮播元素 将其放置在您希望在页面上显示产品图片轮播的位置。
第三步： 在旋转木马上，拖动一个 图像元素 将滑块插入。
第三步： 选择“图像”元素，然后上传您的产品图片。
第三步： 对轮播图中的其余幻灯片重复相同的操作：
- 添加一个 图像元素 每张幻灯片
- 上传您想要展示的产品图片
- 请按您想要的顺序排列幻灯片
第三步： 以后要更改现有图像，只需选择幻灯片中的图像元素，然后上传新图像替换旧图像即可。
谢谢您的意见