Shopifyの商品ごとに異なるFAQを表示する方法を解説。メタオブジェクトとメタフィールドを組み合わせることで、運営スタッフが簡単にFAQを追加・管理できます。さらにJSON-LDで構造化データ化すれば、SEOやAIO対策にも有効です。
現在、Shopifyで構築したチケット販売サイトを運営している中で、スタッフから「公演ごとにFAQの内容が異なるため、それぞれ独自のFAQを設置したい」という声が上がりました。
商品詳細に直接書き込むのは手間がかかり、セクションを使うとなると商品ごとに異なるテンプレートを用意しなければならず、そのたびに新しいセクションファイルを作成する必要があります。
これでは運営の負担が大きく、更新も滞りがち。できれば、こうしたFAQの作成は運営スタッフ自身で対応できる仕組みにするのが理想的です。
そこで注目したのが、Shopifyの「メタオブジェクト」。この記事では、商品ごとにFAQを作成する際にメタオブジェクトを活用するプロセスを解説し、より効率的で柔軟な運営方法を共有していきます。
メタオブジェクトとは？
Shopifyには、ストアごとに独自のデータを格納し、必要に応じて呼び出せる仕組みが用意されています。
その代表的な機能が「メタフィールド」と「メタオブジェクト」。メタフィールドはシンプルに単一のデータを保存するのに向いており、例えば、Tシャツの商品ページに「コットン100%」と表示させたいといった用途で活用されます。
一方で、メタオブジェクトは複数のフィールドをひとまとまりの構造として扱える点が特徴。これにより、ストアに新しい管理リソースを追加するような柔軟な使い方が可能になります。
Shopifyに標準で存在する「Product」や「Blog」と同じように、自分専用の「マイオブジェクト」を設定できる、という感覚に近いと思います。
メタオブジェクトでFAQ – 手順
では実際に、メタオブジェクトを使って商品ごとのFAQを作成するプロセスを簡単に紹介します。
① オブジェクト定義の作成
管理画面の「設定 > メタフィールドおよびメタオブジェクト > オブジェクト定義」から新しいオブジェクトを作成します。ここでは便宜上「商品FAQ」を作るとします。
② メタオブジェクトの設計
「質問」「回答」「質問2」「回答2」「質問3」「回答3」‥といったフィールドを追加し、FAQの枠組みを整えます。
③ エントリーの追加
メインメニューの「コンテンツ > メタオブジェクト」で、作成したオブジェクトをクリックし、商品ごとのエントリーを登録します。たとえば「キムチ」専用のFAQを作成し、各質問と回答を入力します。
④ 商品メタフィールドの作成
再び「設定 > メタフィールドおよびメタオブジェクト」から、商品に紐づけるメタフィールドを作成します。
⑤ 参照設定
メタフィールドのデータタイプを「メタオブジェクト」に設定し、先ほど作成した「商品FAQ」を参照先に指定します。
⑥ 商品ページでの紐づけ
商品編集画面に新しいメタフィールドが表示されるので、該当商品（例：キムチ）に対応するエントリーを選択します。これで商品ごとに異なるFAQを呼び出せるようになります。
では、ここからは図を交えて具体的な手順を解説していきます。
オブジェクト定義の作成
下の図のように、メタオブジェクトのタイプ（ここで「 meta-faq」）を設定し、その中に必要なフィールドを追加します。
各フィールドには「キー」と呼ばれる識別子があり、例えば「meta-faq.que」のように指定します。
このキーは、メタオブジェクトのタイプとともに、後でLiquidコードから値を取得・表示する際に欠かせない要素となります。
今回は「質問」と「回答」を扱うため、各フィールドのデータタイプはシンプルに「1行テキスト」を選択するのが適切です。
メタオブジェクトのエントリーの追加
これでメタオブジェクトの定義は完了しました。次のステップは、実際の「エントリー」を追加する作業です。
エントリーとは、先ほど作成したメタオブジェクトの枠組みに従って入力される具体的なデータのまとまりを指します。いわば「ひな型（定義）」に対して「実体（コンテンツ）」を登録するイメージです。
例えば、商品FAQ というメタオブジェクトを用意しておけば、「キムチのFAQ」「冷麺のFAQ」「チヂミのFAQ」といったエントリーをそれぞれ作成し、質問と回答を入力していくことができます。こうすることで、商品ごとに独自のFAQを柔軟に管理できるようになります。
商品メタフィールドの作成
次のステップは、商品のメタフィールドを作成することです。
ここで設定するメタフィールドは、商品ごとにカスタムデータとしてメタオブジェクトを登録するための「受け皿」のような役割を果たします。
管理画面の「設定 > メタフィールドおよびメタオブジェクト」から新しいメタフィールドを作成し、対象は「商品」を選択します。
データタイプは「メタオブジェクト」とし、参照先には先ほど作成した「商品FAQ」を指定します。
これにより、商品編集画面で該当するFAQエントリーを簡単に選択できるようになり、商品ごとに異なるFAQを紐づけることが可能になります。
商品ページでの紐づけ
最後に行うのが、商品ページでの紐づけ作業です。
先ほど作成したメタフィールドは、商品編集画面に自動的に追加されます。
あとは各商品の管理画面を開き、該当するメタフィールド欄から適用したいエントリーを選択するだけです。例えば「キムチ」の商品ページであれば、先ほど登録した「キムチのFAQ」エントリーを選択します。
これで商品ページとFAQが結びつき、Liquidコードを通じて表示や構造化データ化ができるようになります。
FAQ(メタオブジェクト)取得と表示
では、どのようにメタオブジェクトのFAQを取得し、商品ページに表示すればよいのでしょうか。以下にサンプルのLiquidコードを紹介します。
{% assign faq_meta = product.metafields.custom.meta_obj %}
{% if faq_meta and faq_meta.value %}
{% assign faq = faq_meta.value %}
<div class="faq-block">
<h2>この商品に関するFAQ</h2>
{% if faq.que %}<h3 class="faq-question">Q.{{ faq.que }}</h3>{% endif %}
{% if faq.ans %}<p class="faq-answer">{{ faq.ans }}</p>{% endif %}
{% if faq.que2 %}<h3 class="faq-question">Q.{{ faq.que2 }}</h3>{% endif %}
{% if faq.ans2 %}<p class="faq-answer">{{ faq.ans2 }}</p>{% endif %}
</div>
{% endif %}このコードを商品ページのテンプレートやセクションに組み込むことで、商品ごとに紐づけたFAQエントリーが自動的に表示されます。
以上、Shopifyでメタオブジェクトとメタフィールドを活用して商品ごとにFAQを実装する方法でした。
ここではFAQを例に取り上げましたが、実際には「ピックアップ可能な店舗情報」や「割れやすい商品の配送注意点」など、商品ごとに異なる補足情報にも応用できます。
また、作成したFAQをJSON-LD形式でマークアップすることで、SEO対策はもちろん、LLMOやAIOといった新しい検索体験への効果も期待できます。運営の効率化と検索での可視性向上の両面から、導入を検討する価値は十分にあると思います。
