メタオブジェクトを作成して接続する
このチュートリアルでは、商品ハイライト用のカスタムメタオブジェクトを作成し、オンラインストアに表示する方法を学びます。商品ハイライトのメタオブジェクトには、画像、商品名、キャプション、説明が表示されます。
このチュートリアルでは、メタオブジェクト定義、エントリーの作成、メタフィールド参照の設定、商品とエントリーの接続、そして最後にオンラインストアでのメタオブジェクトの公開について紹介します。
このページの内容
学習内容
このチュートリアルを完了すると、以下のタスクを達成したことになります。
- 商品ハイライトのメタオブジェクトを作成した
- 作成したメタオブジェクトを使用して、商品ハイライトのエントリーをいくつか作成した
- メタオブジェクトを参照するメタフィールドの定義を作成した
- 特定の商品にエントリーを接続した
- メタオブジェクトのエントリーを公開した
ステップ1：メタオブジェクトを作成する
管理画面から、[設定] > [メタフィールドとメタオブジェクト] に移動します。
[メタオブジェクト定義] で、[定義を追加] をクリックします。
メタオブジェクト定義に商品ハイライトという名前を付けます。
[フィールドを追加] をクリックして、このメタオブジェクトに表示するコンテンツのタイプを選択します。フィールドはメタオブジェクトに表示されるコンテンツを定義するもので、各フィールドには固有のオプションと検証があります。最初のフィールドを追加するには、[ファイル] を選択します。
タイプと検証を設定します。フィールドに画像という名前を付け、簡単な説明を入力します。
[アクセス] で、[ストアフロント] が自動的に選択されます。このオプションにより、ストアでコンテンツにアクセスして表示できるようになるため、選択したままにしておきます。
メタオブジェクトに画像フィールドを追加します。[フィールドを追加] > [ファイル] を選択します。
- このフィールドに画像という名前を付けます。
- このメタオブジェクトで画像のみが表示されるように、ビデオのチェックを外します。
- 説明を入力します。
- 完了したら、[追加] をクリックします。
- メタオブジェクトに見出しフィールドを追加します。今回は、フィールドタイプとして [フィールドを追加] > [1行のテキスト] を選択します。以下の手順を実行します。
- このフィールドに見出しという名前を付けます。
- このフィールドをインデックスのエントリー名として使用するには、[このフィールドを表示名として使用する] にチェックを入れます。
- 説明を入力します。
- 完了したら、[追加] をクリックします。
- メタオブジェクトにキャプションフィールドを追加します。[フィールドを追加] > [1行のテキスト] をクリックします。以下の手順を実行します。
- このフィールドにキャプションという名前を付けます。
- 説明を入力します。
- 完了したら、[追加] をクリックします。
- メタオブジェクトに説明フィールドを追加します。[フィールドを追加] > [複数行のテキスト] をクリックします。以下の手順を実行します。
- このフィールドに説明という名前を付けます。
- 説明を入力します。
- 完了したら、[追加] をクリックします。
- 新しいメタオブジェクト定義を保存します。
メタオブジェクト定義が保存されると、エントリーの作成を開始できます。
ステップ2：エントリーを作成する
- 管理画面で、[コンテンツ] をクリックします。
- 新しいエントリーのベースとして [商品ハイライト] メタオブジェクト定義をクリックし、次に [エントリーを追加] をクリックします。
- エントリーのフィールドに入力します。
- [画像を選択] をクリックし、この商品ハイライトの画像を選択またはアップロードします。
- タイトルと説明を追加します。
- ステータスは自動的に [有効] に設定されます。エントリーをすぐに使用しない場合は、ステータスを [下書き] に変更できます。
- [保存] をクリックします。
エントリーには、単一のコンテンツエントリーに固有のIDである、生成されたハンドルがあります。ストアの各エリアにエントリーを接続し始めると、ハンドルを編集することは推奨されません。ストアでエントリーハンドルを使用し始めた後にハンドルを変更した場合の影響について詳しくはこちらをご覧ください。
上記の手順を繰り返し、商品ハイライトのメタオブジェクト定義に基づいてエントリーをさらに3つ作成します。
メタオブジェクト定義とエントリーを保存したら、メタオブジェクトを参照するメタフィールドの定義を作成できます。
ステップ3：メタオブジェクトを参照するメタフィールドの定義を作成する
管理画面から、[設定] > [メタフィールドとメタオブジェクト] に移動します。
[メタフィールド] セクションで、[商品] をクリックします。
[定義を追加] をクリックします。固有の名前と説明を入力し、[コンテンツタイプを選択] をクリックします。
[タイプを選択] をクリックし、[メタオブジェクト] を選択します。
[参照] セクションで、参照するメタオブジェクト定義を選択します。商品ハイライトを選択します。これにより、商品のメタフィールド定義には、商品ハイライトのメタオブジェクトに関連するエントリーのみが表示されるようになります。
この定義で1つのエントリーを表示するか、エントリーのリストを表示するかを定義します。この例では、[エントリーのリスト] オプションを選択します。
[アクセス] セクションでは、デフォルトで [ストアフロント] オプションが選択されています。
[保存] をクリックします。
ステップ4：商品をエントリーに関連付ける
管理画面で、[商品管理] に移動します。
「商品ハイライト」を表示する商品を選択します。
この例では、作成した商品ハイライトエントリーの一部 (すべてではない) を表示します。[商品のメタフィールド] セクションで、商品ハイライトのメタフィールドの横にあるエントリーフィールドをクリックします。メタフィールドのリストに商品ハイライトが表示されない場合は、[すべて表示] をクリックします。
[エントリーを選択] をクリックします。このステップでは、この特定の商品に表示するエントリーを選択します。商品ハイライトを2つ選択します。
商品ページに戻ります。別の商品を選択し、前の手順に従って、その商品に別の商品ハイライトエントリーを2つ割り当てます。
ステップ5：オンラインストアにエントリーを公開する
エントリーを商品に連携させたら、ストアにエントリーを表示します。この手順では、テーマエディタを使用して、メタオブジェクトエントリーがリンクされるブロックとセクションを選択します。
セクションまたはブロックを追加した後、
ボタンをクリックしてメタフィールドを選択できます。
手順：
管理画面から、[オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[カスタマイズ] をクリックします。
画面上部のドロップダウンメニューを使用して、[商品] > [デフォルトの商品] の順に選択します。これにより、テーマエディタにデフォルトの商品テンプレートが読み込まれます。
サイドバーで [セクションを追加] をクリックし、新しいセクションタイプとして [マルチロー] を選択します。
[マルチロー] セクションの最初の行をクリックします。
- 最初のブロックの設定が右側のサイドバーに表示されます。列ブロックでは、画像を手動で選択し、見出し、キャプション、説明を追加できます。また、個々のデータソースアイコンをクリックして、ブロック設定を目的のエントリーにリンクすることもできます。
ブロック名の横にある [動的ソースを接続] をクリックして、商品ハイライトを選択します。テーマエディタにより、新しいマルチローブロックに商品ハイライトのエントリーが入力されます。
[マルチロー] セクションの残りのブロックを設定するか、未使用のブロックを削除します。
[保存] をクリックして、商品ハイライトのエントリーを公開します。
エントリーは、連携されている商品にのみ表示されます。商品にエントリーが割り当てられていない場合、セクションは完全には削除されず、空白のままになります。正確な動作は使用するテーマやセクションによって異なる場合があるため、テンプレートをテストしてニーズに合っているかを確認してください。
商品のエントリーがない場合にセクションが希望どおりに表示されない場合は、新しい商品テンプレートを作成し、エントリーがある商品にそのテンプレートを割り当てることを検討してください。