How to add a Table of Contents for your Blog Posts

Shopify Apps

Topic summary

A Shopify merchant created a free Table of Contents (TOC) generator tool after finding paid apps ($4/month) unsatisfactory. The tool generates code that can be manually added to blog posts without external scripts.

Alternative Solutions Shared:

  • Multiple free TOC generators and tools emerged (TeamPageOne, ContentPowered, RuffRuff)
  • EComposer app offers free TOC functionality
  • Several users shared custom JavaScript/CSS code snippets for Dawn and Impact themes
  • Plak theme now includes built-in TOC functionality
  • Scrowp theme has integrated TOC features

Key Technical Approaches:

  • Manual code insertion into theme files (main-article.liquid)
  • JavaScript that automatically converts H2 tags into clickable TOC items
  • Custom styling with CSS for appearance customization
  • Solutions for handling duplicate headings and hidden elements

Debate Points:

  • Paid app developer (Jump Links/ATSuccess) defended $4/month pricing, citing server costs, customer service, and SEO benefits
  • Original poster argued the feature shouldn’t require ongoing costs or external file loading
  • Community consensus leaned toward free, code-based solutions

Current Status: Multiple working free alternatives now exist, though some original links are no longer active. The discussion evolved into a resource-sharing thread with various implementation methods.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
15

ok had to rework a little but now it work (at least for me) :wink: - if not, it is a good starting point

#contents-container { background: #F3F9FF; padding: 15px; border-radius: 5px; } #contents-container a { font-size: 16px; line-height: 1.5; } #contents-container h3 { margin: 0; margin-bottom: 10px; } #contents-container ul { padding: 0; margin: 0; padding-left: 15px; } #contents-container li { list-style-type: none; /* Entfernt den Marker */ } html { scroll-behavior: smooth; }