アプリをインストールしたあとは、まずブログ記事に目次を表示してください。設定がまだない状態でアプリを開くと、ホームではなくオンボーディング画面が開きます。
Online Store 2.0対応テーマではアプリブロック、以前のテーマでは埋め込みアプリを使います。使い分けは「アプリブロックと埋め込みアプリの違い」を確認してください。
RuffRuff 目次作成をインストールしています。
アプリが有効です。ホーム画面の右上に「アプリを無効にする」がある状態です。
ブログ記事の本文に、目次にする見出しがあります。「利用する見出し」の初期値は h2 と h3 です。
商品、ページ、またはコレクションに表示する場合は、Regular Planを利用しています。
公開中のブログ記事がない場合、ホームの「ブログ記事」行とオンボーディングに警告が出ます。テーマエディタを開くリンクは使えます。表示を確認するには、見出しを含む公開中のブログ記事を1件以上用意してください。
設定がまだない状態でアプリを開くと、オンボーディング画面「さっそく目次を作ってみましょう！」が開きます。
(1) ブログ記事で利用している見出しタグを選択する
画面の案内に沿って見出しタグを選び、「次へ」を選択してください。この設定は後で変更できます。
(2) テーマにアプリブロックを追加する
「アプリブロックを追加する」を選択してください。Online Store 2.0対応テーマでは「目次」アプリブロックを追加し、以前のテーマでは「ブログ記事 (以前のテーマ用)」を有効にしてください。
公開中のブログ記事がない場合は、「テーマにアプリブロックを追加するには、公開中のブログ記事が必要です」という警告が出ます。警告が出ても、テーマエディタを開くリンクは使えます。
テーマエディタで「保存」を選択し、オンボーディング画面に戻って「次へ」を選択してください。
(3) プランを選択する
画面の案内に沿ってプランを選択してください。ブログ記事への表示は、すべてのプランで利用できます。
オンボーディングでアプリブロックの追加または埋め込みアプリの有効化を済ませた場合は、次の「ホーム画面からテーマに目次を追加する」は不要です。テーマを変えたときや、追加し直すときに使ってください。
Online Store 2.0対応テーマでは、ホームの「テーマにアプリを追加する」から対象テーマを選び、行の「アプリブロックを追加する」へ進みます。
(1) テーマを選ぶ
Shopify管理画面 → アプリから「RuffRuff 目次作成」を開いてください。ホーム画面の「テーマを選択する」から対象テーマを選んでください。Online Store 2.0対応テーマでは、「このテーマは Online Store 2.0対応のテーマです」と表示されます。
(2) ブログ記事のテーマエディタを開く
「ブログ記事」の横にある「アプリブロックを追加する」を選択してください。ブログ記事テンプレートのテーマエディタが開きます。追加済みの行には「設定済」と表示されます。
商品、ページ、コレクションの行名は「コレクション (Regular Plan)」「ページ (Regular Plan)」「商品 (Regular Plan)」です。これらの行は、Regular Planのときだけ開けます。対象行に「アップグレードして利用する」と出る場合は、プランを確認してください。
(3) 「目次」アプリブロックを追加する
テーマエディタの左側で「ブロックを追加」または「セクションを追加」を選択し、「目次」を追加してください。表示したい位置へ移動し、右上の「保存」を選択してください。
テーマエディタのプレビューでは、目次の上に表示位置を案内する青いメッセージが出ます。このメッセージはテーマエディタだけに表示され、オンラインストアには表示されません。
Online Store 2.0以前のテーマでは、埋め込みアプリを使用します。ホーム画面の「テーマを選択する」で対象テーマを選ぶと、「このテーマは Online Store 2.0以前のテーマです」と表示されます。
(1) 埋め込みアプリの画面を開く
「ブログ記事」の横にある「アプリブロックを追加する」を選択してください。テーマエディタの埋め込みアプリが開きます。
(2) 「ブログ記事 (以前のテーマ用)」を有効にする
「ブログ記事 (以前のテーマ用)」を有効にして、「保存」を選択してください。
任意: 色や余白、利用する見出しは、あとから変更できます。アプリ内メニューの「目次のカスタマイズ」を開き、項目を変更して「保存」を選択してください。詳しくは「目次のカスタマイズの設定項目」を確認してください。
アプリブロックまたは埋め込みアプリを追加したテーマで、見出しを含む公開中のブログ記事をオンラインストアで開いてください。目次が表示され、項目を選ぶと本文のその見出しへ移動すれば完了です。
各コンテンツへの表示方法は、次の記事を確認してください。