如何根据所选变体显示产品图片

关于“按所选变体显示产品图片”功能

此功能允许您控制当客户选择特定型号时显示的产品图片。
启用后，GemPages 会自动将变体名称与图像的 alt 文本进行匹配，从而仅显示与所选变体相关的图像。

您可以将此设置应用于两者。 产品要素 以及 产品列表元素.

功能如何运作

当访客选择产品变体时，GemPages 将执行以下操作：

• 将变体名称与 Shopify 产品中每张图片的 alt 文本进行比较。
• 仅显示替代文本中包含变体名称的图片。
• 自动隐藏无关图片。

您还可以通过在图片的替代文本中添加关键字“all-variants”来标记某些图片，使其出现在所有变体中（例如，保养说明、尺码表）。

默认情况下，所有产品图片都会显示。您需要按照以下说明手动启用此选项。

如何在 GemPages 中启用“按所选变体显示产品图片”

请按照以下步骤在 GemPages 编辑器中启用此功能：

第三步： 从你的 Shopify 管理员，去 应用 > 宝石页然后打开包含您的页面 产品要素.

第三步： 点击您 产品要素 要选中它，请在图层面板中找到并单击它。 产品图像元素 在里面。

第三步：  在左侧边栏中，在……下方 个人设置 标签，向下滚动以查找 显示条件.

步骤 4：选择显示选项

您将看到两个选项：

• 所有图片（默认）：显示所有产品图片，无论产品型号如何。
• 选定版本： 仅显示与所选变体根据替代文本匹配的图像。

从我们的数据库中通过 UL Prospector 平台选择 这个 选定变体 启用该功能。

第三步：  启用后，点击 已保存 以及 发布 您的页面。
现在，当访客选择不同的产品规格时，您的产品图片将动态更新。

如何在 Shopify 中为基于变体的图片设置替代文本

为了使此功能正常工作，您需要分配适当的权限。 替代文字 在 Shopify 中，每个产品图片都会使用此替代文本。GemPages 使用此文本来确定哪些图片属于哪个产品变体。

第三步：  在 Shopify 管理员处，转到 产品 > [您的产品].

第三步： 找到要分配给某个变体的图片。

第三步： 点击图片 → 点击 添加替代文字 → 输入变体名称。

例如，假设你正在销售一款 T恤衫 提供以下几种变体选项：

• 颜色： 红蓝
• 尺寸： S，M，L

每张产品图片都应该包含颜色和尺寸信息。 替代文字这样，GemPages 就能识别出哪张图片属于哪个变体。

正确示例：

错误示例：

如需了解有关在 Shopify 中管理产品图片和替代文字的更多详细信息，请访问：

Shopify 帮助中心 – 产品媒体

Shopify 帮助中心 – 添加替代文字

常見問題解答

1. 为什么选择产品规格时，我的产品图片显示不正确？

 如果您的图片没有根据所选版本进行更新，请尝试以下步骤：

• 请确保每张产品图片都包含正确的产品型号名称。 替代文字.
• 检查一下 “选定的变体= 选项已激活 在产品图片设置中。
• 请记住， 空格、连字符（-）和下划线（_）将被忽略。 匹配过程中。
• 如果没有图片与产品名称匹配，GemPages 将自动显示所有产品图片。

2. 如何为所有产品变体显示某些图片？

如果您希望每个款式都显示一张图片（例如尺码表、保养指南或产品概览图），只需添加即可。 “所有变体” 在 Shopify 中设置为替代文本。
无论客户选择哪个版本，GemPages 都将始终显示该图像。

3. 我可以禁用“按所选变体显示产品图片”功能吗？

是的。要关闭它，请打开…… 产品图片 在 GemPages 编辑器中设置元素，并取消选中 “所有图片” 选项。
禁用后，无论选择哪个版本，所有产品图片将默认再次显示。

4. 如果某个变体没有匹配的图像，会发生什么情况？

如果没有与所选变体匹配的图像替代文本，GemPages 将自动显示 所有可用的产品图片.