カテゴリーメタフィールドを使用して色見本を追加する
カテゴリーメタフィールドは、Shopifyの標準商品分類の特定の商品カテゴリーにマッピングされます。カテゴリーメタフィールドは、分類では商品属性と呼ばれ、商品に正しい情報を追加して、マーチャントのサイト、マーケットプレイス、また検索エンジンの利用者が商品をより見つけやすくするのに役立ちます。
たとえば、商品カテゴリーを「アパレル・アクセサリー > 衣料品 > トップス > シャツ
」と追加した場合、「衣服の寸法
」、「ネックライン
」、「袖丈の種類
」などのカテゴリーメタフィールドを追加できます。Shopify Magicの予測に基づいて、いくつかのカテゴリーメタフィールドはデフォルトで追加されます。その他のカテゴリーメタフィールドが提案される場合もあり、ご自身のストアに追加するかどうかを選択できます。カテゴリーメタフィールドには、デフォルトのエントリーが存在します。このエントリーは、そのまま使用することも、カスタマイズして使用することもできます。
カテゴリーメタフィールドは商品のバリエーションのオプションに関連付けることができ、エントリーはオプション値に関連付けることができます。つまり、色を「黒
」から「グラファイト
」に編集すると、その色が使用されているすべての場所でバリエーションの値が更新されます。バリエーションのオプションとして色エントリーを使用する場合、ストアフロントの商品ページに色オプションの見本としてバリエーションのオプションを表示できます。
カテゴリーメタフィールドは、管理画面から商品に直接追加することができます。
すべての手順を完了するには、見本付きのバリエーションのオプションをサポートしているテーマが必要です。以前のテーマを利用している場合、または利用中のテーマで使用できない機能を追加したい場合は、テーマコードを編集するか、Shopify パートナーを雇ってサポートを受けることができます。
このチュートリアルでは、Shopifyの標準商品分類、カテゴリーメタフィールドの追加、カテゴリーメタフィールドへのバリエーションのオプションの関連付け、オンラインストアでの色見本のカスタマイズ、Search and Discoveryアプリを使用したストアへの色見本絞り込み条件の追加という、5つのステップをご紹介します。
目次
ステップ1:商品カテゴリーを追加する
商品カテゴリーは、Shopifyの標準商品分類の事前定義されたカテゴリーから選択します。
Shopifyの標準商品分類は、以下の目的で使用されます。
- 商品属性 (カテゴリーメタフィールドとして参照) を使用できるようにして、各商品カテゴリーにマッピングします。
- Shopify内で商品を管理しやすくなります。たとえば、スマートコレクションが作成される条件として使用したり、商品リストの絞り込みに使用したりできます。
- FacebookやGoogleなど、標準化された商品タイプを要求している他のチャネルで商品を販売することが容易になります。
- 商品に課税される税率を決定します (Shopify Taxを使用している場合)。商品には特別な税率または免除が適用される場合があります。商品が正しく分類されている場合、チェックアウト時に最も正確な税率が徴収されます。売上税の徴収の過不足が生じると、ビジネスに財務的責任または法的責任が生じる可能性があります。
商品カテゴリーの一例は「アパレル・アクセサリー > 衣料品 > トップス > シャツ
」です。これは、このチュートリアルを通して使用されているカテゴリーの例です。しかし、「色
」という商品属性で、どのカテゴリーメタフィールドにも色見本を追加することができます。
「アパレル・アクセサリー > 衣料品 > トップス > シャツ
」の他のカテゴリーメタフィールドとしては、「サイズ
」、「ネックライン
」、「袖丈の種類
」、「トップス丈の種類
」、「年齢層
」、「布・生地
」、「ターゲットの性別
」、「服の特徴
」などがあります。カテゴリーメタフィールドには、デフォルトのエントリーが存在します。このエントリーは、そのまま使用することも、ブランドの一貫性を保つためにカスタマイズして使用することもできます。たとえば、「黒
」という色がブランディングに沿わない場合、「グラファイト
」という名前に変更することができます。
商品に関して提供する情報やメディアによっては、カテゴリーが自動入力される場合があります。別のカテゴリーに変更することができます。
手順
デスクトップ
管理画面から [商品管理] に移動します。
商品をクリックします。
[カテゴリー] セクションで、「
アパレル・アクセサリー > 衣料品 > トップス > シャツ
」、または色カテゴリーメタフィールドがある別の [カテゴリー] を選択します。[保存] をクリックします。
iPhone
- Shopifyアプリから、[
] アイコンをタップします 。
- 商品をタップして編集するか、商品を検索します。
- [カテゴリー] セクションで、[カテゴリーを選択] をタップします。
- 「
アパレル・アクセサリー > 衣料品 > トップス > シャツ
」、または色の商品属性がある別の [カテゴリー] を選択します。 - [保存] をタップします。
Android
- Shopifyアプリから、[
] アイコンをタップします 。
- 商品をタップして編集するか、商品を検索します。
- [カテゴリー] セクションで、[カテゴリーを選択] をタップします。
- 「
アパレル・アクセサリー > 衣料品 > トップス > シャツ
」、または色の商品属性がある別の [カテゴリー] を選択します。 - [✓] をタップします。
ステップ2:カテゴリーメタフィールドのエントリーを追加および編集する
商品カテゴリーを追加すると、商品のバリエーションのオプション値に必要なすべてのエントリーを追加できるようになります。
手順
デスクトップ
管理画面から [商品管理] に移動します。
編集または追加するカテゴリーメタフィールドを持つ商品をクリックします。
デフォルトのエントリーからエントリーを追加するには、以下のタスクを実行します。
- [カテゴリーメタフィールド] セクションで、カテゴリーメタフィールドをクリックし、編集するエントリーをクリックします。
- 必要に応じてフィールドを編集します。
- [保存] をクリックします。
カスタムエントリーを追加するには、以下のタスクを実行します。
- [カテゴリーメタフィールド] セクションで、カテゴリーメタフィールドをクリックし、[新しいエントリーを追加] をクリックします。
- エントリーのフィールドに入力します。
- [保存] をクリックします。
[保存] をクリックします。
iPhone
Shopifyアプリから、[
] アイコンをタップします 。
編集または追加するカテゴリーメタフィールドを持つ商品をタップします。
デフォルトのエントリーからエントリーを追加するには、以下のタスクを実行します。
- [メタフィールド] セクションで、[すべてを表示] をタップします。
- カテゴリーメタフィールドをタップします。追加する値を選択します。
- [保存] をタップします。
カスタムエントリーを追加するには、以下のタスクを実行します。
- [メタフィールド] セクションで、[すべてを表示] をタップします。
- カテゴリーメタフィールドをタップします。
- [+] をタップします。
- エントリーのフィールドに入力します。
- [保存] をタップします。
Android
Shopifyアプリから、[
] アイコンをタップします 。
編集または追加するカテゴリーメタフィールドを持つ商品をタップします。
デフォルトのエントリーからエントリーを追加するには、以下のタスクを実行します。
- [メタフィールド] セクションで、[すべてを表示] をタップします。
- カテゴリーメタフィールドをタップします。追加する値を選択します。
- [✓] をタップします。
カスタムエントリーを追加するには、以下のタスクを実行します。
- [メタフィールド] セクションで、[すべてを表示] をタップします。
- カテゴリーメタフィールドをタップします。
- [+] をタップします。
- エントリーのフィールドに入力します。
- [✓] をタップします。
ステップ3:カテゴリーメタフィールドをバリエーションのオプションに関連付ける
このチュートリアルでは、色のカテゴリーメタフィールドを関連付けます。必要に応じて、他のカテゴリーメタフィールドを関連付けることができます。
バリエーションを追加する際に、関連付けができる、またはカスタムオプションを作成できるカテゴリーメタフィールドのリストが表示されます。
手順
デスクトップ
管理画面から [商品管理] に移動します。
編集する商品をクリックします。
[バリエーション] セクションで、[+サイズや色などのオプションを追加する] をクリックします。
カテゴリーメタフィールドを接続できる場合は、それを選択します。オプション値には、カテゴリーメタフィールドに追加したエントリーが自動的に入力されます。さらにオプション値を選択したり、新しいオプション値を作成したりできます。
任意:カスタムオプション値を追加する場合は、[編集] > [新しいエントリーを追加] の順にクリックします。エントリーフィールドに入力して [保存] をクリックします。
[保存] をクリックして商品を保存します。
iPhone
- Shopifyアプリから、[
] アイコンをタップします 。
- 商品をタップします。
- [バリエーション] セクションで、[+サイズや色などのオプションを追加する] をタップします。
- カテゴリーメタフィールドを関連付けることができる場合は、それをタップして選択します。オプション値には、カテゴリーメタフィールドに追加したエントリーが自動的に入力されます。さらにオプション値を選択したり、新しいオプション値を作成したりできます。
- 任意:カスタムオプション値を追加する場合は、[値を追加] フィールドにオプションを入力します。[+{オプション名}を追加] をタップし、エントリーフィールドに入力してから [保存] をタップします。
- [保存] をタップして商品を保存します。
Android
- Shopifyアプリから、[
] アイコンをタップします 。
- 商品をタップします。
- バリエーションのオプションがない場合、[バリエーション] セクションで、[+サイズや色などのオプションを追加する] をタップします。バリエーションのオプションがある場合、[オプション] セクションで、[編集] をタップし、[オプションを追加] をタップします。
- カテゴリーメタフィールドを関連付けることができる場合は、それをタップして選択します。オプション値には、カテゴリーメタフィールドに追加したエントリーが自動的に入力されます。[値を追加] をタップし、追加したい値をタップすることで、オプション値をさらに選択したり、新しい値を作成したりすることができます。
- 任意:カスタムオプション値を追加する場合は、[値を追加] フィールドにオプションを入力します。[+{オプション名}を追加] をタップし、エントリーフィールドに入力してから [[✓] をタップします。 ] をタップします
- [✓] をタップして商品を保存します。
バリエーションのオプションをカテゴリーメタフィールドに移行する
バリエーションのオプションを持つ商品をすでに作成している場合、カテゴリーメタフィールドに値を移行して、複数の新しいバリエーションの組み合わせを迅速に作成できます。カテゴリーメタフィールドを使ってバリエーションのオプションを作成すると、バリエーションのオプション名を1か所で更新でき、そのカテゴリーメタフィールドの値がどこに関連付けられていても更新されます。
カテゴリーメタフィールドを既存のオプションに接続するには、動的ソースアイコン [⛁] をクリックします。
デスクトップ
手順
管理画面から [商品管理] に移動します。
カテゴリーメタフィールドに移行したいバリエーションのオプションがある商品をクリックします。
任意:商品に [カテゴリー] が設定されていない場合は、以下のいずれかの手順を行います。
- 商品のカテゴリーを入力し、[商品カテゴリー] リストから最も正確な結果を選択します。
- カテゴリーとサブカテゴリーの各レベルをクリックして、商品カテゴリーを見つけます。
- [提案] をクリックして、提案されたカテゴリーを承諾します。
バリエーションのオプションをカテゴリーメタフィールドに関連付けるには、以下のいずれかのタスクを実行します。
- 既存のオプションをクリックし、動的ソースアイコンをクリックしてから、関連付けるカテゴリーメタフィールドをクリックします。
- [別のオプションを追加] をクリックし、関連付けるカテゴリーメタフィールドをクリックします。
[保存] をクリックします。
iPhone
Shopifyアプリから、[
] アイコンをタップします 。
カテゴリーメタフィールドに移行したいバリエーションのオプションがある商品をタップします。
任意:商品に [カテゴリー] が設定されていない場合は、以下のいずれかの手順を行います。
- [カテゴリーを選択] をタップして商品のカテゴリーを入力し、[カテゴリー] リストから最も正確な結果を選択します。
- [カテゴリーを選択] をタップし、カテゴリーとサブカテゴリーの各レベルをタップして最も正確な商品カテゴリーを見つけ、そのカテゴリーをタップして選択します。
[オプション] セクションで、[編集] をタップします。
バリエーションのオプションをカテゴリーメタフィールドに関連付けるには、以下のいずれかのタスクを実行します。
- 既存のオプションをタップし、[関連付けられたソースはありません] をタップしてから、関連付けるカテゴリーメタフィールドをタップします。
- [オプションを追加] をタップしてから、関連付けるカテゴリーメタフィールドをタップします。
既存の値がクリアされるというメッセージがダイアログで表示されます。[続行] をタップします。
[保存] をタップします。
Android
Shopifyアプリから、[
] アイコンをタップします 。
カテゴリーメタフィールドに移行したいバリエーションのオプションがある商品をタップします。
任意:商品に [カテゴリー] が設定されていない場合は、以下のいずれかの手順を行います。
- [カテゴリーを選択] をタップして商品のカテゴリーを入力し、[カテゴリー] リストから最も正確な結果を選択します。
- [カテゴリーを選択] をタップし、カテゴリーとサブカテゴリーの各レベルをタップして最も正確な商品カテゴリーを見つけ、そのカテゴリーをタップして選択します。
[オプション] セクションで、[編集] をタップします。
バリエーションのオプションをカテゴリーメタフィールドに関連付けるには、以下のいずれかのタスクを実行します。
- 既存のオプションをタップし、[関連付けられたソースはありません] をタップしてから、関連付けるカテゴリーメタフィールドをタップします。
- [オプションを追加] をタップしてから、関連付けるカテゴリーメタフィールドをタップします。
既存の値がクリアされるというメッセージがダイアログで表示されます。[続行] をタップします。
[✓] をタップします。
ステップ4:オンラインストアの色見本をカスタマイズする
次に、オンラインストアの色見本をカスタマイズします。


