ブログ記事だけでなく、商品ページやコレクション、Pagesなどにも目次を自動生成できる世界に1つしかないShopifyアプリです。
無料から利用でき、ノーコードで導入可能です。
文言やデザイン、スクロールのオン・オフ、目次の表示位置の調整など、様々なカスタマイズが可能です。また、ライブプレビュー機能で、リアルタイムで確認しながら目次のカスタマイズが可能です。引用元: RuffRuff 目次作成
下記の記事ではShopifyに目次を生成するアプリをご紹介していますので、ご参考にしてみてください。
まだShopifyのブログ機能を利用していない方は、下記の記事でShopifyのブログ機能について解説していますので参考にしてみてください。
Shopifyのブログ機能をフル活用しよう｜機能や拡張アプリを紹介
Shopifyブログ記事内のh2とh3タグを抽出して、目次を自動生成するスクリプトを作成しました。
このような目次が生成できます。
主な機能は下記のとおりです。
コード全体はTsun Inc.のリポジトリをご覧ください。
以下で実装方法を詳しく解説していきます！
実装に入る前に「RuffRuff 目次作成」という無料で利用できる目次作成アプリをリリースしています。実装に入る前に一度アプリを導入し、無料で実装時間を節約しませんか？
| アプリ名 | RuffRuff 目次作成 | 本記事のソースコード |
|---|---|---|
| 目次の自動生成 | ◯ | ◯ |
| 見出し選択 （目次に利用する） |
◯ h1~h6 |
✕ h2とh3のみ |
|
スクロール （Smooth Scroll） |
◯ | ✕ |
| 段落表示 | ◯ 3種類 |
✕ |
| 区切り線 | ◯ | ✕ |
| 字下げ （インデント） |
◯ | ◯ |
| カラー変更 | ◯ | ✕ |
| 開閉ボタン | ◯ | ✕ |
| 初期表示行数設定 | ◯ | ✕ |
| 特定記事で目次非表示 | ◯ テンプレートを分けて対応 |
✕ |
| 目次の表示位置調整 |
◯ 3種類 |
✕ 最初の見出し上のみ |
| ライブプレビュー | ◯ | ✕ |
|
商品ページに 目次表示 |
◯ | ✕ |
| コレクションページに 目次表示 |
◯ | ✕ |
|
Pagesに 目次表示 |
◯ | ✕ |
※ 今回の実装方法ではShopifyのテーマのコードを直接編集する方法をとるため、必ず事前にバックアップをしておいてください。
今回の実装では
の2つの工程を行います。
どちらの工程もコード編集画面から行いますので、
を行い、コード編集画面を表示しておいてください。
KOMARIさんの Shopifyテーマのローカル開発環境 -Shopify CLI- の記事がとても参考になるので、テスト方法が気になる方はぜひチェックしてみてください！
上記のように、JavaScriptのコードをテーマに追加することで目次を自動で生成することができました。
目次部分のデザインや抽出するタグ、生成するタグのIDなど適宜修正して、お好みに合わせた形でご利用ください。
目次の自動生成する無料のShopifyアプリ「RuffRuff 目次作成」を作りました。
オリジナルデザインの目次を簡単にブログ記事に追加したい場合は一度お試しください。
2022年12月にリリースしたばかりの最新Shopifyアプリです。無料から利用でき、OS2.0対応のShopifyテーマならノーコードで導入可能です。文言やデザイン、スクロールのオン・オフ、目次の表示位置の調整など、様々なカスタマイズが可能です。また、ライブプレビュー機能で、リアルタイムで確認しながら目次のカスタマイズが可能です。引用元: RuffRuff 目次作成
料金
$0 / 月〜
機能
Tsun Inc. CTOの小笠原です！今回はShopify APIをPostmanで簡単に実行するノウハウをまとめました。 Shopify APIに限...
EコマースやShopifyの初学者にとって、できるだけ “やさしく” “わかりやすく” “正確に” 難しいコマース用語やマーケティング用語、ストア構築から販売までの仕組み・ノウハウを伝えることを心がけて、記事コンテンツを作成しています。
掲載している各種情報は、株式会社Tsunが経験および、調査した情報をもとにしています。できるだけ“最新“かつ“正確“な情報の掲載に努めておりますが、内容を完全に保証するものではありません。当サイトによって生じた損害について、株式会社Tsunではその賠償の責任を一切負わないものとします。掲載情報に誤りがある場合には、お手数ですが株式会社Tsunまでご連絡をいただけますようお願いいたします。
