メタオブジェクトを使用してウェブページを構築する
メタオブジェクトを使用して、オンラインストアのランディングページを構築できます。たとえば、アンバサダープログラムがある場合は、経歴、SNSリンク、画像を含む各アンバサダーのウェブページを作成できます。
この機能を使用するには、以下を行う必要があります。
- ストアフロントへのアクセス権があるメタオブジェクト定義を作成します。必要に応じて、ウェブページ機能を手動で有効化します。
- メタオブジェクト定義のエントリーを作成します。
- ウェブページのメタオブジェクトのテンプレートを作成します。
カスタムデータに関する機能について、詳しくはこちらをご覧ください。
ウェブページ機能を有効化してテーマテンプレートを作成する
メタオブジェクト定義を作成してメタオブジェクトエントリーを作成した後、テーマエディタでメタオブジェクトのテンプレートを作成できます。
ページセレクターから関連するメタオブジェクトを選択した後、セクションの追加、ブロックの追加、設定の編集を行ってカスタマイズできます。動的ソースを使用して、メタオブジェクト定義フィールドと連携させることもできます。たとえば、アンバサダー向けのページを画像付きで作成する場合、動的ソースアイコンをクリックすることにより、テキスト付き画像を追加し、メタオブジェクトエントリーを連携させることができます。
オンラインストアにメタオブジェクトを表示する方法の詳細についてはこちら、動的ソースを使用する方法の詳細についてはこちらをご覧ください。
テーマエディタでメタオブジェクトのテンプレートを作成する
- 管理画面から [オンラインストア] > [テーマ] の順に移動します。
- 編集するテーマを見つけて、[カスタマイズ] をクリックします。
- ページ上部にあるページセレクターを開きます。
- [メタオブジェクトのテンプレートを作成する] をクリックします。ダイアログで、テンプレートに使用するメタオブジェクトをクリックします。ページタイトルとメタディスクリプションに使用するメタオブジェクトフィールドを編集することができます。また、[検索結果] セクションでURLハンドルを編集することもできます。テンプレートの名前には、メタオブジェクト定義と同じ名前が自動的に設定されます。
- [テンプレートを作成する] をクリックします。
- テンプレートを作成してから、セクションの追加、ブロックの追加、設定の編集を行って、テンプレートをカスタマイズすることができます。動的ソースを使用して、メタオブジェクト定義フィールドと連携させることもできます。たとえば、アンバサダー向けのページを画像付きで作成する場合、動的ソースアイコンをクリックすることにより、テキスト付き画像を追加し、メタオブジェクトエントリーを連携させることができます。
- [保存] をクリックします。
テーマテンプレートを作成した後、ホームページのセクションからそのページにリンクさせることができます。また、[リンク] フィールドのナビゲーションメニューに手動でリンクを追加することもできます。ナビゲーションメニューへのリンクの追加について、詳しくはこちらをご覧ください。
ウェブページ機能を手動で有効化する
メタオブジェクトの機能を有効にするには、メタオブジェクト定義の [機能] セクションで [ウェブページ] を選択します。
手順：
- 管理画面で、[設定] > [カスタムデータ] に移動します。
- ウェブページの作成に使用するメタオブジェクトをクリックします。
- [アクセスオプション] セクションで、[ストアフロント] が選択された状態を維持します。
- メタフィールドの [機能] セクションで、[ウェブページ] を選択します。[ウェブページ] セクションは、メタオブジェクト定義に表示されます。
-
[ウェブページ] セクションで、以下の操作を行います。
- ページタイトルと検索結果のメタディスクリプションを作成するフィールドを選択します。[オンラインストアで有効にする] がデフォルトで選択されています。Hydrogenのストアフロントがある場合は、[オンラインストアで有効にする] の選択を解除します。
- オプション：URLハンドルをカスタマイズします。
[保存] をクリックします。
メタオブジェクト定義を作成してウェブページ機能を有効にした後、メタオブジェクトエントリーを追加する必要があります。
テーマエディタでメタオブジェクトのテンプレートを作成できます。メタオブジェクト定義、個々のエントリー、オンラインストアのチャネルから、テーマエディタにアクセスできます。テーマエディタで、ページセレクターをクリックし、メタオブジェクト定義を見つけて、[テンプレートを作成] をクリックします。