![[Shopify] Add a table of contents to the blog function の
アイキャッチ](http://cavedescript.com/cdn/shop/articles/mokuji-article.png?v=1676870647&width=800)
[Shopify] Add a table of contents to the blog function
Shopify is a cart ASP for e-commerce sites, but it also functions as a CMS (similar to a homepage management tool such as WordPress).
Among these is a "blog" function, which is an essential element for running a website, but the initial version of this blog function only has a very simple posting function, so for example, it is not possible to set up a "table of contents" item to be displayed at the beginning.
However, as you can see below, this blog has a table of contents, right?
These kinds of functions can be added later. So, how do you add them? That is the purpose of this article.
This can be a bit of a hassle when creating something with Shopify, so we'll customize it to solve it!
table of contents
There are several options
First of all, what is a blog? It is something at the top of an article that is a list of items linked to each heading. It is also at the top, so if you paste a little image below it, it will look like this.
You can see that the larger headings are linked to the smaller headings at the lower level.
There are three main ways to make this, so I will explain those three elements.
The method of making with effort
The hard work method is something anyone can do if they try. The table of contents mechanism itself is very simple, and it simply involves attaching links called "anchors," so it is possible to manually create table of contents elements using the blog posting function.
You can create something like a table of contents in the blog post feature of Shopify and then create links by using the "Insert link" function, but with this method you will need to assign an ID to each heading you link to.
Even if you create the blog text like this, how do you determine the link destination? The method of determination is something called an "id" that needs to be written in the html (source code), but since the current function does not touch the ID, click the "< >" mark in the upper right to display the source code.
This is what happens.
The areas underlined in red are where an ID needs to be added. An ID has already been assigned to the main heading, h2, but an ID has not yet been assigned to the subheading element below, h3.
As you can see, this stage is quite difficult for people who don't normally edit HTML, so even if you're told you can do it if you try, I think it will be a bit of a challenge .
Also, I think it would be very troublesome to assign an ID every time you write a blog post.
So, when we wondered if there was any way to automate this process, the second and third methods came to mind.
How to use the app
The second possible method is to think that there might be a "table of contents creation function" among the many apps on Shopify.
So I searched for an app for table of contents.
Huh? Maybe it's not there? You may be worried, but in this case, if you are using Shopify, don't give up on the Japanese app. Try searching for English as well.
When I searched Google to see what the table of contents was called in English, I found that it was "table of contents," so I decided to search for that word.
I found two that looked similar, so I clicked on one of them and it definitely looked like it would allow me to create a table of contents... but the only drawback was that it was a paid service.
Even though it's only $2 a month, I wonder if it's really worth paying about 3,000 yen a year just for a table of contents... Moreover, the app's admin screen is in English, so it does seem a bit of a hassle.
Unlike the first option, this option is automated, so it may be worth the money if you consider the labor cost, but it can be a bit difficult to decide. That's why this blog uses the third option.
Create a program (this is the main part)
The problem with ① doing it yourself is the hassle, while the problem with ② apps is the cost and English.
Therefore, on this blog, we decided to use the third method, which is to embed a homemade table of contents generation program.
Shopify's blog posting function allows you to use h2 and h3 headings in your posts, so it would be nice if it could automatically pick up those tags, automatically assign IDs, and automatically generate a table of contents.
If you are creating a blog using only the standard posting function, it can be done easily by implementing a fairly simple program, so we are happy to provide this service free of charge to our customers if necessary.
If you really want to know the technical details, you can find out more on the official Liquid Masters LINE account operated by our company, so click " here " to go to the official Liquid Masters page, register for LINE, and check it out.
Also, like this blog, there are cases where posts are made using an app called Blog Studio , which does not have the standard posting function. This article itself is written so simply that it doesn't need an app, but for other blogs, etc., this is a Shopify app that is very useful when you want a little more design element, so this is also an app that I widely recommend to those who want to focus on blogging.
When using Blog Studio, the html tags for headings, such as h2 and h3, may be placed in places you do not expect. This is a problem inherent to this convenient tool.
Therefore, I need to make sure that I don't link to tags in unexpected locations, so although it's a bit of a hassle, I have created a program that will automatically add a heading if you assign a "class name" specifically to the tag to which you want to add a heading.
That way, all you need to do is put in a little effort when posting.
When posting to a blog using the app, I created a program that will automatically set the heading as long as you add a predetermined class name like the one in the image above.
The program we created can be installed by editing Shopify's theme, so it can be used relatively universally. Although we are not disclosing the program code itself, it can be easily installed.
summary
①Manual Index ②App Index ③Automatic Program
Of these three methods, if you cannot create a program, you will most likely choose option ②. As for option ③, it requires a certain level of expertise, as it requires not only how to create the program itself, but also how and why you want to post the Shopify blog.
However, since this is something you would want to use generally, we recommend option ③, and generally, we would like to ask any customers who have had work done by our company to feel free to consult us.