FAQ の検索バーが公開されると、Kestrel の創業者から別のリンクが届きました。カラーのヘッダー、中央の検索ボックス、トピック別の質問、下部の「まだ質問がありますか？」バーを備えた競合のヘルプページです。これとまったく同じものを、今の FAQ ページに手を付けずに新しいテンプレートとして作れますか？ 翌日には2つ目の依頼が来ました。それと、内容もすべて入れてもらえますか？ 自分たちで入力しなくて済むように。
この事例では、両方を取り上げます。Shopify FAQ ページテンプレートそのものと、地味ながら欠かせない、本当に正しい41の回答を書く作業です。
この事例について：実際の Shopify プロジェクトをもとに再構成したものです。ブランド名と一部の詳細は変更しています。セクションのコード、直面した制限、コンテンツの問題は実際に対応したとおりです。
プロジェクト概要
| 納品物 | 新しいセクション1つ、新しいページテンプレート1つ、既存ファイルの変更なし |
| レイアウト | 検索付きカラーヘッダー、カテゴリー別アコーディオン、問い合わせバー |
| コンテンツ | 7カテゴリー、41の質問。ストア自身のポリシーをもとに作成 |
| 構造化データ | 質問ブロックから生成する FAQPage の JSON-LD |
| 編集 | 見出し、質問、回答、色をすべてテーマエディタで編集可能 |
ほかを壊さないための新しいテンプレート
既存の FAQ ページは、テーマ標準の FAQ セクションと横に並んだ問い合わせフォームで構成されていました。それを作り直す代わりに、独立したセクション faq-page.liquid と、それを使うページテンプレート page.faq-2.json を作成しました。マーチャントは管理画面でテンプレートをページに割り当てるだけです。切り替えるまで古いページはそのまま動き、元に戻すのもドロップダウンひとつです。
セクションの構造
セクションには カテゴリー と 質問 の2種類のブロックがあり、ひとつのフラットなリストに並びます。テーマエディタでは分かりやすく、各質問はその上のカテゴリーに属し、ブロックをドラッグすればカテゴリー間を移動できます。Liquid では、小さなループがカテゴリーごとに新しいグループを開き、前のグループを閉じます。
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'category' -%}
{%- unless forloop.first -%}</div>{%- endunless -%}
<div class="faqp__group" data-faqp-group>
<h2>{{ block.settings.title | escape }}</h2>
{%- when 'question' -%}
<details class="faqp__item" data-faqp-item>…</details>
{%- endcase -%}
{%- if forloop.last -%}</div>{%- endif -%}
{%- endfor -%}- 標準のアコーディオン。各質問は
<details>要素なので、開閉に JavaScript は不要で、キーボードでも操作できます。 - 検索を内蔵。以前の snippet と同じ絞り込みロジックを、セクション内に限定し、検索時に項目を探す形で組み込みました。
- FAQPage 構造化データ。セクションが質問ブロックから JSON-LD を出力するので、マークアップは常にページの内容と一致します。
- コードではなく設定で。ヘッダーの色、文字色、ボタンの色、プレースホルダー、結果なしの文言、問い合わせボタンは、すべてテーマエディタの設定項目です。
誰も教えてくれない制限：50ブロック
最初のコンテンツ案は7カテゴリーと49の質問、合計56ブロックでした。Shopify ではひとつのセクションに入れられるブロックは最大50で、それを超えるテンプレートは保存できません。カテゴリーもブロックとして数えられます。
内容を41の質問、合計48ブロックに絞り、あと2つ追加できる余地を残しました。何を削るかは簡単に決まりました。理由は次の章で説明します。50件を超える項目が必要なストアは、同じテンプレートにこのセクションをもうひとつ追加できます。たとえば注文用と商品用に分ける方法です。
正しい41の回答を書く
マーチャントからは「あちらと同じような」内容で埋めてほしいと頼まれました。他社のヘルプ文をコピーすることは最初から選択肢にありません。他社のポリシーはこのストアのポリシーではなく、文章もその会社のものです。そこで、すべての回答をマーチャント自身の情報源から書きました。返金ポリシー、配送ポリシー、保証ページ、商品ページ、そしてフッターに表示されている決済方法です。
丁寧に作業した結果、マーチャントが気付いていなかったことが明らかになりました。ストア自身の情報が4か所で食い違っていたのです。
| 送料無料の条件 | 旧 FAQ では70ユーロ以上、商品ページとサイトのバーでは30ユーロ以上 |
| 返品期限 | 返金ポリシーでは30日、旧 FAQ と商品ページでは90日 |
| 返品送料 | ポリシーではお客様負担、商品ページでは「返品無料」 |
| バッテリー持続時間 | 商品の特徴欄では120分、その商品自身の FAQ では90分 |
私たちは黙ってどちらかを選ぶことはしませんでした。法的なポリシーがある項目は FAQ をそれに合わせ、各矛盾と私たちの選択をまとめた短いリストをマーチャントに渡し、判断と元のページの修正をお願いしました。また、サイトのどこでも確認できなかった回答2つは、推測で書かずに削除しました。そのおかげで50ブロック以内に収めるのは簡単でした。
クリックではなくファイルでコンテンツを管理
テーマエディタで48ブロックを手入力するのは時間がかかり、ミスも起きやすい作業です。質問は小さなコンテンツファイルで管理し、スクリプトでテンプレートの JSON を生成しました。マーチャントが矛盾について判断すれば、テンプレートの再生成は数秒で終わります。導入後も、各回答はテーマエディタで通常どおり編集できます。
導入手順
- コードエディタでセクション
faq-pageを作成し、セクションファイルを貼り付けます。 faq-2という名前のページテンプレート（JSON）を作成し、テンプレートファイルを貼り付けます。テンプレートがセクションを参照するため、先にセクションが必要です。- オンラインストア → ページで FAQ ページを開き、テンプレート
faq-2を選びます。
どの FAQ プロジェクトでも行うこと
- 記憶や競合ではなく、ポリシーをもとに書く。
- 公開前に矛盾を探す。返金ポリシーと食い違う FAQ は、防ぐはずだった問い合わせを生みます。
- コンテンツを書く前に、50ブロックの上限を計画に入れる。
- コンテンツは再生成できるファイルで管理し、マーチャントがほかのテンプレートと同じように編集できる形で納品する。
このようなヘルプページや、お客様の疑問に本当に答える FAQ をお考えですか？ Shopify テーマ開発サービスをご覧いただくか、お問い合わせください。
よくある質問
アプリなしで Shopify の FAQ ページを作れますか？
はい。カテゴリーと質問のブロック、標準のアコーディオン、小さな検索スクリプトを備えたカスタムセクションで、多くの FAQ アプリと同じことができます。月額料金も、全ページに読み込まれる追加スクリプトもありません。
FAQ の構造化データで Google のリッチリザルトに表示されますか？
2023年以降、Google が FAQ のリッチリザルトを表示するのは、主に知名度の高い政府機関や医療系のサイトです。構造化データは引き続き有効で、検索エンジンがページを理解する助けになりますが、多くのストアでは展開型の FAQ スニペットは期待しないほうがよいでしょう。
ひとつの FAQ セクションにいくつ質問を入れられますか？
Shopify のセクションには最大50ブロックまで入れられ、カテゴリーも数に含まれます。それ以上必要なら、同じテンプレートに2つ目の FAQ セクションを追加してください。
あとからチームで質問を編集できますか？
はい。カテゴリー、質問、回答はすべてテーマエディタのブロックです。追加、削除、並べ替えにコードは不要です。