Add Table of Contents to your Shopify Blog

An organized and structured blog post can enhance your reader’s experience. When writing blogs for SEO purposes, we want to give as much information to our readers in the beginning so they don’t have to go back to Google to do another search. One way to accomplish this is by adding a Table of Contents (TOC) to your Shopify blog posts. This provides your reader with a clear roadmap of your article’s content which is hyperlinked with each of your H tags for quick navigation throughout your blog.

WordPress has a number of great plug-ins which can automate the creation of your TOC but when it comes to Shopify – users are blessed with a plethora of apps like WordPress has. We spent days trying to find the best way to automate our TOC in our blog and below are the results of the three ways we tried to add a table of contents to our Shopify Blog

How to create your Table of Contents on Shopify blogs

There are 3 ways to create a Table of Contents.

1. Manually add in HTML code (free but no automation)
2. Using a Shopify app (~$4/month)
3. Customize theme liquid code to auto-generate Table-of-Contents (free & automated)

Manually create a Table of Contents in HTML & CSS

Step 1: Begin your blog post with a bulleted or numbered list that outlines your post’s sections and sub-sections. This will be your TOC.

Step 2: Use anchor tags to create hyperlinks in your TOC that connect to the corresponding sections of your blog post. Here’s an example of how you can use HTML to create an anchor tags to your table of contents.

Step 3: Of course you can always add CSS code to your list in the HTML to make it look nicer. There is also a website that can help you generate this code based on the HTML of your article for free.

<!-- Begin Table of Contents -->

<ol>
    <li><a href="#table-of-contents-0">Topic 1</a></li>
    <ol>
        <li><a href="#table-of-contents-1">Subtopic 1</a></li>
        <li><a href="#table-of-contents-2">Subtopic 2</a></li>
        <li><a href="#table-of-contents-3">Subtopic 3</a></li>
    </ol>
        <li><a href="#table-of-contents-4">Topic 2</a></li>
    <ol>
        <li><a href="#table-of-contents-5">Subtopic 1</a></li>
        <li><a href="#table-of-contents-6">Subtopic 2</a></li>
    </ol>
</ol>
        <li><a href="#table-of-contents-7">Topic 3</a></li>
    <ol>
        <li><a href="#table-of-contents-8">Subtopic 1</a></li>
        <li><a data-list="" href="#table-of-contents-9">Subtopic 2</a></li>
        <li><a data-list="" href="#table-of-contents-10">Subtopic 3</a></li>
    </ol>

<!-- End Table of Contents -->


<h2 id="table-of-contents-0">Topic 1</h2>
<h3 id="table-of-contents-1">Subtopic 1</h3>
<h3 id="table-of-contents-2">Subtopic 2</h3>
<h3 id="table-of-contents-3">Subtopic 3</h3>
<h2 id="table-of-contents-4">Topic 2</h2>
<h3 id="table-of-contents-5">Subtopic 1</h3>
<h3 id="table-of-contents-6">Subtopic 2</h3>
<h2 id="table-of-contents-7">Topic 3</h2>
<h3 id="table-of-contents-8">Subtopic 1</h3>
<h3 id="table-of-contents-9">Subtopic 2</h3>
<h3 id="table-of-contents-10">Subtopic 3</h3>

Use a Shopify App

There are several Shopify apps available, such as Easy Table of Contents or Power Tools Suite, that can help you automatically generate a TOC for your blog posts. These apps automatically create a TOC based on your use of heading tags (like H1, H2, H3, etc.) in your blog post.

I tried a trial version of these apps but I wasn’t exactly impressed. They worked but I did see some performance issues and when my trial was over – I really didn’t want to pay an additional $4 per month.

Some of the apps currently on the Shopify App store include:

https://apps.shopify.com/easy-table-of-content

https://apps.shopify.com/ruffruff-table-of-contents

Customize Shopify theme liquid code

In my opinion, this is the most cost-effective and most automated option is to create a Table of Contents script in the article__main.liquid page of your theme. This is entirely automatic and completely free. However, this does require some coding experience. With some coding experience, you can create Table of Contents in the articles.liquid page of your theme which is fully automate and 100% free.

If coding isn’t your forte, don’t worry! We broke down the code that we injected into our Shopify Flex Theme in this detailed article explaining how to automatically add a Table of Contents to your Shopify Blog without any plug-ins.

Alternatively, you could hire assistance from platforms like Fiverr or Upwork. We managed to find someone who coded our Table of Contents for just $30. It was a one-time payment and now we have a fully automated Table of Contents built directly into our theme. It’s as simple as that!

Conclusion

Adding a TOC to your Shopify blog posts not only makes your content more reader-friendly but also can improve SEO, as search engines often prefer well-structured and easily navigable pages. So, whether you’re a Shopify veteran or just starting your ecommerce journey, incorporating a TOC into your blog posts is a smart strategy to enhance user experience and boost your SEO efforts.

Remember, consistency is key. Once you start adding a TOC to your posts, try to keep it up with all future posts. Your readers (and search engines) will thank you!