🐶

【コーディング不要】無料でShopifyに目次を表示する方法

2024/05/24に公開

本ページでは、Shopifyアプリ「RuffRuff 目次作成」を利用して、無料かつコーディングなしでブログ記事に目次を表示する方法を紹介します。

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 目次作成」のインストールが完了している状態からの説明となりますので、まだインストールが済んでいない方は、【アプリのインストールはこちら】 よりインストールをお願いします。

アプリ側の設定方法

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

最後に

今回はShopifyアプリ「RuffRuff 目次作成」を利用してブログ記事に目次を自動で表示する方法を紹介しました。実査にRuffRuff 目次作成を利用して表示した目次を確認したい方は下記のページをご参考にしてください。
https://tsun.ec/blogs/articles/ruffruff-table-of-contents

RuffRuff 目次作成に関する記事
https://tsun.ec/blogs/articles/21
https://tsun.ec/blogs/articles/26

Tsun Inc.

Discussion