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でカラースウォッチの形の変更や、コードを少し変更するとカラースウォッチ+文字での表示も簡単にできます。
デザインに合わせて色々試してみてください！
この記事を書いた人
 |
濱野 恵太郎（はまの けいたろう） ・Shopifyパートナー ・ECサイト構築40サイト以上 構築から運用・保守まで一気通貫で対応しています。 |
Shopifyの商品ページカスタマイズのご相談はコマースラボへ
「カラースウォッチを入れたいがテーマのコードを触るのが不安」「自社のデザインに合わせて調整してほしい」という方は、月額49,500円（税込・月5時間・契約の縛りなし）の運用保守サービスで対応します。月5時間の改修枠で、商品ページの細かなカスタマイズから承ります。無理な営業はしませんので、お気軽にどうぞ。
