こんにちは。FRACTA のResearch & Implementation（RI）局です。
今回はShopifyのブログ記事に「メタフィールド」と「メタオブジェクト」を使って、記事に関する商品や投稿者などの情報を表示する方法をご紹介します。ブログ記事に関連情報を表示することで、ストアの回遊性を高めることができます。
さらに今回紹介する方法は、ソースコードを編集する必要がなく、すべて管理画面で設定が可能です。「メタフィールド」「メタオブジェクト」と聞くと、コーディングが必要というイメージがあるかも知れませんが、実は管理画面から簡単な表示設定ができるので、コーダー・エンジニアでなくても大丈夫です。
1. 商品情報を表示（「メタフィールド」使用）
2. 投稿者・店舗情報を表示（「メタフィールド」「メタオブジェクト」使用）
まずはサンプルで作成したブログ記事をご覧ください。
実店舗のあるアパレルストアを想定し、店舗スタッフがその日のコーディネートを投稿したという記事内容です。
記事の下部に、
- コーディネートに着用した商品の情報
- 投稿したスタッフの簡単なプロフィール
- 投稿したスタッフの勤務する店舗情報
を表示してみました。
それでは、上記の内容を表示させる手順を説明していきます。
1. 商品情報を表示（「メタフィールド」使用）
記事に関する商品を表示させるには、まずブログ記事のメタフィールドを作成します。
ブログ記事メタフィールドの作成は、Shopify管理画面＞設定＞カスタムデータ＞ブログ記事から行います。（2023/5現在）
メタフィールド定義「product（名称は任意）」を作成し、「タイプ」は「商品」「1つの値」を選択します。
メタフィールドが作成できたら、対象ブログ記事の管理画面に移ります。
メタフィールド＞すべて表示（2023/5現在）をクリックし、メタフィールドの登録を行う画面に進みます。
先ほど作成したメタフィールドに、商品が登録できるようになっていますので、対象商品を選択し保存します。
これでメタフィールドの設定が完了しました。次にブログ記事上に表示させる設定に進みたいと思いますが、設定を行う前に注意点が2つあります。
1つ目は、メタフィールドに登録した商品を削除したりアーカイブした場合に、ブログ記事上に表示されなくなります。
以下は、メタフィールドに登録した商品を削除した場合の表示例です。
このように表示崩れを起こしてしまいますので、商品を削除する際は、ブログ記事に紐付けていないか事前の確認が必要です。
※コード編集が可能な場合、liquidファイルを編集することで対処することもできます。
なお、商品が売り切れになった際は、「売り切れ」の表示となりますのでご安心ください。もう1つの注意点は、次のステップで説明します。
オンラインストア＞テーマ＞カスタマイズへ進みます。
カスタマイズの対象ページは「ブログ記事」を選択します。
次にカスタマイズの対象テンプレートを選択しますが、ここで2つ目の注意点です。
「デフォルトのブログ記事」もしくは普段お使いのテンプレートを対象にカスタマイズを行ってしまうと、メタフィールドに商品を登録していないブログ記事の表示が崩れてしまいます。
以下はメタフィールドに商品を登録していない場合とそのブログ記事の表示例です。
メタフィールドに商品を登録したブログ記事にのみ表示されるよう、新しくテンプレートを作成することをお勧めします。
※コード編集が可能な場合、liquidファイルを編集することで対処することもできます。
テンプレートが作成できたら、「プレビュー」の対象ブログ記事を変更します。先ほどメタフィールドに商品を登録したブログ記事を選択しましょう。
対象ブログ記事がプレビューされたら、「セクションを追加」をクリックし、「特集商品」を選択し追加します。
※サンプルではテーマ「Dawn」を使用しています。その他のテーマを使用している場合は、商品表示系のセクションを選択してください。
次にセクションで表示する商品を選択します。
「動的ソースを接続」をクリックすると、作成したメタフィールドが表示されますので、そちらを選択します。
※作成したメタフィールドが表示されない場合、メタフィールドの設定に誤りがある可能性があります。メタフィールド作成のところから見直してみてください。
メタフィールドに登録した商品の情報が表示されました。お好みに合わせて価格表示やカートボタンの有無、位置を調整します。
最後に対象ブログ記事の管理画面に戻り、先ほど作成したテンプレートを割り当てて保存します。
※保存した時点でストア上にも反映されます。
こちらで関連商品の表示設定は完了です。
2. 投稿者・店舗情報を表示（「メタフィールド」「メタオブジェクト」使用）
次にメタフィールドとメタオブジェクトを使用して、ブログ記事の投稿者、投稿者に関連する店舗情報を表示する手順をご紹介します。
まず始めにメタオブジェクトを作成します。
メタオブジェクトを作成するには、Shopify管理画面＞設定＞カスタムデータにアクセスし、メタオブジェクト項目にスクロールします。（2023/5現在）
以下のようにメタオブジェクト定義、フィールドを作成していきます。
投稿者メタオブジェクト：
メタオブジェクト定義「staff（名称は任意）」
投稿者名フィールド「name（名称は任意）」タイプ「単一行のテキスト」「1つの値」
投稿者概要フィールド「description（名称は任意）」タイプ「複数行のテキスト」
投稿者写真フィールド「photo（名称は任意）」タイプ「ファイル」「1つのファイル」
店舗メタオブジェクト：
メタオブジェクト定義「shop（名称は任意）」
店舗名フィールド「name（名称は任意）」タイプ「単一行のテキスト」「1つの値」
店舗概要フィールド「description（名称は任意）」タイプ「複数行のテキスト」
店舗写真フィールド「photo（名称は任意）」タイプ「ファイル」「1つのファイル」
店舗詳細ページフィールド（あれば）「url（名称は任意）」タイプ「URL」「1つの値」
メタオブジェクトが作成できたら、次にメタフィールドを作成します。
Shopify管理画面＞設定＞カスタムデータ＞ブログ記事にアクセスします。
投稿者メタフィールド：
メタフィールド定義「staff（名称は任意）」
タイプ「メタオブジェクト」リファレンス「staff（メタオブジェクト定義名）」「1件のエントリー」
店舗メタフィールド：
メタフィールド定義「shop（名称は任意）」
タイプ「メタオブジェクト」リファレンス「shop（メタオブジェクト定義名）」「1件のエントリー」
メタフィールドが作成できたら、先ほど作成したメタオブジェクトにデータ（投稿者・店舗情報）を登録します。
Shopify管理画面＞コンテンツ＞メタオブジェクトにアクセスします。
投稿者データ登録：
「エントリーを追加」をクリックし「staff（メタオブジェクト定義名）」を選択します。
以下のように詳細情報を登録していきます。
店舗データ登録：
「エントリーを追加」をクリックし「shop（メタオブジェクト定義名）」を選択します。
以下のように詳細情報を登録していきます。
次に登録したメタオブジェクトデータ（投稿者・店舗情報）を関連するブログ記事に紐付けます。
対象ブログ記事の管理画面にあるメタフィールド項目「staff（メタオブジェクト定義名）」「shop（メタオブジェクト定義名）」に、それぞれメタオブジェクトデータ（投稿者・店舗情報）を選択して保存します。
最後にオンラインストア＞テーマ＞カスタマイズから表示設定を行います。
カスタマイズの対象ページは「ブログ記事」を選択します。
次にカスタマイズの対象テンプレートを選択しますが、先ほどの商品情報表示と同じ注意点があります。
「デフォルトのブログ記事」もしくは普段お使いのテンプレートを対象にカスタマイズを行ってしまうと、メタフィールドにメタオブジェクトデータ（投稿者・店舗情報）を登録していないブログ記事の表示が崩れてしまいます。
以下はメタフィールドにメタオブジェクトデータ（投稿者・店舗情報）を登録していないブログ記事の表示例です。
メタフィールドにメタオブジェクトデータ（投稿者・店舗情報）を登録したブログ記事にのみ表示されるよう、新しくテンプレートを作成することをお勧めします。
※コード編集が可能な場合、liquidファイルを編集することで対処することもできます。
また、メタフィールドに登録済みのメタオブジェクトデータ（投稿者・店舗情報）を削除した場合も表示崩れの原因となりますので、メタオブジェクトデータ削除の際はご注意ください。
テンプレートが作成できたら、「プレビュー」の対象ブログ記事を変更します。先ほどメタフィールドにメタオブジェクトデータ（投稿者・店舗情報）を登録したブログ記事を選択しましょう。
対象ブログ記事がプレビューされたら、「セクションを追加」をクリックし、「マルチカラム」を選択し追加します。
※サンプルではテーマ「Dawn」を使用しています。その他のテーマを使用している場合は、テキスト表示系のセクションを選択してください。
サンプルではカラムを2列に調整しました。1つ目のカラムに投稿者、2つ目のカラムに店舗情報を表示するよう設定します。
各画像・テキスト表示設定の「動的ソースを接続」をクリックすると、作成したメタフィールドが表示されますので、画像・見出し・説明に対してそれぞれメタフィールドを選択します。
※作成したメタフィールドが表示されない場合、メタフィールドの設定に誤りがある可能性があります。メタフィールド作成のところから見直してみてください。
投稿者のセクション設定例
店舗のセクション設定例
メタフィールドに登録したメタオブジェクトデータが表示されました。お好みに合わせてテキストの大きさや位置を調整します。
最後に対象ブログ記事の管理画面に戻り、先ほど作成したテンプレートを割り当てて保存します。
※保存した時点でストア上にも反映されます。
こちらで投稿者・店舗情報の表示設定は完了です。
ブログ記事に関連した商品・投稿者・店舗情報が表示されました。
今回紹介した方法では、1つのブログ記事に対してそれぞれ1つの商品・投稿者・店舗情報の表示が可能です。
例えば、下記のように、複数の商品をメタフィールドに登録し、動的に表示させたいといった場合にはコーディングが必要となります。
FRACTAでShopify構築支援を行う際は、希望の管理方法、運用に合わせた最善の実装方法をご提案させていただいております。新規の設定や開発支援も、コストや期間と相談しながらの対応が可能です。今回紹介した方法の活用と併せて、ぜひご検討ください。
