# 新しく追加されたメタフィールドのバリエーションで、コンテンツタイプ「色」を商品詳細ページのバリエーションに紐づけたい

**URL:** <https://community.shopify.com/t/topic/63974>\
**Category:** 技術的なQ＆A\
**Created:** [September 6, 2021, 4:24pm UTC](https://community.shopify.com/t/topic/63974 "2021-09-06T16:24:10Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

Shopifyテーマ「Dawn」の商品詳細ページで、バリエーション（例：Red/Green/Blue）ごとに新しい「バリエーションメタフィールド（コンテンツタイプ：色）」の値を使って、オプションボタン（label）の背景色等を反映させたいという相談。メタフィールドは my_fields._color-list にカラー値（例：#ff0000）を設定。

対応策：Liquid（Shopifyのテンプレート言語）で、{%- for value in option.values -%} の中に以下を実装。
- 該当バリエーションの色を抽出
  - captureで product.variants を走査し、variant.title に value（オプション値）を含むものだけの variant.metafields.my_fields._color-list を取得
  - 取得値を split して first を vc に代入（カラーコードの抽出）
- Colorオプションの時だけ label に inline style を付与
  - {% if option.name == 'Color' %} style="background-color: {{ vc }};"{% endif %}

ポイント：全バリエーションの値が出力されないよう、タイトル一致でフィルタすることが重要。コードスニペットが理解の中心。外部ブログの詳細手順リンクあり。

結果：提案コードで実装が成功。議論は解決済みで未解決事項なし。

<div class="post-metadata">

**Author:** ![next\_kota](https://avatars.discourse-cdn.com/v4/letter/n/f04885/32.png) [@next\_kota](https://community.shopify.com/u/next_kota)\
**Post date:** [September 6, 2021, 4:24pm UTC](https://community.shopify.com/t/topic/63974/1 "2021-09-06T16:24:10Z")

</div>

表題の件で質問させてください。

現在、テーマ「Dawn」を利用しています。

下記のように新しく公式で追加された、「バリエーションメタフィールドの定義」にて下記のように作成しています。

- 名前：色見本
- ネームスペースとキー：my\_fields.\_color-list
- variant.metafields.my\_fields.\_color-list

 ![next_kota_0-1630944401150.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/5/6/56b6ef8500fc43a0369ab2e1fc162ba9c3874234.png)

例えば、商品に下記のような「Red」「Green」「Blue」のバリエーションがあったとします。

 ![next_kota_1-1630944658863.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/2/c/2c40010e2d475f0471c4b095da5e8da857cc7fd5.png)

商品詳細ページのバリエーションオプションの「Red」の画面に行くとページ一番下に、「色」のメタフィールドが存在しています。

そちらを添付のように仮に#ff0000に設定しました。

 ![next_kota_2-1630944826523.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/8/d/3/8d312ebc9a84a0189da0fe466935d66cdab81e7b.png)

その設定した色を商品詳細ページのバリエーションボタンの背景色やborder等に設定したいのですが、

どのように設定をすればよいでしょうか？

labelタグに紐づける方法が知りたいです。

 ![next_kota_3-1630944954307.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/6/1/6157a41a2b96b126d1de7b72876337898e89d55e.png)

商品のメタフィールドは有難いことに色々な方が説明してくれていて便利に組み込めているのですが、

バリエーションのメタフィールドの実装方法が分かりません。

お手数おかけいたしますが、何か対応方法がありましたら教えていただければ幸いです。

どうぞよろしくお願いします。

---

<div class="post-metadata">

**Author:** ![mrtc](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/mrtc/32/109726_2.png) [@mrtc](https://community.shopify.com/u/mrtc)\
**Post date:** [September 9, 2021, 9:31am UTC](https://community.shopify.com/t/topic/63974/2 "2021-09-09T09:31:19Z")

</div>

新機能に関しては海外のコミュニティでも情報が少ないので、私も手探りでやってます。

ちょうど同様のカスタマイズを検討しており、私なりに解決しましたので共有させていただきます。

正しい方法なのかわかりませんが、以下のコードを{%- for value in option.values -%}内に入れることで紐付けることは可能です。

{%- capture variant\_color -%}  
{%- for variant in product.variants -%}  
{%- if variant.title contains value -%}  
{{ variant.metafields.my\_fields.\_color-list }}  
{%- endif -%}  
{%- endfor -%}  
{%- endcapture -%}  
{% assign vc = variant\_color | split: ’ ’ | first %}

ちょっと複雑なのですが、{%- capture variant\_color -%}にてバリエーションの一覧からオプション名（カラー）を含んだバリエーションのみを選定、そのメタフィールドのカラー値を出力させ、{{ vc }}で出力できるようにする仕組みです。

これをやらないと、1カラーに対し全バリエーションが出力されてしまいますので…。

そして{{ vc }}で出力されるカラー値を、タグにオプション名が「Color」の時だけ出力されるよう設定することで、ご希望の仕様が実現できるかと思います。

{% if option.name == ‘Color’ %} style=“background-color: {{ vc }};”{% endif %}

詳しい設定方法や説明は私のブログにまとめてありますので、是非読んでみて下さい。

[Shopify商品ページの色選択をメタフィールドを使ってカラースウォッチを実装する方法](https://mrtc.jp/467)

---

<div class="post-metadata">

**Author:** ![next\_kota](https://avatars.discourse-cdn.com/v4/letter/n/f04885/32.png) [@next\_kota](https://community.shopify.com/u/next_kota)\
**Post date:** [September 13, 2021, 8:40am UTC](https://community.shopify.com/t/topic/63974/3 "2021-09-13T08:40:59Z")

</div>

ブログの記事を参考に対応した所、無事に実装が出来ました。

回答を頂きとても感謝しています。

この度は本当に有難うございました。

またこちらが質問を挙げていた際に機会がありましら、どうぞよろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![mrtc](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/mrtc/32/109726_2.png) [@mrtc](https://community.shopify.com/u/mrtc)\
**Post date:** [September 13, 2021, 8:56am UTC](https://community.shopify.com/t/topic/63974/4 "2021-09-13T08:56:10Z")

</div>

いえいえ、こちらこそ。  
ブログを読んでいただき、ありがとうございました。

日本のShopifyがもっともっと盛り上がってくれればと願っております。