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

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

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

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

単一テキスト:color_name.value

色:color_rgb.value

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