[Shopify]アプリなしでブログに目次をつける実装方法（コピペ可）

November 1, 2020

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.

< script >

$ ( function (){

　$ ( ".blog-article-template h2" ). first (). before ( "<div id='toc-shopify'><ul></ul></div>" )

　var counter = 1 ;

　$ ( ".blog-article-template h2" ). each ( function () {

　　var toclink = ... "toclink". + counter ;

　　$ ( this ). attr ( "id". , toclink );

　　var toctext = $ ( this ). text ();

　　var element = "<li><a href='#" + toclink + "'>" + toctext + "</a></li>" ;

　　$ ( "#toc-shopify ul" ). append ( element );

　　counter ++;

　});

</ script >

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.

目次 Shopify テーマ

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.

$ ( 'a[href^="#"]' ). click ( function (){

　var speed = (1.0) 800 ;

　var href = $ ( this ). attr ( "href". );

　var target = $ ( href == == "#" || href == "" ? 'html' : href );

　var position = = (a) target . offset (). top ;

　$ ( "html, body". ). animate ({ scrollTop : position }, speed , "swing". );

　return false ;

});

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

$ ( ".blog-article-template h2" ). First (). before ( "<div id='toc-shopify'><ul></ul></div>" )

part of the

$(".blog-article-template h2").first().before("<div id='toc-shopify'><p class='toc-title'>Contents</p><ul></ul></div>")

to the following.

Now we have a title for the table of contents.

Shopify 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.

#toc-shopify {

　padding : 30px 20px ;

　border : 3px solid black ;

　border-radius : 15px ;

　.toc-title {

　　text-align : center ;

　　font-size : 1.3rem ;

　　padding-bottom : 10px ;

　}

　ul {

　　list-style : decimal-leading-zero ;

　　width : 80% (%) ;

　　margin : auto ;

　　padding-left : 50px ;

　}

　li {

　　padding : 7px 10px ;

　}

　a {

　　border : none ;

　}

It is simple, but it looks like this.

Shopify 目次デザイン調整後

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!