Are you writing blog posts (or news, journal, or magazine entries) on Shopify?
If you haven't started yet, please read the article below first.
In this article, we introduce the benefits of adding a table of contents to blog posts on your Shopify store, along with recommended Shopify apps for adding one.
Benefits of adding a table of contents to Shopify
The benefits of adding a table of contents to your Shopify store are as follows.
- Improves convenience for readers (visitors)
- Helps organize the writer's (store's) thinking
- Increases traffic
- Lets you understand user needs
- Can also have a positive effect on SEO
Let's go through each one in detail.
Improves convenience for readers (visitors)
A table of contents improves reader convenience in the following ways.
- Lets readers see the content of a blog post at a glance
- Lets readers jump straight to the section they want to read
Helps organize the writer's (store's) thinking
Using a table of contents also helps the writer organize their thinking. As a way to organize your thinking, we recommend checking the following points using the table of contents.
- Is it organized logically?
- Is it written from the reader's (visitor's) point of view?
- Does it contain the information readers (visitors) want?
Increases traffic
Have you ever seen a few links displayed below an article title in Google search results?
A table of contents can sometimes be displayed in Google search results as well, and when it is, it can increase your click-through rate and, in turn, your traffic.
Lets you understand user needs
By combining a table of contents with a heatmap tool, you can see which parts of a blog post readers find interesting and read the most.
To find out what users need, you can use a heatmap tool's feature that highlights in red the areas with the most clicks (taps), and check which headings in the table of contents are clicked the most.
The blog post below explains how to install our recommended heatmap tool, "Clarity," on Shopify, so please use it as a reference.
Can also have a positive effect on SEO
A table of contents doesn't have a direct effect on SEO, but we believe it has an indirect positive effect.
The most important thing for SEO is whether the content is good for users.
As mentioned above, adding a table of contents improves user convenience, and it also lets you keep improving your blog posts based on an understanding of user needs, so it's thought that this naturally leads to higher-quality content that's also rated well for SEO.
The blog post below explains the benefits of SEO and the SEO measures you can take on Shopify. Please use it as a reference.
3 ways to create a table of contents on Shopify
Here are the ways to create a table of contents on Shopify.
- Install an app
- Customize the source code
- Purchase a paid theme that supports a table of contents
Let's go through each one in detail.
Install an app
First is the method of using a Shopify app.
The benefit of using an app is that it's easy to install and you can customize it to your preferred design (colors).
It's also a big advantage that you don't need to spend valuable engineering resources on fine-tuning and testing.
The drawback is that it can cost a few dollars a month.
However, the Shopify app "RuffRuff Table of Contents," which automatically generates a table of contents, can be used for free.
Customize the source code
Next is the method of customizing Shopify's source code yourself.
The benefit is that you can build it for free and customize the design however you like.
The drawback is that it requires programming knowledge such as HTML, CSS, and JavaScript. Also, besides development, you'll need time to test that it works as intended, plus ongoing maintenance.
The blog post below explains how to customize the source code yourself to automatically generate a table of contents on a Shopify site. Please use it as a reference.
Purchase a paid theme that supports a table of contents
Finally, there's the method of purchasing a paid Shopify theme that automatically generates a table of contents for you.
The benefit is that no programming knowledge is required, and since it's a one-time purchase, it can end up cheaper than an app if you use it for a long time.
The drawback is that you can't freely change the design, and it costs $180 or more. It also takes time to find a theme that supports this feature.
How to choose a Shopify table of contents app
Here are the points you should check when choosing a table of contents app.
- Does it support Japanese?
- Does it generate the table of contents automatically?
- How much does it cost (monthly fee)?
Let's go through each one in detail.
Does it support Japanese?
If you choose an app based on price alone, you may end up with hidden costs down the line (such as translation work or having to make inquiries when something goes wrong), so be careful. First, check whether the following support Japanese.
- The storefront (the part users see on the site)
- The app's admin screen
- The help page
- Support contacts
Does it generate the table of contents automatically?
It's important not just that an app can create a table of contents, but that it does so automatically.
Some table of contents apps require you to build the table of contents manually. Doing this once may not take much time, but it can lead to things being missed, so choose an app that generates the table of contents automatically wherever possible.
How much does it cost (monthly fee)?
The cost of table of contents apps ranges from free to a few dollars a month. Weigh the cost against how much reader (visitor) convenience and time savings on creating a table of contents are worth to you, and make your decision accordingly.
Comparing table of contents app plans
| App name | Plan name | Monthly fee |
|---|---|---|
| RuffRuff Table of Contents | Free | Free |
| Light | $3.99 | |
| Regular | $9.99 | |
| Easy Table Of Contents | BASIC | $1.99 |
| Jump Links | FULL ACCESS | $1.99 |
Shopify table of contents apps
RuffRuff Table of Contents
This is a one-of-a-kind Shopify app that can automatically generate a table of contents not just for blog posts, but for product pages, collections, and Pages as well.
You can use it for free, and it can be installed with no code.
You can customize wording and design, turn scrolling on or off, adjust the table of contents' display position, and more. It also has a live preview feature, so you can customize the table of contents while checking your changes in real time.
Pricing
Free~
Features
- Automatic table of contents generation
- Choose which headings to use in the table of contents (from h1 to h6)
- Change the title wording
- Toggle a divider line on or off
- Change colors (background, border, divider, title, links)
- Change how chapter numbers are shown (choose from none, dots, or numbers)
- Toggle indentation on or off
- Toggle scrolling on or off
- Adjust the scroll offset
- Live preview
Easy Table Of Contents
This is a Shopify app that automatically generates a table of contents without you having to modify your content.
There's only one table of contents design, but there are many places where you can adjust colors, so you can tailor it to match your own site's design.
You can also choose which headings (from h1 to h6) to use for the table of contents, and change where the table of contents is displayed.
The blog post below introduces the features, pricing plans, and points to watch out for with Easy Table Of Contents. Please use it as a reference.
Pricing
$1.9 / month * 7-day free trial
Features
- 1 table of contents design
- Toggle scrolling (Smooth Scroll) on/off
- Choose which headings (h1~h6) to include in the table of contents
- Hide the table of contents on specific articles
- Choose paragraph markers from "Bullet," "Numeric," or "None"
- Toggle indentation on/off
- Can change the following colors
- Background, border, title, links, hover-state links, visited links
Jump Links
One of a handful of table of contents apps, with features and pricing not too different from "Easy Table Of Contents."
Pricing
$1.9/month * 7-day free trial
Features
- 1 table of contents design
- Toggle scrolling (Smooth Scroll) on/off
- Adjust the scroll display area (offset adjustment)
- Adjust the table of contents' display position
- Above the first heading
- A specified position via an app block
- Choose which headings (h1~h6) to include in the table of contents
- Hide the table of contents on specific articles
- Choose paragraph markers from "Bullet," "Numeric," or "None"
- Can change the following colors
- Background, border, title, links, hover-state links, visited links
A thorough comparison of Shopify apps that can create a table of contents
Comparing where the table of contents can be displayed
| App name | RuffRuff Table of Contents | Easy Table Of Contents | Jump Links |
|---|---|---|---|
| Table of contents on blog posts | ◯ | ◯ | ◯ |
| Table of contents on products | ◯ | ✕ | ✕ |
| Table of contents on Pages | ◯ | ✕ | ✕ |
| Table of contents on collections | ◯ | ✕ | ✕ |
Comparing table of contents customization features
| App name | RuffRuff Table of Contents | Easy Table Of Contents | Jump Links |
|---|---|---|---|
|
Heading selection (used for the table of contents) |
◯ h1~h6 |
◯ h1~h6 |
◯ h1~h6 |
|
Scrolling (Smooth Scroll) |
◯ | ◯ | ◯ |
| Paragraph markers |
◯ 3 types |
◯ 3 types |
◯ 3 types |
| Divider line | ◯ | ✕ | ✕ |
|
Indentation (indent) |
◯ | ◯ | ✕ |
| Color changes | ◯ | ◯ | ◯ |
| Expand/collapse button | ◯ | ✕ | ✕ |
| Set the initial number of visible rows | ◯ | ✕ | ✕ |
|
Adjust the table of contents' display position |
◯ 3 types |
◯ 3 types |
◯ 2 types |
|
Table of contents alignment |
◯ Left, center, right |
✕ | ✕ |
|
Table of contents margins |
◯ Top, bottom, left, right |
✕ | ✕ |
Comparing other features
| App name | RuffRuff Table of Contents | Easy Table Of Contents | Jump Links |
|---|---|---|---|
| Automatic table of contents generation | ◯ | ◯ | ✕ |
| 1-click ON/OFF | ◯ | ✕ | ✕ |
| Live preview | ◯ | ✕ | ✕ |
|
Anchor links using headings |
◯ | ✕ | ✕ |
How to Display a Table of Contents on Blog Posts with RuffRuff Table of Contents
Here's how to display a table of contents on your Shopify blog posts.
- Preparation
- Step 1: Customize the table of contents design
- Step 2: Add an app block where you want the table of contents to appear
Preparation
Here we introduce how to use the Shopify app "RuffRuff Table of Contents." RuffRuff Table of Contents is a Japan-made Shopify app that can display a table of contents on any content in Shopify, including blog posts and product pages. It's free to use and has simple setup. If you haven't installed it yet, please install it via the link below.
Install RuffRuff Table of Contents here
Step 1: Customize the table of contents design
Open the RuffRuff Table of Contents app and click "Customize table of contents" in the left-hand menu. From the customization screen, choose the table of contents title and the headings to use for generating the table of contents, then click "Save" in the top right of the screen.
Step 2: Add an app block where you want the table of contents to appear
Go to "Online Store > Themes," and click "Customize" on the Shopify theme where you want to add the table of contents.
Select the "Blog post" template from the select box at the top center of the theme editor screen.
Next, click "Add block (or Add section)" and select the App tab. From the app list, add the app block named "Table of Contents," then click "Save" in the top right of the screen.
If the table of contents is displayed on your blog post, it has been set up successfully.
What to do if you run into problems setting up the table of contents
Can't access the blog template
This may be because there are no published blog posts. Go to "Shopify > Blog posts" and check whether any published blog posts exist.
The "Table of Contents" app block doesn't appear
The following causes are possible.
Cause 1: RuffRuff Table of Contents isn't installed
Install RuffRuff Table of Contents.
Cause 2: You're not on the "Blog post" template
Select the "Blog post" template from the select box at the top center of the theme editor screen.
Cause 3: Your Shopify theme doesn't support Online Store 2.0
The help page below introduces setup methods for themes that aren't Online Store 2.0 themes, so please use it as a reference for setup.
Added the app block but the table of contents doesn't appear
The following causes are possible.
Cause 1: There are no headings in the blog post
Since the table of contents is generated from heading tags (e.g., <h1>, <h2>, <h3>), if heading tags aren't used correctly in the blog post, the table of contents may not be generated. Check that heading tags are being used properly.
Cause 2: A caching issue
A specific cache on the Shopify platform may prevent a newly added table of contents from appearing right away. After clicking "Save" in the theme editor, clear your browser cache or refresh the page.
Cause 3: The blog post was created outside Shopify's native blog editor
RuffRuff Table of Contents only supports blog posts created with Shopify's native blog editor. It doesn't support blog posts created with tools like Pagefly or GemPages, so if you want a table of contents to appear on those, you'll need to rebuild the post using Shopify's native blog editor.
In closing
As described above, we've explained how to create a table of contents on Shopify and how to choose an app. Make the most of a table of contents to maximize reader convenience and SEO benefits.
The blog post below, besides Shopify apps for adding a table of contents, introduces various other recommended apps by category, such as for "attracting customers," "increasing sales," and "expanding blog functionality." Please use it as a reference.
