GemPagesでバリアントメタフィールドを追加して表示する方法

バリアントメタフィールドとは何ですか?

バリアント メタフィールドは、製品自体ではなく、製品のバリアント (サイズ、色など) に添付されるカスタム フィールドです。
次のような各バリアント固有の情報を保存できます。

• 追加画像
• 説明
• 寸法または技術仕様

例： 赤、青、緑の T シャツを販売する場合、バリアント メタフィールドを使用して、各色のバリエーションに固有の説明または画像を割り当てることができます。

Shopifyでバリアントメタフィールドを作成する方法は？

ステップ1: バリアントメタフィールド定義を作成する

1。 で Shopify管理者、に行く 設定 → メタフィールドとメタオブジェクト → バリアント

2。 下 バリアント、クリック 定義を追加.

3. 次のフィールドに入力します。

具体的な例を挙げますと、以下の通りです。 

• 名前: 色の説明
• 名前空間とキー: カスタムカラーの説明
• 詳細説明 : 製品ページに表示される製品の各カラーバリエーションに固有の説明を入力します。
• 内容型: テキスト（または、バリアント固有の画像をアップロードする場合は画像）
• オプション: 検証ルールを設定する（例：最大文字数）
  

4。 クリック Save.

この後、各バリアントにはメタフィールド値を入力するためのフィールドが作成されます。

ステップ2: バリアントメタフィールドに値を追加する

1。 に行く Shopify管理者 → 製品 → 全製品一覧.

2. 複数のバリエーションがある商品（例：「クラシックコットンTシャツ」）を選択します。

3. 「バリアント」セクションまでスクロールダウンします。バリアントごとにメタフィールド領域が表示されます。

4. 各バリアントの値を入力します。

• 赤→「夏の色調からインスピレーションを受けた鮮やかな赤色。」
• 青 → 「落ち着いたオーシャンブルーでリラックスした印象に。」
  
• グリーン →「デイリー使いにぴったりなフレッシュミントの色合い。」

5。 クリック Save.

各バリアントには独自のメタフィールド データが含まれるようになりました。

GemPagesでバリアントメタフィールドを表示する方法

GemPages 製品ページで Shopify バリアント メタフィールド値を使用するには、バリアント オブジェクトを参照する Liquid でカスタム コード要素を使用する必要があります。

ステップ1： 製品ページ用の GemPages V7 エディターを開きます。

ステップ2： 左側のサイドバーから、 カスタムコード要素 バリアントの説明を表示する場所に移動します。

ステップ3： 要素をクリックするとコード パネルが開きます。

ステップ4： 次の 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>

ステップ5： 詳しくはこちら Save の三脚と パブリッシュ.

ステップ6： 製品ページをプレビューします。顧客がカラーバリエーションを選択すると、正しいカラーの説明が表示されます。