前回の記事では、商品メタフィールドを作成し、FAQを登録する方法をご紹介しました。
今回は、そのFAQを実際に商品ページへ表示する方法を解説します。
テーマエディタの「動的ソース」を使えば、コードを書くことなく簡単に表示できます。
▼前回の記事
1. 商品メタフィールドを登録しただけでは表示されない
商品メタフィールドは、商品の情報を管理するための便利な機能ですが、登録しただけではストアには表示されません。
例えば、商品管理画面でFAQを登録しても、その情報はShopifyの管理画面に保存されているだけの状態です。
そのため、テーマエディタで「このFAQを商品ページに表示してください」と設定する必要があります。
つまり、商品メタフィールドは
「作成する」→「商品へ登録する」→「商品ページへ表示する」
という3つのステップで初めて活用できます。
2. テーマエディタを開く
それでは、実際に商品ページへFAQを表示していきましょう。
Shopify管理画面からオンラインストア → テーマを編集するをクリックします。
テーマエディタが開いたら、上部のページ選択から商品ページを選択してください。
今回は、FAQを表示したい商品のテンプレートを編集します。
3. 「折りたたみ可能な行」を追加する
次に、FAQを表示する場所を作ります。
左側の「セクション」または「ブロックを追加」をクリックし、
「折りたたみ可能な行（Collapsible row）」を追加します。
このブロックを使用すると、商品ページでは
▼ よくある質問
のような開閉式（アコーディオン）のデザインで表示できます。
FAQは文章量が多くなりやすいため、必要な時だけ開けるアコーディオン表示がおすすめです。
4. 動的ソースを設定する
作成したFAQメタフィールドとテーマを接続します。
折りたたみ可能な行の設定画面で、
- 見出し：「よくある質問」
- 行の内容：右側に表示される動的ソース（⚡）をクリック
すると、先ほど作成した商品メタフィールド「FAQ」が表示されます。
これを選択すれば設定は完了です。
保存すると、商品ごとに登録したFAQが自動的に商品ページへ表示されるようになります。
それぞれの商品に登録したFAQが自動で表示されるため、商品ごとにページを作り直す必要はありません。
5. 商品ページで確認する
商品ページを開くと、
▼ よくある質問
をクリックすると、登録したFAQが表示されます。
これで、お客様は購入前の疑問をすぐに確認できるようになります。
また、FAQを商品ページへ表示することで、ユーザーだけでなくGoogleやAIにも商品情報を伝えやすくなります。
6.まとめ
- 商品メタフィールドは入力しただけでは表示されない
- テーマエディタで接続すると商品ページへ反映できる
- テーマエディタの「動的ソース」設定
次回は、FAQを1問ずつ開閉できる「メタオブジェクト」を使った管理方法をご紹介します。
FAQが多い商品や、より見やすい商品ページを作りたい方におすすめの方法です。
