How I Added a Table of Contents to a Shopify Blog (Without Paid Apps)

Ram Dettmer

3 min read

Published Jan 19, 2022Updated:Sep 2, 2025

How I Added a Table of Contents to a Shopify Blog (Without Paid Apps)

I’ve always found Shopify powerful for e-commerce, but clunky when it comes to content. Recently, I wanted to improve navigation on a client’s blog by adding a Table of Contents — something that should be simple, but Shopify doesn’t support natively.

Like many of you, I started Googling around to see what other Shopify store owners had done. I even came across a solution shared by someone in the Shopify Community who built their own generator. It worked, but the problem was obvious: you had to manually add it to every post. That meant editing old articles one by one, and leaving behind messy injected code. Not what I was looking for.

I wanted something automatic. A solution that worked for every blog post, old and new, without me ever touching them again. And if I needed to remove it, I could just delete a single snippet of code.

So I started experimenting.

Finding the Right Approach

After spending a few hours testing, I remembered how some content systems auto-generate IDs for heading tags. That got me thinking: what if I just loop through all the H2s in a Shopify blog post, assign IDs, and build anchor links on the fly?

This way, the Table of Contents would generate automatically for any article, and readers could click to jump directly to the section they cared about.

The Code

Here’s the HTML I dropped below the blog title in my main-article.liquid file (in the Sections folder):

Code Block

<div class="page-width page-width--narrow"> <div id="toc"> <h4 class="h2">Table of Contents</h4> </div> </div>

And here’s the JavaScript snippet I added at the bottom of the same file:

Code Block

<script> var headers = document.querySelectorAll("#MainContent h2"); headers.forEach(function(header) { header.id = header.textContent.replace(/\s/g, "-").toLowerCase(); var tocContainer = document.getElementById("toc"); var anchor = document.createElement('a'); anchor.setAttribute('href', '#' + header.id); anchor.innerText = header.textContent; tocContainer.appendChild(anchor); }); </script>

This script finds all H2 tags in the blog content, generates IDs, and builds clickable links inside the TOC container.

Styling It

To make it look decent, I added this simple CSS:

Code Block

html { scroll-behavior: smooth; } #toc a { display: block; margin-bottom: 10px; color: inherit; } #toc { background: #f4f4f4; padding: 20px; margin-bottom: 30px; }

The smooth scroll is a nice touch — instead of a jarring jump, it glides down to the section.

What to Know

This only targets H2 tags. If you want H3s in there too, you’ll need to extend the script.
Depending on your theme, you may need to adjust the #MainContent selector.
Works fine on mobile, but test on your device to be sure.

Final Thoughts

Honestly, this was a quick win. In just a couple hours, I was able to put together an automatic Table of Contents for Shopify blogs — no plugins, no manual edits, and no recurring app fees.

If you run a Shopify store, adding something like this makes your content easier to navigate and can even improve SEO by increasing dwell time.

I hope this helps! If you try it, let me know how it works out for you — and if you’d rather not tinker with code, that’s exactly the type of customization my team at Hungry Ram can handle for you.