产品变体和色板元素

关于产品变体和色卡元素

与之前版本的编辑器不同， 编辑器 v7 具有一个名为 （P）变体和样本 显示产品的各种选项，例如尺寸、颜色、材料等，以提高转化率。

在 GemPages V7 中， 产品变体和样品 元素可让您在单个可自定义的界面中显示所有产品变体选项，从下拉菜单到颜色样本到图像缩略图。

常见用例：

• 让顾客选择尺寸、颜色或材质
• 直观地显示售罄状态
• 使用变体图像或上传自定义样本视觉效果

如何在 Shopify 中添加产品变体

在显示变体之前 产品变体和色板元素您必须先在 Shopify 产品设置中创建这些变体。

请按照以下步骤在 Shopify 中添加产品变体：

第三步： 在 Shopify 管理员处，转到 产品.

第三步： 点击要添加变体的产品。

第三步： 滚动到 变种 部分并单击 + 添加尺寸或颜色等选项.

第三步： 进入 选项名称 （例如：尺寸、颜色、材质）。

第三步： 添加 选项值.

计费示例：

• 尺码：S，M，L，XL
• 颜色：红色、黑色、绿色

第三步： 点击 完成 然后，Shopify 将自动生成所有变体组合。

第三步： 配置其他变体详细信息，例如：

• 价格筛选
• SKU
• 库存
• 变体图像
• 可用性

第三步： 点击 已保存.

一旦创建了变体，它们将自动出现在其中。 GemPages 中的产品变体和色板元素允许客户在您的产品页面上选择不同的产品选项。

如何向页面添加产品变体和色板元素？

按照以下步骤将产品变体和样本添加到使用 GemPages 构建的页面。

第三步： 从 Shopify 管理员，转到 GemPages 构建器 应用> 前往. 单击目标页面以找到编辑器。

第三步： 从左侧边栏，使用搜索栏查找产品变体和 色板元素然后，将该元素拖放到产品元素内。

第三步： 单击该元素以打开其配置。

配置“设置”选项卡

从这里，您可以配置元素的设置，包括：

产品来源

如果您已将产品分配给此模板，则该产品将自动同步为 产品来源.

如果您想选择其他产品，请将鼠标悬停在当前产品上，然后单击“选择”。 右箭头 找到产品元素设置，您可以在那里选择您喜欢的设置。

点击 笔 点击图标即可编辑产品来源。您可以在这里手动选择您想要的产品。

类型

此时您可以从两个选项中进行选择：

• 综合： 所有变体将合并到一个下拉菜单中。

• 分隔： 变体将被组织成不同的类别。

接下来的几个设置将根据您在此处选择的类型进行调整。

• 如果您设定 类型 至 组合，单击“ 开始 以获得进一步的指导。
• 如果您设定 类型 至 分离，单击“ 开始 有关详细说明。

#1. 类型：组合式

如果您设定 类型 至 组合继续配置产品变体选项的显示方式。

文字样式

此 文字样式 此部分允许您控制产品变体文本的外观，帮助您保持所有内容与您的品牌设计保持一致。

• 样式： 选择预定义的文本样式，例如标题或段落，以保持您的排版与商店其他部分的排版一致。
• 字体： 从下拉菜单中选择字体，或使用全局样式中的自定义字体。为了保持视觉一致性，请使用与产品页面相同的字体系列。
• 规格： 调整字体大小，使产品名称和价格在版面中清晰突出。
• 颜色： 从颜色选择器中选择文本颜色或输入十六进制代码（例如， #3B3B3B使用深色字体可以提高可读性。
• 对齐： 根据您的布局偏好，可以将文本左对齐、居中对齐或右对齐。左对齐最适合用于列出变体列表。
• 字体粗细： 控制文本的粗细——从细体到特粗。对于产品变体，通常中等或粗体效果最佳。
• 线高： 调整文本行之间的垂直间距（例如，150%），使多行文本更易于阅读。
• 字母间距： 微调字母之间的间距，以获得更紧凑或更开放的视觉效果。
• 转变： 将文本大小写更改为大写、小写或首字母大写。非常适合 SKU 或标签式变体名称。
• 阴影： 当文字与浅色背景重叠时，添加淡淡的文字阴影可以增加对比度或增加文字的深度。

