Shopify公式テーマDawnにFAQセクションを追加する方法

オンラインストアには質問と回答のセクションが不可欠です。顧客からの問い合わせに適切に対応することで、製品やサービスへの理解を深めてもらえるだけでなく、ブランドの信頼性も高まります。

Shopifyの公式テーマ「Dawn」にはFAQページが用意されていませんが、「動的セクション」と「ブロック」の機能を組み合わせれば、簡単にFAQセクションを作ることができます。今回は、その手順とカスタマイズ方法について詳しく解説していきます。

動的セクションとブロックとは

まずは「動的セクション」と「ブロック」について理解を深めましょう。これらの概念を把握することが、スムーズな作業に繋がります。

動的セクション

動的セクションとは、Shopify の Online Store 2.0 から導入された新機能です。従来はテーマエディターからセクションを追加できたのはトップページのみでした。しかし、この機能により、JSONテンプレートで作られたページならば、どのページでもテーマエディターからセクションを自由に追加・編集できるようになりました。

動的セクションを有効にするには、セクションファイル内の {% schema %} タグに presets 属性を記述する必要があります。この記述がないと、テーマエディターの「セクションを追加」から当該セクションにアクセスできません。

ブロック

ブロックは、テーマエディターから操作可能な、セクション固有のコンテンツブロックを指します。ブロックを使うと、セクション内にモジュール化された独立したパーツを自由に追加・削除・並び替えできるようになります。

項目数が可変で、自由な編集が求められる場合、ブロックの活用が適切です。商品情報セクションの「タイトル」や「価格」、「購入ボタン」といった個々のパーツがブロックとして実装されているのをイメージすると分かりやすいでしょう。

FAQセクションの作成手順

それでは、実際にDawnテーマにFAQセクションを追加していきましょう。

1. セクションファイルの作成

まず sections ディレクトリに faq.liquid ファイルを新規作成し、FAQのHTMLマークアップを記述します。以下がサンプルコードです。

<section class="page-width">
  <h3>{{ section.settings.title }}</h3>
  <dl>
    {% for block in section.blocks %}
      <dt>{{ block.settings.title }}</dt>
      <dd>{{ block.settings.answer }}</dd>
    {% endfor %}
  </dl>
</section>

HTMLの構造は自由に決めることができますが、以下の要素が含まれている必要があります。

• セクション全体のラッパー要素
• FAQのタイトル
• 質問と回答を出力する要素

FAQのタイトル部分には {{ section.settings.title }} を記述しています。この部分はテーマエディターから変更可能になります。

質問と回答は {% for block in section.blocks %} 内でループ出力しています。この部分もテーマエディターで変更できるようになります。

2. 動的セクションとして機能させる

次に、このセクションを動的セクションとして機能させるために、{% schema %} タグを追加します。

{% schema %}
{
  "name": "FAQ",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "default": "FAQ",
      "label": "FAQのタイトル"
    }
  ],
  "blocks": [
    {
      "type": "faq_item",
      "name": "FAQ項目",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "質問を入力してください"
        },
        {
          "type": "richtext",
          "id": "answer",
          "label": "回答を入力してください"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "FAQ"
    }
  ]
}
{% endschema %}

presets 属性を記述することで、テーマエディターから「セクションを追加」でこのFAQセクションを選択できるようになります。

settings を追加して id を title とすることで、テーマエディターからFAQのタイトルを変更可能にしています。

blocks を追加することで、質問と回答をテーマエディターから自由に追加・編集できるようになります。質問は type を text、回答は type を richtext としています。richtext を使うことで、回答に画像やリンク、HTMLタグを含めることができます。

これでテーマエディターからFAQのタイトル、質問、回答を自由に追加・編集できるようになりました。

さらなるカスタマイズ

ここまでの実装でかなり実用的なFAQセクションができましたが、さらにカスタマイズを重ねることで、よりユーザビリティの高いセクションを作ることができます。

FAQ項目が未入力の場合、セクション自体を非表示にする

FAQの項目が1つも登録されていない場合に、セクション自体を非表示にするには、{% unless %} 〜 {% endunless %} のタグを使います。

{% unless section.blocks.size > 0 %}
  <!-- セクションを非表示にする -->
{% endunless %}

この記述は、section.blocks の Size が 0 より大きい(=1つ以上のブロックが登録されている)場合のみ、内側のコードを実行するという意味になります。

カテゴリごとに質問・回答をグループ化する

特定のキーワードでFAQ項目をグループ化したい場合は、{% schema %} 内にキーワードを入力するブロック設定を追加します。そして {% case %} 〜 {% endcase %} でキーワードごとに出力を分岐させましょう。

"settings": [
  {
    "type": "text",
    "id": "category",
    "label": "カテゴリを入力してください"
  }
]

{% for block in section.blocks %}
  {% case block.settings.category %}
    {% when 'カテゴリA' %}
      <!-- カテゴリAの出力 -->
    {% when 'カテゴリB' %}
      <!-- カテゴリBの出力 -->
  {% endcase %}
{% endfor %} 

このように、シンプルな構造からニーズに合わせてカスタマイズを重ねることで、ユーザビリティが高く、運用しやすいFAQセクションを作ることができます。ぜひ様々な変更を加えながら、より良いFAQページを目指してみてください。