A Tool to Add a Table of Contents to Your Shopify Blog Post

Why Add a Table of Contents?

Cardboard Cat Homes isn’t our first shopify ecommerce business. With previous businesses, we’ve found that adding a table of contents is an absolutely must do for any ecommerce business. Not only doesn’t it make it easier for your readers to navigate your content but it also helps search engines like Google better index your content. It also forces you to clearly structure your blog posts in a way that prevents them from feeling like blog spam. 

There’s only one issue. Shopify doesn’t have a great tool to add a Table of Contents. Right now there’s only one option and it costs $4 a month and it doesn’t look great. Furthermore, adding an additional app to your website is only going to slow it down.

You don’t want to slow down your site and pay money for something as simple as a table of contents. In this article and by using the tool below, you can create your own table of contents like the one we use for our blog post about creating your own cardboard cat scratcher


How the Table of Contents tool works

Step 1: Put your blog in Shopify

The first step is to add your blog post to Shopify. Generally, I recommend a workflow of creating your blog post in something like Google Docs first. Use Google Docs to set the headers and add the links you want in your blog post. Once the blog article is ready, copy and paste it into Shopify. 



Step 2: Copy and paste the html generated in the space below

Click the “<>” icon to open up the html view. After you add the blog post to your admin screen, Shopify will automatically convert it into html. You want to grab this html and put it in our form below. This step is really important to make sure you don’t accidentally clip part of your article.


Step 3: Add in the CSS for your Table of Contents

Generally, your default shopify theme will provide the styling for this table of contents to be stylistically consistent with the rest of your blog theme. You shouldn’t have to add too much. 

If you want to add a border around the table of contents then add something like: “border: 5px solid #f6882f; padding: 15px;” to the border css.

If you want to get rid of bullet points, you can add something like “ list-style-type: none;” for the list element css styling.


Step 4: Click “Submit” and replace the html in the Shopify Blog Post

Once you have the form filled out, just click “Submit”. This will generate all of the html and css you need to replace the html you copied from Step 1. Make sure to carefully copy and paste the entire article. You may be tempted to just copy and paste the new Table of Contents html at the top but replacing the whole article is necessary to ensure the links in the table of contents work and properly redirect your readers to the proper section.


Who we are and why we made this tool

We certainly think that we could’ve created this tool as an app on shopify and we hope someone else does! We wanted to create a free tool to help make the lives of other small business owners a little easier.

We started Cardboard Cat Homes as a way to create unique and affordable cat house designs completely made from recycled cardboard. All of our products are designed and manufactured in the United States of America. If you own a cat, please consider giving our products a look and if you know anyone at a shelter working to protect and adopt cats, please feel free to put us in contact. We’d love to connect and support animal shelters as well.

Our email is: meow@cardboardcathomes.com


Table of Contents Generator Tool

Put your original blog post html here:

Container Style

List Style


  • Jennifer

    I there an offset html code we can add if the navigation bar interferes? Here is my site with the navigation and table of contents offset: https://www.lovingessentialoils.com/blogs/diy-recipes/candy-cane-body-butter-easy-no-heat-recipe

  • Erica Loomis

    This is fantastic! Thank you so much!!

  • Kyle

    Thanks for this tool! Appreciate it a lot!

  • Kevin Ke

    Hi, thanks for your work. It works on my blog, but the navigation is not accurate? it will navigate a little down!!!

  • Evan

    It should be safe to use. With shopify, just be sure to make your meta description and article summary properly reflect the contents of the article and not the table of contents. Because the table of contents is the first thing, Shopify may auto populate your meta description with the table of contents. You don’t want that.

Leave a comment