【shopify】 商品ページにカラースウォッチを実装する方法

こんにちは。shopifyエンジニアのはまの(@hamanokeitarou)です。

shopifyデフォルトの商品ページでは色の選択は文字で表示されます。
これをカラースウォッチで選択できるようにカスタムしました。
テーマはDawn(バージョン15)です。
※テーマバージョンが変わるとコードも若干変わるのでご注意ください。

✅本記事の内容
・swiperでループするスライドショーを作る
・スライドショーセクションを複数設置する際の不具合解決法

デフォルト

実装完成イメージ

カラースウォッチを実装する手順2つ

✅設定の手順
手順1.メタフィールド作成
手順2.商品ページのコード書き換え

手順1.メタフィールド作成

---

まずは商品の管理画面からカラーコードで色を入力できるようにメタフィールドを作ります！

管理画面＞設定＞カスタムデータ＞バリエーション

メタフィールドの項目を入力します。
「名前」と「ネームスペースとキー」は任意のもので大丈夫ですが、
「タイプ」は「色」を選択してください。

これでメタフィールドが作成できました。
商品バリーエーションごとにカラーコードで色が設定できるようになっています！

手順2.商品ページのコード書き換え

---

では商品管理画面から設定した色がページに反映されるようにコードを書き換えます。
※コードを書き換える前に必ずテーマを複製してバックアップをとっておいてください！(超大事)

書き換えるファイルは「product-variant-options.liquid」です。
対象テーマ＞右横「・・・」マーク＞コードを編集＞snippets＞product-variant-options.liquid

「product-variant-options.liquid」を開いたら下記のコードを探してください。
「<label for=」とかで検索するとすぐ見つかります！

<label for="{{ input_id }}">
　{{ value }}
　{{ label_unavailable }}
</label> >

※画像はVSコードですが内容は同じです。

コードが見つかったらそこを以下のコードに書き換えます。
※メタフィールドと管理画面バリエーションで設定した名前が入るので注意

{% if product.variants[forloop.index0].metafields.custom.color and option.name == "カラー" %}
　<label for="{{ input_id }}" style="background-color:{{product.variants[forloop.index0].metafields.custom.color }}">
　　&nbsp;
　</label>
{% else %}
　<label for="{{ input_id }}">
　　{{ value -}}
　　{{ label_unavailable }}
　</label>
{% endif %}

これでコードの書き換えもできました。
商品管理画面から設定した色がページに反映されました！

CSSでカラースウォッチの形の変更や、コードを少し変更すると
カラースウォッチ+文字での表示も簡単にできます。
デザインに合わせて色々試してみてください！