# カラーバリエーションクリック時にメタフィールドのテキストを動的に変更

**URL:** <https://community.shopify.com/t/topic/81477>\
**Category:** 技術的なQ＆A\
**Created:** [November 29, 2021, 7:34am UTC](https://community.shopify.com/t/topic/81477 "2021-11-29T07:34:03Z")\
**Posts on this page:** 1\
**Page:** 1

## AI-generated summary

商品バリエーションに「色（color_rgb.value）」と「カラー名の単一テキスト（color_name.value）」の2つのメタフィールドを登録し、色はスウォッチ表示できたが、スウォッチ（カラーバリエーション）をクリックした際に表示されるテキストを、通常のオプション名ではなくメタフィールドのカラー名へ動的に切り替えたいという相談。
現状はLiquidで `<span>{{ product.variants[option.position].metafields.color_name.value }}</span>` のように表示を試したものの、クリックに追従して更新されず、選択時はメタフィールドではなく標準のオプション名が表示されてしまう。
求めているのは data-tooltip ではなく、画面上の表示テキスト自体を動的に変更する方法。解決策や具体的な実装方法はまだ提示されておらず、議論は未解決のまま。

<div class="post-metadata">

**Author:** ![naka2014](https://avatars.discourse-cdn.com/v4/letter/n/22d042/32.png) [@naka2014](https://community.shopify.com/u/naka2014)\
**Post date:** [November 29, 2021, 7:34am UTC](https://community.shopify.com/t/topic/81477/1 "2021-11-29T07:34:03Z")

</div>

メタフィールドのバリエーションに色と単一のテキスト、２つを登録しています。

色をスウォッチ表示させることが出来ましたが、色を選択時に動的にカラー名（単一テキスト）を変更させたいと考えています。（data-tooltipではなく）

方法はありますでしょうか。どうぞよろしくお願いいたします。

単一テキスト：color\_name.value

色：color\_rgb.value

{{ product.variants[option.position].metafields.color\_name.value }} ※オプションポジションで表示させましたが、動的に変更されません。（クリックするとメタフィールドではなく通常のオプション名が表示されてしまいます。）