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: email@example.com
Table of Contents Generator Tool
Put your original blog post html here:
Output to Copy & Paste into Shopify: