こんにちは。FRACTA のResearch & Implementation（RI）局です。
今回はShopifyストアの商品ページで、商品バリエーションのカラー表示（カラースウォッチ／カラーチップ）を実装する方法を3つご紹介します。
商品ページ上にカラーバリエーションを表示することで、お客様にバリエーションの有無や種類を伝えやすくなり、ページもよりリッチな印象になります。
Shopifyでカラー表示を実装する場合、方法に選択肢がありますので、それぞれのメリット・デメリットとともにご紹介します。
1. アプリを使用する
2. テーマ機能を使用する
3. メタフィールドを使用する
3-1. 商品-メタフィールドを使用する
3-2. バリエーション-メタフィールドを使用する
3-3.【応用】メタフィールドとメタオブジェクトを紐付ける
カラー表示なしの状態（テーマ「Dawn」使用）
1. アプリを使用する
まず1つ目は、アプリを使用して実装する方法です。既にShopifyでストアを運用されている方には一番イメージがしやすいと思います。
使用したアプリ：
Variant Image Wizard + Swatch（FREEプラン）
https://apps.shopify.com/variant-image-wizard?locale=ja
導入は非常に簡単で、アプリストアでカラーバリエーション機能のアプリを探し、インストールします。インストールしたら、アプリ設定画面から対象商品のカラー設定を行います。設定方法やカラーデザインはアプリによって様々です。
今回デモに使用したアプリの設定画面は下記のような画面で、各対象商品に対し、グラデーションなどの細かいカラーデザインが設定できました。
アプリを使用するメリットは、導入が簡単かつソースコードを編集する必要がないので、誰でも実装ができることです。
デメリットとしては、希望のアプリを見つけるのに時間がかかってしまうことが挙げられます。アプリによってカラーデザインの編集可能な範囲が決まっているもの、CSSでよりカスタマイズできるものなど様々ですので、要件に合ったアプリを見つけるには、それなりに時間をかける必要があります。
また、月額あるいは買い切り費用が発生する場合もありますが、今回使用したアプリのようにFREEプランがあるものも存在します。希望通りのアプリが見つかればその後は利用し続けられるので、アプリでの実装を検討している場合は一度時間をとってじっくり探してみるとよいでしょう。
FRACTAでShopify構築支援をする際には、マーチャント様の希望を伺いながら、ブランドビジネスにマッチするアプリをご提案させていただきます。
2. テーマ機能を使用する
次にテーマに内蔵された機能を使用する方法です。カラースウォッチ機能に対応したテーマを使用することで、開発の必要がなく実装可能となります。
使用したテーマ：
Prestige（トライアル版）
https://themes.shopify.com/themes/prestige/styles/allure
まずは、テーマストアでカラースウォッチ機能付きのテーマを探します。この機能が付いたテーマは有料になりますので、デモを見たり、実際にトライアルでストアに導入し、テーマカスタマイズで試すとよいでしょう。
ストアに導入したら、テーマカスタマイズで商品ページを開きます。バリエーション選択部分のカラースウォッチ表示にチェックを入れると、機能がONになります。
※設定の表示はテーマによって異なります。
今回使用したデモ商品のカラーバリエーションは、
ブラック
ホワイト
レッド
ブルー
バリエーション名は英語表記で、
black
white
red
blue
に設定しています。
テーマ「Prestige」の場合、商品のバリエーション名をカラー名称（英語表記）にして設定するだけで、すぐにカラースウォッチが表示されます。ただし一部のカラーのみ対応しているので、非対応カラーの場合は下記のように、テーマカスタマイズ＞テーマ設定にあらかじめカラーコードを記入して保存する必要があります。
また、「Prestige」の場合は画像にも対応していますので、カラーではなく柄や素材などの画像で表示することも可能です。
テーマ機能を使用するメリットは、使用するテーマ内にカラースウォッチ機能が付いていれば、追加費用なしで導入できることです。また管理も比較的簡単で、ソースコードを書く必要もありません。カラースウォッチ機能を必須要件としてテーマを決めるマーチャントもいらっしゃいます。
ただしテーマ機能を使用する場合に2つのデメリットがあります。
1つ目は、先ほど説明したように商品のバリエーション名を英語表記のカラー名称に設定する必要があることです。例えば、バリエーション名を「ブラック」「黒」といった日本語にしたい場合は、テーマ機能を使ってカラー表示することができません。
2つ目は、テーマによってカラーデザインが完全に決まっているので、デザインカスタマイズするにはソースコードを編集する必要があることです。社内で対応が難しい場合は、開発費用が発生するでしょう。
FRACTAでShopify構築支援をする際には、バリエーション名の問題やカラーデザインの希望についてヒアリングさせていただき、マッチするテーマのご提案をしています。どのようなカスタマイズを行うかについても、コストや運用面と相談しながら進行させていただいております。
3. メタフィールドを使用する
最後に紹介するのは、メタフィールドを使う実装方法です。
メタフィールドとは、商品や顧客に独自のデータを持たせることができる機能です。例えば、商品であれば「素材」「成分」、顧客であれば「性別」「誕生日」といったデータを各商品・顧客毎に保存することができます。ここでは、商品とバリエーションに対して「バリエーションカラー」というメタフィールドを作成します。
※商品ページ上にカラー表示するには、ソースコードの編集が必要です。
3-1. 商品-メタフィールドを使用する
まずは「商品」のメタフィールド定義「バリエーションカラー（名称は任意）」をコンテンツタイプ「色」「値のリスト」で作成します。
メタフィールドを作成するには、Shopify管理画面＞設定＞カスタムデータにアクセスします。（2023/3現在）
対象の商品管理にアクセスすると、スクロールして一番下に作成したメタフィールド項目が追加されているので、各バリエーションのカラーコードを設定します。
今回使用したデモ商品のカラーバリエーションは、
black→#000000
white→#ffffff
red→#ff0000
blue→#000fff
に設定しています。
設定ができたら、商品ページ上にカラー表示させるためにソースコードを編集します。
ここでは具体的な編集内容は割愛しますが、カラーデザインは自由にカスタマイズすることができます。デモでは最もシンプルに表示してみました。
メタフィールドを使用するメリット・デメリットは応用編の最後に記載します。
3-2. バリエーション-メタフィールドを使用する
続いて商品の「バリエーション」に対してメタフィールドを作成する方法です。今回はカラーコードではなく画像表示で実装していきます。
まずはバリエーション画像として使用する素材を登録しておきます。
「バリエーション」のメタフィールド定義「バリエーション画像（名称は任意）」をコンテンツタイプ「ファイル」「1つのファイル」で作成します。
対象の商品管理＞各バリエーション編集にアクセスすると、スクロールして一番下に作成したメタフィールド項目が追加されているので、各バリエーション用の画像を設定します。
設定ができたら、商品ページ上に画像を表示させるためにソースコードを編集します。
デモでは画像をそのまま表示してみました。デザインは自由にカスタマイズできるので、サイズを調整したり、装飾したりすることも可能です。
3-3.【応用】メタフィールドとメタオブジェクトを紐付ける
最後にメタフィールドの応用編、メタオブジェクトを活用した方法をご紹介します。
メタオブジェクトはShopifyの新機能で、独自のデータリストを登録しておくことができます。詳しくはこちらの記事をご参照ください。
メタオブジェクトを使用すると、事前に決まったカラーコード・画像をデータとして登録しておくことで、素早く商品登録ができます。商品ごとのバリエーションがある程度パターン化されている場合は、メタオブジェクトを活用するとよいでしょう。
メタオブジェクトを作成するには、Shopify管理画面＞設定＞カスタムデータにアクセスし、メタオブジェクト項目にスクロールします。（2023/3現在）
メタオブジェクト定義「variation_color（名称は任意）」を作成します。さらにフィールド「code（名称は任意）」を作成し、コンテンツタイプ「色」「値のリスト」を指定します。
メタオブジェクト定義を作成したら、コンテンツ＞メタオブジェクトにアクセスし、エントリー（各カラーコードのデータ）を登録していきます。
デモ商品のバリエーション用に、
Black・White・Red・Blue
を登録し、各カラーコードを設定しました。
次に登録したメタオブジェクトのエントリーを商品と紐付けるためのメタフィールドを作成します。「商品」のメタフィールド定義「バリエーションカラー@メタオブジェクト（名称は任意）」をコンテンツタイプ「メタオブジェクト」「エントリーのリスト」で作成します。リファレンスは先ほど作成したメタオブジェクト定義「variation_color（名称は任意）」を指定します。
対象の商品管理にアクセスすると、スクロールして一番下に作成したメタフィールド項目が追加されているので、カラーコードのメタオブジェクトエントリーを設定します。
設定ができたら、商品ページ上にカラー表示させるためにソースコードを編集します。
メタフィールドのみの実装と同様に、デザインは自由にカスタマイズ可能です。
今回はメタオブジェクトエントリー（カラーコードのデータ）を商品-メタフィールドに紐付ける方法をご紹介しましたが、3-2と同様にバリエーション-メタフィールドに紐付けることも可能です。もちろんカラーコードではなく画像にすることも可能ですし、カラーコードと画像を組み合わせることもできます。さらに商品ページだけでなく、コレクションページ（商品一覧）にも表示できますので、よりお客様にバリエーションの有無や種類を伝えやすくなります。
メタフィールド・メタオブジェクトを使用する最大のメリットは、デザインの自由度だけでなく、商品管理・運用方法に合わせた実装が可能になることです。カラーバリエーションの登録も商品管理内で完結できるので、非常に扱いやすくなります。
反面デメリットとなるのが、すぐに導入できない、開発コストが発生することです。メタフィールド・メタオブジェクトの設定は管理画面で誰でも行えますが、商品ページ上にカラーバリエーションを表示するにはソースコードの編集が必要になります。
FRACTAでShopify構築支援を行う際は、取扱い商品や希望の管理方法、運用に合わせた最善の実装方法をご提案させていただいております。テーマのカスタマイズ同様、新規の設定や開発支援も、コストや期間と相談しながらの対応が可能です。
今回はShopifyストアの商品ページで、商品バリエーションのカラー表示を実装する方法3つをご紹介させていただきました。それぞれメリット・デメリットがあるので、ストアの取扱い商品や希望する運用・管理方法に合わせた選択ができればよいと思います。検討する際の参考になれば幸いです。
新着記事のご案内は、FRACTA Twitterアカウント、Newsletter(メールマガジン)にてお知らせしています。
ぜひTwitterアカウントのフォロー、Newsletter登録をお願いいたします◎
▼Twitterアカウント
Follow @fracta_pr
▼Newsletter登録フォーム
