How to Add a Table of Contents to Your Shopify Blog (Free Tool)

I'm a firm believer in the power of a table of contents. I've seen some pretty dramatic effects ever since I started using them on my site, and so have the clients I've convinced to let me install them on theirs. I wrote a guide on automatically adding them on a WordPress site, and they're one of my top tips in my list of Advanced Blogging Tips. They're even great for some simple internal links, in a way. A table of contents helps both search engines and visitors digest your content better.

The thing is, not everyone uses WordPress. I covered how to add one to a WordPress site, but what about users of other platforms?

Well, I thought I'd start rectifying my coverage gap today. First, let's talk about Shopify.

Shopify is a popular eCommerce platform for online stores, but (as I've written many times before) the blog leaves a lot to be desired. They've been slowly improving it over the years, but it's still a long way from being a powerhouse like WordPress. That said, you can improve it on your own, and one of the ways is to add something like a table of contents. Anything that adds usability and functionality to a Shopify blog is excellent in my book.

To that end, I've found three methods you can use to add a table of contents to a Shopify blog.

Let's dig in!

Method 1: Jump Links Shopify App

If you're used to WordPress, you're probably used to having a dozen different choices to do pretty much anything you could want to your site. Unfortunately, the Shopify app marketplace is much sparser. They (as of this writing) only have one app to add a table of contents. That app is called Jump Links ToC, and here's how to use it.

First, log into your Shopify account, then click the link above. That will take you to the Shopify App Store page for Jump Links ToC, where you can then click the "Add App" button to install it on your site.

From there, go to your Shopify store dashboard and click on the Apps section, and then the Jump Links ToC icon, which lets you open their settings.

In that settings menu pop-up, you can customize how the table of contents will appear on your posts.

• Choose a header. You can have a title for the ToC box that says something like "Table of Contents" or "Navigation" or "Quick Links" or whatever you like, or not have anything at all. I prefer a simple header. Click the check box to enable it and type in your text, as desired. Bear in mind that it's an all-or-nothing setting; you can't customize it per-post.
• Choose an item/list format. You can have items be bullets or numbers. I prefer either bullet points or nothing; if they have numbers, my subheadings already have the numbers, so adding numbers here would duplicate them.
• Choose a position. You have two options here: the top of the page directly below the post title (and image) or right above the first heading in the post. Do you want to have an intro section above the ToC or not? This section is where you make that decision. Adding it before the first heading (right after the intro) is the best method, in my opinion, similar to how Wikipedia uses its table of contents.
• Set scrolling. "Smooth Scroll" will have the user scroll to the position in the post, whereas leaving it disabled will make it an instant jump. This section is just a user experience feature and won't affect SEO, so it doesn't matter all that much.
• Customize Design Theme. This section is where you apply colors and formatting to your table of contents. Background and border colors for the ToC box, title/link/hover colors, and so forth. Pick colors that match your storefront and homepage styling as closely as possible.
• Choose which H tags are included. If you're the kind of person who uses nested sub-sub-sub-subheadings down to H5 or H6, you can choose whether or not to have them. I usually recommend sticking to just H2/H3 and maybe H4 unless you're creating an immense reference document.

You can also choose specific posts (by post ID) to ignore when generating tables of contents for your content. It's a pain if you want a table of contents on some but not all of your posts, but if you want it on every post, you can ignore that section. It also adds a drop-down menu to your blog post section that enables you to click "No table of contents" if you want to disable it on future blog posts.

Finally, save your settings and then click the "run engine" button. It will take 30+ minutes to run, pulling all of your content, generating the tables according to your settings, adding those ToCs to the posts, and saving the changes. It's a big script doing it, and you have to wait for it to apply everything. If you make any changes to your posts between clicking Run Engine and finishing, those changes might be lost.

There are three major drawbacks to this app option.

• It costs money. Specifically, it costs you $4 per month, indefinitely, to use the app. The cost is a pretty annoying fee, especially for us WordPress fans who are used to getting simple plugins like this for free.
• It's not very customizable. The customization options are pretty much limited to what I listed above. It may or may not look good with your theme.
• It's clunky. That's not a problem with the app as it is with the Shopify API, though, so I can't blame them for it.

All that said, there are two other options I have for you. Ready?

Method 2: Changing Themes

The second method to add a table of contents to a Shopify site is to, well, change your website. Fairly dramatically, I might add.

See, rather than using an app for a table of contents, many Shopify themes have a table of contents baked into it out of the box. The problem is that you need to find a template with a table of contents, which is not exactly a popular feature. I only know of one theme variant that has it off the top of my head, and that's Plak Theme.

Specifically, it's both Plak and Grass, two of the themes offered by Plak the company. The other one, Sly, doesn't seem to have a table of contents.

There are quite a few drawbacks to this option, unfortunately.

1. First of all, it's a massive change. Changing your theme is a huge investment and can disrupt your site's aesthetic and branding, and that's not an easy ask for something as relatively minor as a table of contents. Don't get me wrong, I love ToCs, and they're pretty valuable, but they're not that valuable.
2. Secondly, it's pretty expensive. Plak costs $295 for a single-site license, with higher prices for more licenses. The Grass theme is very slightly cheaper, starting at $245. They're lifetime licenses, at least, but it's still a tall order, considering you have to completely change your website.
3. Third, I don't think it looks as good as many competing themes. The demo page for the theme has a blog post with a sample, and it seems like a basic table with some default font/links/CSS. I'm sure you can customize it, but the whole theme looks pretty basic to me. It would take a decent amount of work to get it unique enough to build a brand on, in my opinion.

Still, I wouldn't recommend it as a realistic option, especially when other options don't require that you spend hundreds of dollars and completely redesign your website. Such as:

Method 3: Use a Tool

Someone else was fed up with having to pay $4 a month for a table of contents, so they made a tool to generate one for you. It's not an app, so you don't have to pay to use it. However, you have to hope they maintain it and that it doesn't break at any point. Still, it's not that difficult to use.

Here's a quick tutorial:

1. First, write your blog post as you usually would. You want it to be in the Shopify window, though if you write elsewhere and only put it in Shopify as part of the publication process, you can do that too. The key is that you want the raw HTML, not the text.

2. Next, go to the HTML view by clicking the <> icon. If you didn't know, this section shows you the code behind the formatting and links and all that jazz. You'll want to copy the entire HTML for your post. The tool needs the HTML to know your headers (H1, H2, etc.), pull the text from them, and generate the table of contents with the jump links.

3. Then, go to the site for the tool, which is here, at the very bottom of the page.

Paste your blog post in the larger box at the top. Here, you can customize the container for the table of contents. By default, it has a 1-pixel border with some padding and margins and a pre-chosen color. You can customize this however you like as long as you know the CSS to do it. If you customize it, I recommend that you copy the CSS code into a document you can keep stored for whenever you use this tool. Alternatively, if you know what you're doing, you can code up a cloned version of the tool for your personal use. You can also customize the list style.

4. Once you have all that in, hit submit, and the tool will generate a new copy of your post. It's all the same HTML as your original post, with the HTML/CSS for the table of contents added to it. It would help if you had the whole thing because your headings and subheadings now have the anchors for the links in them. So, copy the entire code, and replace the code in the <> HTML view in Shopify with the generated code.

Now, there are a few issues with this option that I see.

• You have to repeat the process every time for every post. This process includes customizing the CSS in the box because the tool won't save it for you. Also, if you edit your blog post enough to change your subheadings, you'll need to re-generate the table of contents or manually edit your HTML code to update that new subheading in your table of contents. This plugin generates a static element, so if you change the title of one of the jump links, you also need to update the table of contents title to match.
• It doesn't account for scroll offsets the way the first option on this list can. If you have a navigation bar that scrolls with your site, it will cause an offset on where the scroll leads. You have to add that offset to fix the issue manually.
• It plops your table of contents at the top of your article. You'll probably want to move the generated code above the first heading in your article.

That's mostly it. It's not a bad tool, and adding a table of contents of any kind can be beneficial for your user experience, search engines, and ultimately for your conversions.

It does add extra steps and can be tedious to do if you have a detailed blogging process. I hope that somebody creates an alternative that automates this applies a table of contents to previous posts.

Hopefully, we'll have a better option in the future, but this is one of the best options available, and it's completely free.

Are There Other Options?

Usually, I cap off a post like this with "these are just three of the many options available" or some other way of mentioning that my recommendations aren't comprehensive, and I can't do that this time. As near as I can tell, these are the only three ways (short of custom code you develop yourself) to add a table of contents to a Shopify blog.

That's it.

Until a better option comes along, this is what I've got for you. Now, is it worth using these options for a table of contents? Maybe. I'd probably go with the app, to be honest. A table of contents is excellent, but it's not worth changing your theme over. The manual process would get tedious after a while, especially if you need to apply it manually to hundreds of existing blog posts. That said, the decision is up to you.