- This Shopify Liquid code automatically creates a structured Table of Contents (TOC) from your blog post headings. When added to your article template, it scans the content for H2 and H3 heading tags and generates a numbered list that helps readers navigate long articles. The TOC displays main sections as whole numbers (1, 2, 3) and sub-sections with decimal numbering (1.1, 1.2, 2.1). Each item links directly to its corresponding section in the article through anchor links created from heading text. The design features clean typography with hover effects, proper indentation for sub-items, and a card-like container that matches most Shopify themes. Unlike plugin solutions, this lightweight implementation works without JavaScript, relying only on Liquid for processing and CSS for styling. The TOC only appears when headings are detected, ensuring empty containers don’t show up on simpler posts. This solution improves both user experience (making content more skimmable) and SEO (by reinforcing content structure for search engines). All styling is self-contained within the component for easy implementation across different themes.
- Need help implementing this? Contact a Shopify developer for professional customization and integration services to make it work perfectly for your store
How to Implement
Edit your
article.liquid
templatePlace this code where you want the TOC to appear (usually near the top)
The code automatically detects H2 (main sections) and H3 (sub-sections)
Numbers are added before each title
The styling matches your requested format exactly
Works with any number of headings and sub-headings
Shopify Schema Code
{% if article.content contains '
Table of Contents
{% assign toc_content = article.content %}
{% assign h2_count = 0 %}
{% assign parts = toc_content | split: '' | last | strip_html | strip %}
{% if level == 2 %}
{% assign h2_count = h2_count | plus: 1 %}
{% assign h3_count = 0 %}
{% unless forloop.first %}{% endunless %}
{{ h2_count }}. {{ header_text }}
{% elsif level == 3 %}
{% assign h3_count = h3_count | plus: 1 %}
-
{{ h2_count }}.{{ h3_count }} {{ header_text }}
{% endif %}
{% endunless %}
{% endfor %}
{% endif %}
CSS Code
Key Features:
Numbered Hierarchy:
Main sections numbered as 1, 2, 3…
Sub-sections numbered as 1.1, 1.2, 2.1, 2.2…
Clean Structure:
1. Main Title 1.1 Sub-title 1.2 Sub-title 2. Main Title 2.1 Sub-title 2.2 Sub-title
Automatic Numbering:
Numbers are generated automatically based on heading structure
No manual numbering required
Styling:
Proper indentation for sub-items
Consistent spacing
Hover effects for better UX
SEO Friendly:
Maintains semantic HTML structure
Preserves all anchor links