shopifyデフォルトの商品ページでは色の選択は文字で表示されます。
これをカラースウォッチで選択できるようにカスタムしました。
テーマはDawn(バージョン15)です。
※テーマバージョンが変わるとコードも若干変わるのでご注意ください。
本記事の内容
・商品ページの色選択をカラースウォッチにする
デフォルト
実装完成イメージ
カラースウォッチを実装する手順2つ
設定の手順
手順1.メタフィールド作成
手順2.商品ページのコード書き換え
手順1.メタフィールド作成
まずは商品の管理画面からカラーコードで色を入力できるようにメタフィールドを作ります！
管理画面＞設定＞カスタムデータ＞バリエーション
メタフィールドの項目を入力します。
「名前」と「ネームスペースとキー」は任意のもので大丈夫ですが、「タイプ」は「色」を選択してください。
これでメタフィールドが作成できました。
商品バリーエーションごとにカラーコードで色が設定できるようになっています！
手順2.商品ページのコード書き換え
では商品管理画面から設定した色がページに反映されるようにコードを書き換えます。
※コードを書き換える前に必ずテーマを複製してバックアップをとっておいてください！(超大事)
書き換えるファイルは「product-variant-options.liquid」です。
対象テーマ＞右横「・・・」マーク＞コードを編集＞snippets＞product-variant-options.liquid
「product-variant-options.liquid」を開いたら下記のコードを探してください。
「<label for=」とかで検索するとすぐ見つかります！
{{ value }}
{{ label_unavailable }}
</label> >
※画像はVSコードですが内容は同じです。 
コードが見つかったらそこを以下のコードに書き換えます。
※メタフィールドと管理画面バリエーションで設定した名前が入るので注意
<label for="{{ input_id }}" style="background-color:{{product.variants[forloop.index0].metafields.custom.color }}">
</label>
{% else %}
<label for="{{ input_id }}">
{{ value -}}
{{ label_unavailable }}
</label>
{% endif %}
これでコードの書き換えもできました。
商品管理画面から設定した色がページに反映されました！
CSSでカラースウォッチの形の変更や、コードを少し変更するとカラースウォッチ+文字での表示も簡単にできます。
デザインに合わせて色々試してみてください！
