ShopifyのFAQやご利用ガイドに目次を付けるには、固定ページの本文に見出しを設定し、RuffRuff 目次作成の「目次」ブロックをページテンプレートへ追加します。固定ページへの表示にはRegular Planが必要です。
注文、配送、返品などの案内が1ページにまとまっている場合、目次から必要な項目へ移動できるようにします。見出しに使う項目と、質問を置く順番を先に決めておくと設定しやすくなります。
この記事では、当社のアプリを使い、固定ページ本文で作るガイドを例に設定します。Online Store 2.0対応テーマのアプリブロックを使います。
プランと機能の確認日：2026年10月28日。
完成例：ご利用ガイドの大項目へ案内する
撮影用の架空ページ「ご利用ガイド（撮影用デモ）」を例に、本文を次の4つのH2見出しに分けます。目次から「配送について」などを選び、その説明へ移動できる構成です。
- ご注文について
- 配送について
- 返品・交換について
- お問い合わせ
実際のページでは、ストアで定めた販売条件に合わせた本文を用意します。サンプルの説明文を、そのままストアの送料や返品条件として使わないようにしてください。
固定ページの目次に必要な条件
固定ページへの表示はRegular Planで利用できます。アプリをインストールし、有効にしたうえで、対象のページテンプレートにブロックを設置します。
作業前にテーマを複製して、複製したテーマで表示を確認してください。公開中のガイド本文を変える場合は、本文の変更が公開ページにも影響することを踏まえて作業します。
目次項目の生成元は、ページ編集画面の本文です。テーマエディタで追加した別セクションや、テーマの折りたたみ項目の見出しは抽出対象外です。目次に載せる見出しは、固定ページの本文に設定してください。
案内をH2、必要な質問をH3に整理する
目次に含める範囲を決めてから、本文の見出しを設定します。初期設定ではH2とH3が対象になるため、大項目の下に質問をH3で置くと、質問も目次に含まれます。
- ページ編集画面でガイド本文を開き、注文・配送・返品などの大項目をH2にします。
- 質問ごとに案内したい場合は、H2の下へH3の質問と回答を追加します。
- 本文を保存し、編集画面を開き直して、文字の太さだけでなく見出しとして設定されているか確認します。
質問が多いページでは、大項目だけを目次に表示する構成も選べます。その場合は「利用する見出し」でH2だけを選びます。「利用する見出し」は共通設定です。H2だけに変更すると、目次を表示しているほかの商品・固定ページ・ブログ記事などでもH3が対象から外れます。
ページテンプレートへ「目次」を追加する
ガイド本文を保存したら、作業用テーマのページテンプレートを開きます。ガイドに割り当てているテンプレートと、編集するテンプレートが同じか確認します。
- RuffRuff 目次作成の「テーマにアプリを追加する」で、複製した作業用テーマを選びます。
- 「ページ (Regular Plan)」の「アプリブロックを追加する」からページテンプレートを開きます。
- 「ブロックを追加」または「セクションを追加」から「目次」を追加します。
- テーマエディタで保存し、ガイドをそのテーマのプレビューで開きます。
同じテンプレートを使うほかの固定ページにも設置が適用されます。ガイド専用の構成にしたい場合は、ページテンプレートの使い分けを検討してください。
表示位置と目次の長さを調整する
初期の表示位置は「最初の見出しの上」です。本文を読み始める前に案内を見せられるか、実際のページで確認してください。
テーマエディタで配置した位置に出す場合は、「目次のカスタマイズ」の「表示位置」を「テーマエディタで指定 (Online Store 2.0専用)」に変更します。本文の変更と位置の設定をまとめて保存したつもりにならず、それぞれの保存を確認します。
質問まで含めると目次が長くなる場合は、H2だけにする方法と、「開閉ボタンを表示する」や「目次の初期表示行数」を使う方法があります。案内の見つけやすさと、本文を読み始めるまでの長さを見比べて決めます。
案内先とスマホ幅の表示を確認する
- ガイドを再読み込みし、目次の項目が保存した見出しと一致するか確認します。
- 「返品・交換について」などを選び、本文の同じ見出しへ移動するか確かめます。
- 固定ヘッダーがある場合は、移動した見出しが隠れないか確認します。
- スマホ幅で見出しの折り返しや目次の横はみ出し、質問と回答の読みやすさを確認します。
ガイド本文を更新したときも、見出しと目次の対応を確認します。質問を追加した場合は、目次の件数や並びが意図した構成になっているか見直してください。
表示されない場合は本文と設置先を確認する
対象プラン、アプリの有効状態、ページに割り当てたテンプレート、保存したテーマを順に確認します。本文に「利用する見出し」で選んだレベルが1つもない場合は、目次は表示されません。
本文へ入力した見出しと、テーマ側の別セクションに置いた見出しを分けて確認してください。本文外の情報も案内したい場合は、ページの構成自体を先に見直す必要があります。
ガイドの情報設計に合わせて導入する
複数の案内が1ページにまとまっているガイドでは、目次で大項目や質問へ案内できます。利用条件と最新の料金を確認し、実際のページの長さに合う構成を選んでください。
