When I was writing a long blog post on Shopify, I often want to have a table of contents at the beginning of the post. I couldn't find the application. Let's implement it this time! I decided to do it.
What I will introduce here is a jQuery code that picks up headings and creates a table of contents. It is intended for developers, so it is recommended that you know a little HTML/CSS/JS. The reader is assumed to be a person who is at least
We can embed the code to insert the table of contents into your Shopify site here, so if you are interested, you can contact us through the contact page.
By the way, the table of contents we will be creating is shown below. (It should appear in this section after this article is written...!)
Creating a Table of Contents Code for a Blog Post
The code to add a table of contents to a blog post is below. jQuery must be loaded, so if you have not loaded it in theme.liquid, etc., please adjust it so that it is loaded before the code below is processed.
Now, here is the code for copy and paste.
If you are using the Debut theme, add the above code to article-template.liquid; if you are using another theme and do not have the appropriate file, add the following to
Copy and paste it at the end of the file where it says
Now you are ready to go.
The table of contents element should be added before the first h2 tag.
The way it looks is this simple! Clicking on the table of contents here will take you to the appropriate section. Please copy and paste the above code into your own Shopify store and give it a try.
Implementing Smooth Scrolling in the Table of Contents
After that, let's also implement smooth scrolling, since it is difficult to see the links in the table of contents move quickly when you click on them.
Add the following smooth scrolling section to the jQuery code above.
This allows for smooth scrolling and easy-to-read transitions.
Adjusting the design of the blog post table of contents
Finally, we will adjust the table of contents design for the blog post.
It is good to put "Table of Contents" or "Contents" at the beginning so that people know it is a table of contents.
In the previous code
part of the
to the following.
Now we have a title for the table of contents.
It looks a lot more like a table of contents now that the word "Contents" has been added. The "." in front of each heading is no longer necessary, so let's delete it as well.
Here is the SCSS, including design adjustments. Please note that this is just a rough draft, and that it was written in a very casual manner.
It is simple, but it looks like this.
How to Create a Table of Contents (TOC) for a Shopify Blog Summary
This is how to create a table of contents for a Shopify blog post. Many store owners are blogging on Shopify, so please take a look and see if you can make use of this.
You can copy and paste the code and use it while adjusting the design or applying the code, or you can distribute it secondarily on your own blog. (In that case, please refer to our EC PENGUIN blog as the reference source.)
Have a great day!