【Shopify Tips】色見本で複雑なカラーや画像を表示する方法についてご紹介！

ECサイトで販売する商品の中には、複雑なカラーの商品や、柄が入っている商品など様々なバリエーションが考えられます。

また、実物を見ることのできないオンラインショッピングでは、こういったバリエーションが視覚的に確認できないことで、購入後のミスマッチに繋がることも多々あるかと思います。
そのため、ユーザー側の懸念をどれだけ減らせるかによって購入体験とコンバージョン率も向上させることが可能です。

今回は、そんなミスマッチを削減できる、詳細なカラーチャートの表示方法についてご紹介します！

カラーチャートとは、ECサイトや製品カタログなどで、商品に複数の色のバリエーション（カラー展開）がある場合に、それぞれの色を視覚的に示すために表示される色見本のことです。
通常、以下のような形式で表示されます。

色の四角や丸の並び: 各カラーバリエーションを小さな四角や丸（スウォッチ）で表示し、それをクリックすると商品の画像がその色に切り替わったり、詳細情報が表示されたりします。

カラー名の表示: 各色見本の下に、色の名前（例：赤、青、ブラック、ホワイト）が記載されます。

画像との連動: 色見本をクリックすると、メインの商品画像がその色に変化することが一般的です。

今回ご紹介するカラーチャートの表示方法は、Shopifyのメタオブジェクトを使用した方法です。

設定手順は以下の通りです。

メタオブジェクト「色」の定義 

> 各色のエントリー作成 

>商品バリエーションにメタオブジェクト参照メタフィールド紐付け 

>テーマでの表示

それでは、上記手順を1つずつ分けてご紹介します！

Shopifyの管理画面にて、

「コンテンツ」>「メタオブジェクト」のページへ遷移。

デフォルトで「色」の定義が作成されているため、この定義にエントリーを追加していきます。

右上の「Add entry」ボタンをクリック

遷移後の画面にて、必要事項を入力します。

・Label：エントリーの表示名（Display Name）
・Image：今回はここで正方形の画像を追加して使用していきます
・Base color：設定するカラーのベースとなるカラーの選択
・Base pattern：設定する柄の選択

上記入力が完了したら、右下の「Save」ボタンをクリックしてください。

同じ手順で必要な分だけ、カラーや柄の画像を登録してください。

Shopifyの管理画面にて「商品管理」>該当する商品登録ページに遷移。

商品登録ページ内の「Category metafields」セクションにて、「色」のメタオブジェクトが表示されているかと思いますので、「Connect to option」と記載のあるアイコンをクリックして接続

>設定したいカラーバリエーションをすべて追加

そうすると、「Variants」のセクションでも接続が反映され、選択したカラーがすべて登録されます。

今回は「Pinnacle」というテーマを使用して設定していきます！

Shopifyの管理画面から、「オンラインストア」>カスタマイザの操作画面に遷移。

カスタマイザを開いたら、

「テーマの設定」>「Color Swatches」を開き、「Variant option for swatches」の箇所に、商品ページのVariantにて入力したオプション名を入力

※今回は「Color」を入力

続いて、商品ページに遷移し、「Variant picker」のセクションにて「Enable color swatches」を有効にしてください。

ここまで完了すると、コレクションページや商品ページにて、登録したカラーが表示されます。

今回はテーマにて複雑なカラーの色見本を表示させる方法についてご紹介しました！

少しの工夫の積み重ねで、ストアのUI/UXが改善されたり、コンバージョンが向上したりとより効果的なサイトを実現することが可能です。

皆様もぜひ、できることから改善を行ってみてください！

GO RIDEではちょっとしたストアの改修もご相談を承っております。

お困りごとがございましたら、お気軽にお問い合わせください。