ShopifyでFAQを一問ずつ登録する方法

前回の記事では、リッチテキストを使ってFAQを商品メタフィールドへ登録する方法をご紹介しました。

しかし、FAQが増えてくると、1つの入力欄で管理するのは見づらく、更新もしづらくなります。

そこでおすすめなのがメタオブジェクトです。

メタオブジェクトを利用すると、質問と回答を1セットずつ管理できます。

商品ページでも1問ずつ開閉できる見やすいFAQを作成できます。

メタオブジェクトとは？

メタフィールドとメタオブジェクトの違い

メタフィールドとメタオブジェクトの違いは、以下のように認識するといいかと思います。

メタフィールド➞「１個の商品に設定できる追加情報」

メタオブジェクト➞「複数の商品に何度も使い回せる追加情報」

メタフィールド	メタオブジェクト
商品ごとの追加情報	共通データを管理する仕組み
その商品だけに保存	複数の商品から参照できる
一度しか使わない情報向き	FAQ・スタッフ紹介・ブランド情報など繰り返し使う情報向き

「質問」と「回答」を1セットで管理できる

メタオブジェクトは、「質問」と「回答」のように、複数の項目をひとまとまりのデータとして管理できる仕組みです。

例えばFAQなら、1つのメタオブジェクトに次のような情報をセットで登録できます。

• 質問：洗濯機で洗えますか？
• 回答：ネットに入れて弱水流で洗ってください。

この「質問」と「回答」を1つのデータとして保存しておけば、商品ページではそのセットを呼び出すだけで表示できます。

同じFAQを複数の商品で使い回すことも可能です。

もし回答内容を変更したくなった場合でも、メタオブジェクトを1か所修正するだけで、そのFAQを利用しているすべての商品ページに反映されます。

このように、関連する情報をセットで管理し、複数の場所で再利用できることが、メタオブジェクトの大きな特徴です。

メタオブジェクト「商品FAQ」の定義を作る

メタオブジェクトの画面を開く

Shopify管理画面の左下にある「設定」をクリックします。

次いで「メタフィールドとメタオブジェクト」➞「定義を追加」を選択します。

メタオブジェクトの名前を入力する

「名前」に、「商品FAQ」と入力します。 

名前を入力すると、タイプが自動生成されます。タイプには「product_faq」と入力します。

これはShopifyが内部で使用する識別子です。後でLiquidコードを書くため、英数字の分かりやすい名前にしておきます。

「質問」フィールドを追加する

フィールドセクションの「フィールドラベル」と書かれた欄に、「question」と入力します。 

「question」は「単一行テキスト 」を選択。

続いて＋フィールドを追加して、「answer」と入力します。 

「answer」は「リッチテキスト 」を選択。

「説明」は、管理担当者向けに次のような説明を入れます。

フィールドキーを確認する

フィールドキーがそれぞれ、「question」「answer」になっていることを確認。

保存後に日本語へ変更する

英語のままでは入力画面が分かりにくいため、保存後に表示名だけ日本語へ変更します。

questionを「質問」に変更

answerを「回答」に変更する

フィールドキーがそれぞれ、「question」「answer」のままであることを確認。

ストアフロントアクセスを確認する

画面を下にスクロールし、「メタオブジェクトのオプション」を探してください。

次の項目「ストアフロントアクセス」が表示されている場合は、ONにします。

今回、FAQを商品ページに表示するために必要な設定です。

メタオブジェクト定義を保存する

画面右上の「保存」をクリックします。

これで、「1件のFAQは質問と回答のセットである」という入れ物が完成します。

この段階では、まだ実際の質問・回答は登録されていません。

FAQを登録する

メタオブジェクト一覧を開く

Shopify管理画面の左側メニューから、「コンテンツ」➞「メタオブジェクト」の順にします。

一覧の中に、先ほど作成した次の名前が表示されます。

さきほど定義した「商品FAQ」をクリックします。

1件目のFAQを登録する

画面右上の「エントリーを追加」をクリックします。

「質問」「回答」の、2つの入力欄が表示されますので、それぞれに例として以下のように入力します。

Q1. 洗濯機で洗えますか？

A1. はい。洗濯ネットを使用し、弱水流で洗濯してください。タンブル乾燥は避け、形を整えて陰干ししてください。

ステータス「Active」にハンドルは「q-1」と指定し、保存します。

FAQ設定を5～10問分繰り返す

再び「エントリーを追加」をクリックし、同じ作業を繰り返します。

5～10問と必要なFAQを追加していきます。

この時点では、ストア全体で利用するFAQ候補を登録している状態です。

次に「どの商品にどのFAQを表示するか」を設定します。

商品とFAQをつなぐメタフィールドを作る

商品メタフィールドを開く

ここは、最初の商品メタフィールドの画面で設定します。

設定　➞　メタフィールドとメタオブジェクト　➞　商品　➞　商品のメタフィールドの定義　➞　定義を追加する

以上の順序で定義を追加します。

名前を設定する

「名前」に「商品FAQ」を入力します。

名前を入力すると、ネームスペースとキーが自動生成されるので「custom.product_faqs」に設定します。

タイプを選択する

「タイプを選択」をクリックします。

メタオブジェクト　➞　商品FAQを選択します。

これが先程セクション2、３で設定したメタオブジェクトにあたります。

これで、「この商品メタフィールドでは、商品FAQのエントリーを選択できるようにする」という設定が完了しました。

「値のリスト」を選択する

タイプ欄で「エントリのリスト」を選択します。

これで、1つの商品にFAQを5〜10問紐づけられるようになります。

最後に「保存」をクリックして設定を保存します。

商品ページへ表示する

商品管理より、FAQを設定する商品を開く

商品メタフィールドが完成したら、商品ごとに表示するFAQを選びます。

商品管理　➞　FAQ設定する対象商品のページ　➞　商品のメタフィールド　へ移動します。

その中に、項目「商品FAQ」が表示されているはずです。

FAQを選択する

「商品FAQ」をクリックすると、先ほど登録したFAQが一覧表示されるので、この商品に表示したいFAQを選択します。

商品によって、ここで設問を選択できるので自由度が高いです。

ここではQ1「洗濯機で洗えますか？」を表示選択し、保存をクリックします。

商品ページテンプレートで設定する

オンラインストア ➞ テーマを編集する ➞ 商品 ➞ デフォルトの商品 を選択し、

テンプレート ➞ セクションを追加 で「折りたたみ可能なコンテンツ」を設定します。

ちなみにテーマは「DAWN」です。

「見出し」をFAQに変更し、折りたたみ可能な行のひとつを選択します。

行のひとつを選択後に、「見出し」で「動的ソースの連携」（円柱が重なったようなマーク）をクリックし、

メタオブジェクト　➞　商品FAQ　➞　Q1.洗濯機で洗えますか？　➞　質問　を選択します。

続いて、下の「行のコンテンツ」で同じく「動的ソースの連携」をクリックし、

Q1.洗濯機で洗えますか？　➞　回答　を選択します。

こうして下画像のように商品ページに、「質問」と「回答」が表示されます。

6.まとめ

今回は、Shopifyのメタオブジェクトを使って、FAQを一問ずつ登録・管理する方法をご紹介しました。

この方法なら、FAQを複数の商品で再利用できるため、運営効率が向上し、商品ごとに必要なFAQだけを紐付けることもできます。

次回は、商品管理画面から登録したFAQだけを商品ページへ自動表示するカスタムセクションの作成方法をご紹介します。

これにより、商品ごとに設定したFAQだけを簡単に表示できるようになります。