商品テンプレートに目次を追加すると、各商品の説明文の見出しから目次が表示されます。商品への表示はRegular Plan(画面では「🏢 Regular Plan」)で利用できます。
操作の前に、次を確認してください。
Regular Planを利用しています。Free PlanとLight Planでは、ホームの「商品 (Regular Plan)」行からテーマエディタを開けません。プランの詳細は「料金プランの違い」を確認してください。
ホーム画面でアプリが有効になっています。無効のあいだは、オンラインストアに目次は表示されません。
商品の説明文に、目次にする見出しがあります。初期値はH2とH3です。
Online Store 2.0対応テーマではアプリブロック、以前のテーマでは埋め込みアプリを追加します。追加していない場合、説明文に見出しがあっても目次は表示されません。
使い分けは「アプリブロックと埋め込みアプリの違い」を確認してください。
(1) テーマを選ぶ
Shopify管理画面 → アプリから「RuffRuff 目次作成」を開いてください。ホーム画面の「テーマにアプリを追加する」で、「テーマを選択する」から対象テーマを選んでください。Online Store 2.0対応テーマでは、「このテーマは Online Store 2.0対応のテーマです」と表示されます。
(2) 商品テンプレートのテーマエディタを開く
「商品 (Regular Plan)」の横にある「アプリブロックを追加する」を選択してください。商品テンプレートのテーマエディタが開きます。
テーマエディタでアプリブロック「目次」を追加し、保存します。
(3) 「目次」アプリブロックを追加する
「ブロックを追加」または「セクションを追加」から「目次」を追加し、右上の「保存」を選択してください。
任意: テーマエディタで指定した位置に表示する場合は、アプリの「目次のカスタマイズ」で「表示位置」を「テーマエディタで指定 (Online Store 2.0専用)」にして保存してください。その後、テーマエディタで「目次」を表示したい位置へ移動し、「保存」を選択してください。
ヒント: テーマエディタのプレビューでは、目次の上に青いメッセージが出ます。このメッセージはテーマエディタ上でのみ表示され、オンラインストアには出ません。
以前のテーマでは、埋め込みアプリを有効にします。
(3) 埋め込みアプリを有効にする
「商品 (以前のテーマ用)」をオンにして、「保存」を選択してください。
アプリブロックまたは埋め込みアプリを追加したテーマで、説明文にH2またはH3の見出しがある公開中の商品ページをオンラインストアで開いてください。目次が表示され、項目を選ぶと説明文のその見出しへ移動すれば完了です。
表示位置が初期値の「最初の見出しの上」の場合、目次は最初の対象見出しの直前に表示されます。アプリのホームでは、対象行が「設定済」になっていることも確認してください。
対象の見出しが1つもない商品では、目次は表示されません。
目次は、商品の説明文の見出しから作ります。初期値はH2とH3です。
対象: 商品の説明文に設定した見出し
対象外: テーマのセクションで追加した見出し
利用する見出しのレベルを変える手順は「目次のカスタマイズの設定項目」を確認してください。