You don't see the power of the table of contents until you stumble upon a blog post you can't navigate. A table of contents helps you structure your blog posts and helps customers quickly find the content they need.
That's why it is important to add a table of contents to Shopify blog posts.
While most of the guides show you how to do that through a separate app, HTML code or theme, we'll show a simpler way. Shopify Blog App by Magefan allows you to add a table of contents in one click. Literally.
Should we start?
To add a table of contents to the Shopify blog post:
1. Navigate to App > Magefan Blog > Posts and find a blog post you'd like to add a table of contents to.
2. Click where you'd like to add the post's contents and choose the Insert Contents Widget option from the WYSIWYG editor.
You should get the [Contents Widget] inserted into the content of the blog post. That's basically what you need to do.
The widget will structure each <h> tag into the table. However, if you want to exclude some from the table of contents add the following class to the <h> tag:
class="notoc"
Don't forget to Save the blog post and check the table of contents on the frontend.
Once you add a table of contents to Shopify blog posts, readers will navigate your articles more easily. However, that's just a small part of what you need to cover.
To make navigation through your blog even more convenient, configure the Shopify blog sidebar. Add your categories, recent posts, archive and search there so visitors can always find content they are interested in.
