如何在 GemPages 中添加和显示变体元字段

什么是变体元字段？

变体元字段是附加到产品变体（例如尺寸、颜色）而不是产品本身的自定义字段。
它们允许您存储每个变体独有的信息，例如：

• 附加图像
• 描述
• 尺寸或技术规格

计费示例： 如果您销售红色、蓝色和绿色的 T 恤，则可以使用变体元字段为每种颜色变体分配唯一的描述或图像。

如何使用 Shopify 创建变体元字段？

步骤 1：创建变体元字段定义

1。 在 Shopify 管理员，去 个人设置 → 元字段和元对象 → 变种

2。 下 变种，单击“ 添加定义.

3.填写以下字段：

例如： 

• 姓名：颜色描述
• 命名空间和键：自定义颜色描述
• 描述：为产品的每种颜色变体提供独特的描述，显示在产品页面上。
• 内容类型：文本（或图像，如果您想上传特定变体的图像）
• 可选：设置验证规则（例如最大字符数）
  

4。 点击 已保存.

在此之后，每个变体都会有一个字段来输入其元字段值。

步骤 2：向变体元字段添加值

1。 去 Shopify 管理员 → 产品中心 → 所有产品.

2. 选择具有多个变体的产品（例如“经典棉质 T 恤”）。

3. 向下滚动到“变体”部分。对于每个变体，您将看到一个元字段区域。

4. 输入每个变量的值：

• 红色→“受夏日色调启发的鲜艳红色。”
• 蓝色→“平静的海蓝色，给人一种轻松的感觉。”
  
• 绿色→“清新薄荷色，非常适合日常穿着。”

5。 点击 已保存.

每个变体现在都有自己独特的元字段数据。

如何在 GemPages 中显示变体元字段

要在 GemPages 产品页面上使用 Shopify 变体元字段值，您需要使用自定义代码元素，并在 Liquid 中引用变体对象。

第三步： 打开 GemPages V7 编辑器查看您的产品页面。

第三步： 从左侧边栏中，拖动 自定义代码元素 到您希望变体描述出现的位置。

第三步： 单击元素以打开代码面板。

第三步： 粘贴以下 Liquid 代码片段：

{% assign ns = 'YOUR_NAMESPACE' %}
{% assign key = 'YOUR_KEY' %}

<div id="variant-meta">{{ current_variant.metafields[ns][key] }}</div>

<script>
(function() {
var VM = {
{% for v in product.variants %}
"{{ v.id }}": {{ v.metafields[ns][key] | json }}{% unless forloop.last %},{% endunless %}
{% endfor %}
};

var el = document.getElementById('variant-meta');

function getVid() {
var x = document.querySelector('input[name="id"]');
return x ? x.value : null;
}

function update(id) {
if (!el || !id) return;
el.textContent = (VM[id] != null) ? VM[id] : "";
}

// init + listeners
update(getVid());

window.addEventListener('load', function() {
update(getVid());
});

document.addEventListener('change', function() {
update(getVid());
});

document.addEventListener('variant:changed', function(e) {
if (e.detail && e.detail.variant) {
update(String(e.detail.variant.id));
}
});
})();
</script>

第三步： 点击 已保存 以及 发布.

第三步： 预览您的产品页面：当客户选择颜色变体时，将显示正确的颜色描述。