ShopifyでFAQを商品ページへ自動表示する方法【カスタムセクション編】

2026年8月2日2026年9月2日

前回の記事では、Shopifyのメタオブジェクトを使ってFAQを一問ずつ登録し、商品管理画面から各商品に必要なFAQを紐づける方法を紹介しました。

Lunariq Studio（ルナリックスタ…

ShopifyでFAQを一問ずつ登録する方法 | Lunariq Studio（ルナリックスタジオ）前回の記事では、リッチテキストを使ってFAQを商品メタフィールドへ登録する方法をご紹介しました。しかし、FAQが増えてくると、1つの入力欄で管理するのは見づらく、更新…

ただし、テーマ標準の「折りたたみ可能なコンテンツ」を使う方法では、質問と回答を一行ずつ設定する必要があり、

FAQを追加・変更するたびにテーマカスタマイズ画面を開くのは手間がかかります。

今回はカスタムセクションを作成し、商品管理画面で選択したFAQだけを商品ページへ自動表示する方法を紹介します。

この記事でわかること

商品メタフィールドに登録されたFAQをLiquidで取得する方法
複数のFAQを繰り返し表示するカスタムセクションの作り方
FAQをアコーディオン形式で表示する方法
商品ごとに表示内容が自動で切り替わる仕組み

1. カスタムセクションで実現すること

そもそもここで何をやろうとしているのか？ゴールをもう一度明確にしておきます。

現在表示している商品のメタフィールドを読み込む
商品に紐づけられたFAQだけを取得する
登録された件数分、質問と回答を自動で繰り返し表示する
FAQが登録されていない商品ではセクションを表示しない

2. 作業前にテーマを複製する

使用中のテーマを確認、バックアップを行う

今回はテーマ：Dawnを前提に説明します。

Shopify管理画面「オンラインストア」より、公開中テーマファイル名”Dawn_20260830”（仮名）を複製し、バックアップを取っておきます。

公開中テーマの「…」メニューから「複製」を選択します。

複製が完了すると、下セクションの「下書きテーマ」に”Dawn_20260830のコピー”が作成されます。

テーマのバックアップを作成して、問題が発生した時コード編集前の状態にいつでも戻せるようにしておきます。

3. FAQ用のカスタムセクションを作成する

テーマのコード編集画面を開く

公開中テーマの「…」メニューから「コードを編集」を選択し、コード編集画面に切り替えます。

新規セクションファイルを作成する

画面左の”section”フォルダを開き、”New File”を選択して新しいセクションファイルを作成します。

例として名前は”product-faq.liquid”としておきます。

ファイル名は半角英数字とハイフンを使用し、また、後から内容がわかる名前にしておくことをおすすめします。

4. 商品に登録されたFAQを取得する

前回の記事「ShopifyでFAQを一問ずつ登録する方法」にて紹介した「4. 商品とFAQをつなぐメタフィールドを作る」までの手順が完了していることを前提とします。

商品メタフィールドを変数へ入れる

”product-faq.liquid”へ次のコードをそのまま貼り付けます。

{% assign product_faqs = product.metafields.custom.product_faqs.value %}

{% if product_faqs != blank %}
<section class=”product-faq”>
<h2>{{ section.settings.heading }}</h2>

{% for faq in product_faqs %}
<div class=”product-faq__item”>
<h3 class=”product-faq__question”>
{{ faq.question.value }}
</h3>

<div class=”product-faq__answer”>
{{ faq.answer | metafield_tag }}
</div>
</div>
{% endfor %}
</section>
{% endif %}

{% schema %}
{
“name”: “商品FAQ”,
“settings”: [
{
“type”: “text”,
“id”: “heading”,
“label”: “見出し”,
“default”: “よくある質問”
}
],
“presets”: [
{
“name”: “商品FAQ”
}
]
}
{% endschema %}