Shopifyの商品説明に目次を付けるには、説明文に見出しを設定し、RuffRuff 目次作成の「目次」ブロックを商品テンプレートに追加します。商品への表示にはRegular Planが必要です。
仕様、使い方、お手入れなどの説明が長い商品では、読みたい項目へ移動するための案内を用意できます。目次の項目は商品説明に設定した見出しから作られます。
当社が提供するアプリを使い、商品説明の整理からテーマへの設置、表示後の確認までを紹介します。Online Store 2.0対応テーマのアプリブロックを使う手順です。
プランと機能の確認日：2026年10月28日。
完成例：商品説明を5つの見出しで案内する
撮影用の架空商品「撮影用スノーボード」を例にします。商品説明を次のH2見出しに分け、目次から各項目へ移動できる構成にします。
- 商品の特徴
- 仕様
- 使い方
- お手入れ
- よくある質問
実際の商品では、購入前に探される説明を見出しにします。見出しだけを増やさず、各見出しの下に対応する説明を用意してください。短い商品説明なら、目次の必要性も含めて判断できます。
利用するプランとテーマを確認する
商品の目次表示はRegular Planの対象です。ブログ記事への表示条件と異なるため、導入前に利用中のプランを確認してください。
- RuffRuff 目次作成をインストールし、アプリを有効にする
- 商品説明に対象の見出しを設定する。初期値はH2とH3
- 作業前にテーマを複製し、複製したテーマで設定と表示を確認する
以前のテーマでは、商品向けの埋め込みアプリを使う方法があります。この記事のアプリブロックの追加手順は、Online Store 2.0対応テーマを対象としています。
商品説明の見出しを整える
目次は、商品編集画面に入力した説明文の見出しをもとに作られます。テーマエディタで別に追加したセクションの見出しは、目次項目の生成元に含まれません。
- 商品編集画面で説明文を開き、内容の区切りに見出しを設定します。
- 大きな項目をH2、その項目内の小さな項目をH3にします。文字を太くするだけでは見出しになりません。
- 説明文を保存し、編集画面を開き直して見出しの設定が残っているか確認します。
商品名を本文へ繰り返しH1として追加する必要はありません。目次に入れる範囲を考えながら、説明の順序と見出しの階層を揃えます。
商品テンプレートへ「目次」を追加する
商品説明を保存したら、複製したテーマの商品テンプレートへブロックを追加します。商品説明の編集と、テーマへのブロック設置は別の操作です。
- RuffRuff 目次作成を開き、「テーマにアプリを追加する」で作業用のテーマを選びます。
- 「商品 (Regular Plan)」の「アプリブロックを追加する」から商品テンプレートを開きます。
- 「ブロックを追加」または「セクションを追加」から、RuffRuff 目次作成の「目次」を追加します。
- テーマエディタで保存し、対象の商品をそのテーマのプレビューで開きます。
同じテンプレートを使う商品にも設置が適用されます。対象商品のテンプレートを確認し、ブロックを重複して追加しないようにしてください。
目次の位置と表示する見出しを調整する
「目次のカスタマイズ」の「利用する見出し」で、目次に含める見出しレベルを選びます。まずは初期値のH2とH3で、実際の説明文に合うか確認します。
表示位置の初期値は「最初の見出しの上」です。テーマエディタで置いた位置に表示したい場合は、「表示位置」を「テーマエディタで指定 (Online Store 2.0専用)」に変更して保存します。
「目次のカスタマイズ」で保存する見出し・表示位置・色などは共通設定です。変更すると、この設定を使う商品・固定ページ・ブログ記事などにも影響するため、ほかの表示先も確認してください。
保存後にPCとスマホ幅で操作する
- 商品ページを再読み込みし、目次に商品説明の見出しが並ぶか確認します。
- 「お手入れ」などの項目を選び、本文の同じ見出しへ移動するか確認します。
- 固定ヘッダーに見出しが隠れる場合は、スクロール時の上部余白とアニメーション設定を確認します。
- スマホ幅で目次の折り返し、横のはみ出し、項目の選びやすさを確認します。
スクロール時の上部余白は、アニメーションがオンのときに使われます。画像の遅延読み込みやテーマ側の処理による位置のずれは、この余白だけで直せない場合があります。
目次が表示されない場合の確認箇所
まず、商品のプラン条件、アプリの有効状態、ブロックを保存したテーマを確認します。そのうえで、説明文に選択中の見出しレベルが含まれるかを調べます。
ブロックを追加しただけでは、対象の見出しがない商品に目次項目は作られません。別の商品やページビルダーの内容を確認していないか、対象商品の説明文まで戻って確かめてください。
商品説明の構成と利用条件を確認して導入する
長い商品説明の中から特定の情報へ案内したい場合に、目次を検討できます。商品表示のプラン条件と最新の料金は、RuffRuff 目次作成の紹介ページで確認できます。