选项样式

此 选项样式 此部分允许您自定义产品变体选择器的显示方式，包括其大小、背景和整体外观。

• 宽度： 调整选项框的显示宽度。您可以设置固定的像素值，也可以使用百分比（例如， 100%使其铺满整个容器。
• 起升高度： 定义变体选择器的垂直尺寸（例如， 45px) 为了更好地与产品页面上的其他元素保持视觉平衡。
• 背景： 为选项框选择背景颜色。使用纯色（例如黑色或白色）或品牌强调色，以增强对比度。
• 边界： 添加或移除选择器周围的边框。您可以选择实线、虚线或点线样式，并调整颜色以匹配您的布局。
• 角： 通过设置圆角半径值（例如，）来使选项框的边缘变圆。 18px这样就营造出一种更柔和、现代的外观。
• 阴影： 在方框后方添加阴影效果，可增加微妙的层次感。非常适合突出显示激活状态或鼠标悬停状态。

悬停效果

此 悬停效果 此部分允许您定义当购物者将鼠标悬停在变体选项上时，该选项的反应。

• 背景： 更改用户将鼠标悬停在变体上时显示的背景颜色。使用您品牌的强调色（例如， #EC6448）使其更醒目。
• 文字颜色： 设置鼠标悬停时文本的颜色。浅色，例如白色（#FFFFFF在深色或醒目的背景下效果最佳。
• 边界： 自定义边框样式（实线、虚线、点线），使鼠标悬停状态更加醒目。您还可以调整边框颜色，使其与背景相协调。
• 角： 保持或增加圆角，使悬停时视觉过渡更加平滑。
• 阴影： 添加微妙的阴影效果，使悬停选项看起来更高或更具交互性。非常适合增强点击反馈。

#2. 类型：分离式

如果您设定 类型 至 分离继续配置产品变体选项的显示方式。

期权缺口

您可以通过在框中输入确切的数字或拖动滑块来调整变体之间的间距。

选项标题

在下面 选项标题 在本节中，选择标题位置。您可以选择垂直或水平两种选项。

• 垂直位置：

• 水平位置：

接下来，调整变体标题和文本选项之间的间距，以提高可读性。例如，我们设置 间距至 40 像素.

然后，单击 文字样式 打开文本样式配置面板。在这里，您可以修改样式、字体、文本大小、文本颜色和字间距，或者为变体标题添加阴影效果。

一旦完成 选项标题 （变体的标题），您可以在以下部分下配置每个变体选项。

例如，由于这个 Gem Palette 有三个变体，我们可以按照以下顺序修改每个变体的可见性： 颜色, 饰面/纹理和 尺寸.

选项：颜色

在本节下，您可以配置此元素的所有颜色选项。

让我们分解一下每个设置选项：

• 类型： 从这些可用选项中进行选择，包括 落下, 按钮选择, Shopify 图片, 颜色样本 或 上传图片.

例如，如果您选择 样式 = 色样，单击“ 编辑颜色 打开 配置变体样式 面板进行进一步的设置。

如果您想为每个颜色选项上传新图像，请选择 样式 = 上传图片.

请注意，每个选项仅显示一张图片。如果您希望添加更多图片，则需要在 Shopify 中添加相同数量的变体选项。

• 宽度和高度： 调整颜色选项的宽度和高度。
• 价值差距： 更改每个选项之间的间距。

• 边界： 添加边框的颜色选项，并根据需要更改边框的颜色、粗细和描边。

• 角： 调整圆角半径。例如，如果您想显示圆角颜色选项，请将半径设置为 999999。
• 阴影： 为了增强用户界面，您可以为颜色选项添加阴影效果。

• 徘徊： 点击 样式 旁边的框 Hover 打开其设置，您可以在其中修改悬停效果。
• 活性： 自定义活动颜色选项以使其与其他选项不同。

选项值文本

在此部分中，您可以编辑样式、字体、大小、字体粗细、行高、字母间距和变换的颜色选项的文本值。