テーマで見本をカスタマイズする
「バリエーションピッカー」ブロックを使用している場合は、見本がデフォルトで表示されます。ブロックの設定で、それらの表示方法をカスタマイズできます。
手順
管理画面から [オンラインストア] > [テーマ] に移動します。
[カスタマイズ] をクリックします。
色オプションを追加した商品に移動します。
任意:見本をカスタマイズするには、[バリエーションピッカー] ブロックをクリックします。[円形]、[正方形]、[なし] から選択して、見本の表示を変更できます。
[保存] をクリックしてテーマを保存します。
これで、オンラインストアの商品ページに移動できるようになりました。商品ページでは、バリエーションのオプション値に対する色見本が表示されます。
ステップ5:ストア検索に色見本の絞り込み条件を追加する
色見本の絞り込み条件は、Search and Discoveryアプリを使用してストアに追加することもできます。Search and Discoveryアプリについて詳しくはこちらをご覧ください。
ストアにSearch and Discoveryアプリをインストールしていない場合は、アプリをインストールしてから以下の手順を完了する必要があります。アプリのインストールについて詳しくはこちらをご覧ください。
手順
- Shopify Search & Discoveryアプリで [絞り込み] に移動し、[絞り込みを追加] をクリックします。
- [+ ソースを選択] をクリックして、タイプが「カテゴリーメタフィールド」の色を選択します。
- 任意:絞り込みの名前を変更します。
- 任意:絞り込みの挙動を変更します。
- 任意:[値を管理] をクリックして視覚的な表示を変更すると、[見本を含める] (デフォルトの色を表示) や [使用可能な場合は画像を使用する] ( 色に追加する画像を表示) を選択できます。検索にテキストのみを使用する場合は、両方のオプションを未選択のままにしておくことができます。
- 任意:絞り込みの値を複数選択し、1つの値としてグループ化します。
- 任意:絞り込み値を並べ替えます。
- [保存] をクリックします。
色のオプションと見本
更新されたShopify商品分類には、標準の色属性が含まれています。これにより、ストアフロントに色見本を追加できます。この標準属性にアクセスするには、色カテゴリーのメタフィールドを含む商品カテゴリーを選択します。次のカテゴリーのメタフィールドは、色見本をサポートしています。
Backing color
Backrest upholstery color
Band color
Blanket color
Body color
Butt cap color
Color
Canopy color
Case color
Core color
Cover color
Dial color
Door color
Door mat base color
Eyewear frame color
Eyewear lens color
Fingerboard color
Flower color
Flush plate color
Footwear color
Foundation color
Frame color
Furniture/Fixture color
Handle color
Housing color
Ink color
Instrument color
Instrument string color
Jumping surface color
Laser color
Leg color
Lens color
Light color
Neck color
Pen color
Pole color
Riser color
Rod color
Saddle base color
Saddle seat color
Seat color
Seat upholstery color
Shaft color
Sheet color
Shelf color
Shell/Frame color
Slat color
Spool color
String color
Suction cup color
Tabletop color
Tank color
Temple color
Top color
Upholstery color