Table of Contents not working in Blog Post

Technical Q&A
,

Topic summary

A user encountered an issue where anchor links in a table of contents weren’t functioning in a Shopify blog post, despite working correctly in CodePen.

Initial Setup:

  • Table of contents used standard HTML with <ul>, <li>, and <a href> tags linking to heading IDs
  • Headings were properly labeled with matching IDs (e.g., id="1_0")

Troubleshooting Steps:

  • First suggestion: Remove list tags and use anchor tags directly with <br> separators — this didn’t resolve the issue
  • Root cause identified: Custom JavaScript code (previously added for free-shipping modals) was interfering with default anchor tag click behavior

Resolution:

  • The original poster identified and removed the conflicting JavaScript
  • Issue was resolved by fixing the custom code

Additional Resource:

  • A third-party app was suggested for automated table of contents generation in Shopify themes (both vintage and OS2)

The discussion reached a successful resolution through collaborative debugging.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Hello world!

I’m working on a long-form blog post. I’ve included a table of contents at the top.

Blog post here: https://adventureandy.com/blogs/news/boot-lace-buyers-guide

The table of contents is a list with the following layout:

<div id="toc_container">
<h2 class="toc_title">Contents</h2>
<ul class="toc_list">
<li><a href="#1_0">1. Introduction</a></li>
<li><a href="#2_0">2. The Best Boot Lace Materials</a></li>
</ul>
</div>

Each heading in the blog post body is labelled as follows:

<h2 id="1_0">1. Introduction</h2>

The table of contents works perfectly in CodePen. Everything links as it should. However, in my Shopify blog post the links don’t work. Any help would be greatly appreciated.

2

Hello @Andrew_Wildman

Can you please remove

3

Hello @Sweet_Savior_3 ,

Thanks for the suggestion, I’ve implemented it exactly as you suggested, with some
tags to separate each line. Still this isn’t working. Could it be something about the styling of my container?


## Contents

1. Introduction

2. The Best Boot Lace Materials

2.1 Leather Boot Laces

.css for #toc_container:

#toc_container {
  background: #fafafa none repeat scroll 0 0;
  border: 1px none #aaa;
  display: table;
  margin-bottom: 1em;
  padding: 20px;
  width: 100%;
}

Thanks for the help,

Andrew

4

It is not working because there is some theme default scripts which are triggered on the tag click >>

Sweet_Savior_3_0-1708013160860.png

If you have JS knowledge you can alter the code or you can seek developer help at a reasonable rate because the code needs tweak to work as per your requirement.

Thanks
1 Like
5

Thanks a lot. I put this JS into the site for our free-shipping modals months ago!

That’s what happens when you let the janitor write the JS.

I’ll fix it now. Appreciate the help :slightly_smiling_face:

6

Hey,

maybe a bit late, but could be helpful for others. We have developed an automated table of contents app, which is creating the table of contents in your products, blog posts, collections and pages automatically. It works in vintage and OS2 themes.

Ahoi Apps Table of Contents