🐶

【ノーコード】無料でShopifyに目次を表示する方法

2024/05/24に公開

Shopifyのブログ記事にコーディングなしで簡単に目次を表示する方法を、Shopifyアプリ「RuffRuff 目次作成」を使って紹介します。無料で利用でき、ブログ記事だけでなく商品ページやコレクション、Pagesで作成したページにも目次を表示できるため、ショップオーナーの方々に便利なアプリとなっています。

Shopifyアプリ「RuffRuff 目次作成」とは?

https://www.youtube.com/watch?v=8DTt9nXd3xE

RuffRuff 目次作成は、コンテンツ内の見出しを利用して目次を自動で生成し、表示してくれるShopifyアプリです。無料から利用することができ、ブログ記事だけでなく、商品ページやコレクションページ、Pagesで作成したページなどにあらゆるページで目次を表示することが出来ます。また、日本で初めて最高品質アプリの証である「Built for Shopify」を獲得したShopifyアプリです。

【アプリのインストールはこちら】

料金プラン

Shopifyのブログ記事に目次を自動生成し、表示するのはRuffRuff 目次作成の無料プランから可能です。

プラン名 フリープラン ライトプラン レギュラープラン
料金 無料 月額3.99ドル 月額9.99ドル
ブログ記事に目次を表示
商品に目次を表示
コレクションに目次を表示
ページに目次を表示
目次のデザイン変更
目次の表示位置の変更
ライブプレビュー
ブランドの非表示 (RuffRuff App by Tsun)
見出しID生成方法の変更(見出しを利用したアンカーリンク)
開閉ボタンの表示
初期表示行数の変更

【アプリのインストールはこちら】

アプリを利用してブログ記事に目次を表示する方法

事前準備

① Shopifyのブログ機能を利用して、見出しの存在するブログ記事をご準備してください。
見出しは、下記添付画像のハイライト箇所のようにコンテンツエディターの「A」をクリックすることで、ブログ記事内に追加することができます。
Shopifyでブログ記事に見出しを追加する方法

② RuffRuff 目次作成をインストールしてください。
本章の設定は「RuffRuff 目次作成」のインストールが完了している状態からの説明となりますので、まだインストールが済んでいない方は、【アプリのインストールはこちら】 よりインストールをお願いします。

アプリ側の設定方法

ShopifyテーマがOS2.0(Online Store 2.0)の場合

https://www.youtube.com/watch?v=Di5Y2KfTx7g
ブログ記事に目次を表示するまでの設定方法は下記2ステップのみです
① 目次に利用する見出しを選ぶ
② Shopifyテーマにアクセスし、アプリブロックを追加する

Shopifyテーマが以前のテーマ(Vintageテーマ)の場合

https://youtu.be/-JJBDHw9HxY
ブログ記事に目次を表示するまでの設定方法は下記2ステップのみです
① 目次に利用する見出しを選ぶ
② Shopifyテーマにアクセスし、埋め込みアプリを有効化する

最後に

今回はShopifyアプリ「RuffRuff 目次作成」を利用してブログ記事に目次を自動で表示する方法を紹介しました。本アプリは無料プランから利用可能で、ブログ記事だけでなく商品ページやコレクション、Pagesで作成したページにも目次を表示できる機能が魅力です。ショップオーナーの方々の記事構成を見やすくするのに役立つアプリだと思います。 実際に「RuffRuff 目次作成」を使ってみて、ブログ記事の目次を表示してみてはいかがでしょうか。

関連記事
https://tsun.ec/blogs/articles/21
https://tsun.ec/blogs/articles/26
https://fuji3.shop/blogs/shopify/how-to-display-a-table-of-contents-in-shopify
https://zenn.dev/tsuninc/articles/3c3b1338c10bd0

Tsun Inc.

Discussion