This is the only Shopify app in the world that can automatically generate tables of contents not only for blog articles, but also for product pages, collections, Pages, etc.
It is available for free and can be implemented with no code.
Various customizations are possible, including wording, design, scrolling on/off, and adjusting the display position of the table of contents. In addition, the live preview function allows you to customize the table of contents while checking it in real time.
Why did you decide to make it?
- A table of contents is essential for the readability of blog posts.
- It is not possible to generate a table of contents with the native Shopify CMS
- Even if you can generate a table of contents, manually inserting the table of contents for each article is time-consuming.
In the article below, we introduce an app that generates a table of contents for Shopify, so please use it as a reference.
Introducing a Shopify app that can generate a table of contents
If you haven't used Shopify's blogging feature yet, please refer to the article below that explains Shopify's blogging feature.
Take full advantage of Shopify's blogging features | Introducing features and extension apps
What you created
I created a script that automatically generates a table of contents by extracting the h2 and h3 tags in Shopify blog articles.
You can generate a table of contents like this.
The main functions are as follows.
- Automatically generate table of contents based on h2 and h3 tags in blog articles
- Runs the script within the theme, so it is reflected in every blog post
- Click on the table of contents to scroll to the relevant section
Please see the full code in the Tsun Inc. repository.
We will explain the implementation method in detail below!
Before starting implementation (comparison of app and source code)
Before we start implementation, we have released a free table of contents creation app called "RuffRuff Table of Contents". Before starting implementation, try installing the app once to save implementation time for free.
Feature comparison between app and source code
| App name | RuffRuff Table of Contents | Source code of this article |
|---|---|---|
| Automatic generation of table of contents | ◯ | ◯ |
| Heading selection (Use table of contents) |
◯ h1~h6 |
✕ h2 and h3 only |
|
scroll (Smooth Scroll) |
◯ | ✕ |
| Paragraph display | ◯ 3 types |
✕ |
| separator line | ◯ | ✕ |
| indentation (indent) |
◯ | ◯ |
| color change | ◯ | ✕ |
| open/close button | ◯ | ✕ |
| Initial display line number setting | ◯ | ✕ |
| Hide table of contents for specific articles | ◯ Separate templates |
✕ |
| Adjusting the display position of the table of contents |
◯ 3 types |
✕ only on the first heading |
| live preview | ◯ | ✕ |
|
to product page Table of contents display |
◯ | ✕ |
| to collection page Table of contents display |
◯ | ✕ |
|
Pages Table of contents display |
◯ | ✕ |
Prerequisites
Target audience
- You can change the theme of Shopify
- Have basic knowledge of HTML, CSS, and JavaScript
What to prepare
- Dawn theme (Operation was confirmed with v5.0.0, but there should be no problem with previous versions.)
- Blog article
Implementation
*This implementation method involves directly editing the Shopify theme code, so be sure to make a backup beforehand.
In this implementation
- Add a JavaScript file to automatically generate a table of contents
- Enable the above JavaScript to be executed
There are two steps.
Both steps are performed from the code editing screen, so
- From the Shopify admin, go to Online Store > Themes and select the theme
- Actions > Edit code
Please do this and display the code editing screen.
Add a JavaScript file
- Assets > Select Add new asset
- Create an empty file
- Enter name: table-of-contents, file type: .js, and add the asset
- Select the table-of-contents.js created in the Assets list
- Paste the code and select Save
Allow JavaScript to run
- Select main-article.liquid from the Sections list
- Change the location where the content part of the blog article is inserted as below
Testing in the development environment
KOMARI's Local development environment for Shopify themes -Shopify CLI- The article is very helpful, so if you are interested in the test method, please check it out!
Summary
As mentioned above, we were able to automatically generate a table of contents by adding JavaScript code to the theme.
Please modify the design of the table of contents, the tags to be extracted, the IDs of the tags to be generated, etc., as appropriate, and use it as you like.
I created a free Shopify app "RuffRuff Table of Contents" that automatically generates a table of contents.
If you want to easily add an original design table of contents to your blog articles, please try it once.
[Free] RuffRuff Table of Contents
This is the latest Shopify app that was just released in December 2022.It is available for free, and if it is a Shopify theme that is compatible with OS 2.0, it can be installed with no code.Various customizations are possible, including wording, design, scrolling on/off, and adjusting the display position of the table of contents. In addition, the live preview function allows you to customize the table of contents while checking it in real time.Source: RuffRuff Table of Contents
Fee
From $0/month
function
- Automatic generation of table of contents
- Select headings to use in the table of contents (from h1 to h6)
- Change title wording
- Change presence/absence of separator line
- Color change (background, frame, separator line, title, link)
- Change in chapter number notation (can be selected from 3 types: none, dots, and numbers)
- Change the presence or absence of indentation
- Change whether or not to scroll
- Adjusting scroll offset
- live preview