已售罄款式

当颜色选项售罄时选择视觉样式：

• 没有： 没有售罄颜色选项的信号。
• 不可点击： 访客无法点击已售罄的颜色选项。
• 划掉： 售罄的颜色选项将被划掉。

例如，我们设置 类型 至 无法点击:

尺寸

使用 尺寸 用于控制变体选择器或色板区域宽度的部分。

宽度： 使用固定像素值（例如，）调整元素的宽度 500px）或百分比（100%取决于你的布局。

• 较大的宽度会创建整行下拉菜单。
• 较小的宽度非常适合紧凑的变体列表。

形状

此 形状 该部分允许您设置变体容器的外观样式，包括边框和边角。

• 边界： 添加或调整边框样式（线条、虚线、点线）以勾勒变体选择器。
• 角： 将盒子边缘修圆（例如， 18px) 以获得现代流畅的视觉效果。
• 阴影： 使用微妙的阴影增加层次感，使不同的方框与背景区分开来。您可以选择以下方式： 光 , 介质， or 强 根据所需的对比度而定。

显示选项

此 显示选项 控制页面加载时产品变体的显示方式或默认变体的选择方式。

默认变体： 切换 是 在产品页面首次加载时显示预先选择的选项（例如，“绿色/成人”）。

要自定义默认选项，您需要将产品元素中的产品来源更改为“手动选择“ 代替 ”分配“。 了解更多.

对齐

此 对齐 此部分允许您控制变体选项在其容器内的位置，从而帮助您微调整体页面布局。您可以从以下三个选项中进行选择： 根据您的喜好，可以选择左对齐、居中对齐或右对齐。

配置高级选项卡

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

解决颜色变体问题

如果您的某个颜色样本在 GemPages 中无法正常工作，请按照以下步骤排除故障并解决问题：

Shopify 中的变体配置

确保您的产品变体在 Shopify 中正确设置：

• 活动状态：验证产品及其变体是否在您的在线商店中有效且可用。
• 销售渠道：确认产品选择了“网上商店”销售渠道。
• 变体设置：检查每个款式是否具有独特的选项组合，例如颜色和尺寸。

检查产品模块设置

• 在 GemPages 编辑器中，单击 产品模块.
• 在下面 选择产品 部分，确保分配了正确的产品。

常見問題解答

1. 我可以将每个产品变体显示为单独的产品页面吗？

Shopify 默认不支持将变体显示为单独的产品页面。

然而，一个常见的解决方法是 为每个变体创建单独的产品，然后使用元字段或自定义部分手动将它们链接在一起作为“变体组”。

2. 变体和单独产品之间有什么区别？

变体共享相同的产品页面并使用样本/下拉菜单在选项之间切换（例如，尺寸，颜色）。

不同的产品拥有各自的产品页面和URL。当每个版本的照片、价格或描述差异很大时，通常会使用这种方法。

3. 如何将单独的产品页面（例如变体）链接在一起？

您可以使用：

• 在产品描述或自定义块中手动链接（例如，“也可在...中使用”）
• 产品推荐应用
• 自定义 Liquid 部分或元字段（需要一些 Shopify 知识）

4. 如何启用鼠标悬停在变体图像上时的缩放功能？

缩放功能由……控制。 产品图像元素不在变体色板中。
要启用它：

• 点击 产品图片 编辑器中的元素。
• 下 特色图片 > 悬停操作，选择 通过Zoom.
• 根据需要调整缩放类型和缩放值。

5. 为什么当我将鼠标悬停在变体色板上时，缩放功能没有触发？

仅提供变体色板 更改所选产品图片它们无法控制缩放行为。
要启用缩放效果，请在以下位置进行配置： 产品图片 > 悬停动作不在色板元素设置中。

6. 如何在 Shopify 中编辑产品变体的价格？

您可以直接在 Shopify 后台更新产品规格价格。前往 产品选择带有变体的产品，然后在 变种 章节更新 定价 变体字段并单击 已保存新价格将自动显示在您的产品页面上，包括使用 GemPages 构建的页面。