When blogging on Shopify, you certainly do your best to craft the most insightful posts. However, you also have to make it "scannable" for readers to easily find what they need instead of just scrolling down and leaving.
That's where the Shopify blog table of contents comes into play. As small an element as it seems, it's an effective tool for improving your content navigation, design, and, above all, user experience.
So,today, you will explore what the table of contents is, why it matters, and how to add it to your Shopify blog using different methods.
What is a Table of Contents in Shopify?
The table of contents is a list of content headings that reflects the structure of your blog post. You usually add it at the top of your content or after the introduction, highlighting the key elements throughout the post.
Ideally, the table of contents includes links to the corresponding chapters so that readers can easily jump to the section they are interested in. Thus, it sets clear expectations about the post content and helps navigate it more effectively.
Why is a Table of Contents Important for the Shopify Blog?
The table of contents is quite a simple instrument, and sometimes it doesn't seem to do much. Still, this small tool makes a big difference.
Let's explore how adding a table of contents can benefit your Shopify blog.
Enhanced user experience
We live in a fast-paced world, and this sense of urgency extends to many areas, including content. People are unlikely to read the entire blog post just to find out it's not really what they expected. Instead, they skim through the page and simply leave if nothing of interest catches their eye.
So, it leads to people usually missing all the valuable information.
That's where the table of contents can help. By outlining what your blog post is about, readers clearly know what to expect right after opening the page. Thus, it improves their experience with your blog and makes it much more effective.
Easier content navigation
With the table of contents, your readers don't have to scroll through the post and look for the needed info. Instead, they can open the corresponding chapter in one click and get right to exploring it.
Thus, the table of contents greatly facilitates the blog post navigation, which is specifically relevant for the lengthy pieces.
Improved SEO performance
We all know that search engines love fresh and well-structured content. And there is nothing that makes your content easier to understand than the Shopify blog table of contents.
A clear outline helps search engines understand and classify your content better. This results in more targeted recommendations and gives a boost to your overall SEO.
Neat and professional design
In addition to the abovementioned points, a table of contents makes your blog posts look more professional. Messy chapters and big chunks of text are difficult to comprehend, no matter how insightful your content is.
The neat and logical structure, however, makes your content more approachable, organized, and trustworthy.
How to Add the Shopify Blog Table of Contents?
Sadly, Shopify doesn't offer the table of contents functionality out of the box. Thus, you have to look for alternative solutions to add it to your Shopify blog posts.
In the following chapters, we'll explore three possible ways of adding the Shopify table of contents. So, you can choose whatever works better for you.
Add table of contents via theme/app
Some Shopify themes offer a built-in table of contents for blog posts. Thus, if yours has one, you are on the winning side. However, you certainly won't change the entire theme if it doesn't have a table of contents out of the box.
So, an easier option would be to use a third-party app, especially considering the variety in the Shopify App Store. With an app, you would first need to configure the general settings and preferences. Then, you'll be able to add the Shopify table of contents via your theme. To do that:
1. Navigate to Sales channels > Online Store > Theme and start editing your active theme.
2. Switch to the Default blog post template using the dropdown at the top of the page.
3. Add a new element in Template > Blog post, open the Apps tab, and insert the table of contents.
(Credit — Ruf Ruf Table of Contents App)
Having done that, hit the Save button and check the results on the storefront.
The exact steps may differ depending on the app, so make sure to check the corresponding user guides.
Add table of contents manually
Except for adding the table of contents via a theme or an app, you can also do that manually.
Surely, it may not be the most feasible option if you post regularly. However, if you only need to add a table of contents occasionally, this method will also work.
So, to add the Shopify table of contents manually:
1. Navigate to Content > Blog posts and open the post you'd like to edit.
2. Choose where you'd like to add the table of contents and list all of the posts' headings.
3. Open the HTML view of your post and add IDs to all of your headings.
e.g., <h2 id="turn-on-private-browsing">Turn on "Private Browsing" for cheaper flights</h2>
4. Having done that, switch back to the regular editing, move to the table of contents you started working on, and start adding a link to the first element.
5. Specify the number sign # followed by the corresponding heading's ID in the Link to field and insert the link.
6. Repeat the same procedure for other headings and save your blog post.
This way, you create an interactive table of contents, where readers can click on an element and jump to the corresponding chapter of your post.
Generally, there's nothing complex here. But, once again, if you post regularly, things might get tedious.
Luckily, there's another option to speed up the process.
Add table of contents automatically
Spending this much time editing the table of contents is counterproductive. Thus, you may want to find a more efficient way to handle the task. The SEO Blog Writer app by Magefan can do exactly that.
This app allows you to add a table of contents to any place in the post in one click. Then, the table of contents will be generated automatically based on your headings (H2, H3, H4, etc.).
The generated table of contents is clickable, so you don't have to add heading IDs manually. Besides, you have more flexibility here as you don't have to add the table of contents to the general template, and can decide what posts to use it for.
This Magefan Blog app offers you a fully-featured blogging environment and not just the table of contents, so this is certainly a win-win.
Tips for the Shopify Blog Table of Contents
Now that you have three options to choose from, you can get right to it. Still, there are a few things to keep in mind before adding the Shopify blog table of contents.
Add clickable links
The key task of the contents is to facilitate post navigation. Thus, make sure the links in your table of contents are clickable.
This way, readers can navigate to the chapters directly without having to scroll up and down looking for the right info. It is specifically relevant for lengthy pieces with a vast number of topics covered.
Highlight only the key sections
Another important task of the Shopify blog table of contents is to reflect the structure of your post. However, it doesn't mean that you have to feature all of the headings.
Identify the key elements of your post that would highlight the content best. It would also be great to create a nested table of contents for a better experience. But try to avoid unnecessary depth.
Use keywords in the headings
As we've covered above, the Shopify blog table of contents is important not only for readers but also for search engines. It helps them understand the structure of your posts better, upping your chances of higher positions in search results.
Include relevant keywords in your content headings to enhance your Shopify blog SEO. Try to incorporate the keywords naturally to make the table of contents both descriptive and SEO-optimized.
Although the Shopify blog table of contents might seem like a small tool, it makes a great difference. So, it's worth a try if you want to better blog structure, navigation, and understanding..
