loading...
loading...

How to add a Table of Contents for your Blog Posts Using Shopify

  • 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

  1. Edit your article.liquid template

  2. Place this code where you want the TOC to appear (usually near the top)

  3. The code automatically detects H2 (main sections) and H3 (sub-sections)

  4. Numbers are added before each title

  5. The styling matches your requested format exactly

  6. Works with any number of headings and sub-headings

Shopify Schema Code

				
					<div class="page-width">
  {% if article.content contains '<h2' or article.content contains '<h3' %}
  <div class="blog-toc">
    <h3 class="toc-title">Table of Contents</h3>
    <ol class="toc-list">
      {% assign toc_content = article.content %}
      {% assign h2_count = 0 %}
      {% assign parts = toc_content | split: '<h' %}
  
      {% for part in parts %}
        {% unless forloop.first %}
          {% assign level_part = part | slice: 0, 1 %}
          {% assign level = level_part | plus: 0 %}
          {% assign header_content = part | split: '</h' | first %}
          {% assign header_text = header_content | split: '>' | last | strip_html | strip %}
  
          {% if level == 2 %}
            {% assign h2_count = h2_count | plus: 1 %}
            {% assign h3_count = 0 %}
            </ol></li>{% unless forloop.first %}{% endunless %}
            <li class="toc-item-h2">
              {{ h2_count }}. {{ header_text }} <!-- लिंक हटा दिया -->
              <ol class="toc-sublist">
          {% elsif level == 3 %}
            {% assign h3_count = h3_count | plus: 1 %}
            <li class="toc-item-h3">
              {{ h2_count }}.{{ h3_count }} {{ header_text }} <!-- लिंक हटा दिया -->
            </li>
          {% endif %}
        {% endunless %}
      {% endfor %}
      </ol></li>
    </ol>
  </div>
  {% endif %}
</div>
				
			

CSS Code

				
					

<style>
  .blog-toc {
    background: #f8f9fa;
    border: 1px solid #e1e1e1;
    padding: 20px;
    margin: 30px 0;
    border-radius: 8px;
  }

  .toc-title {
    margin-top: 0;
    font-size: 1.3em;
    color: #333;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }

  .toc-list {
    padding-left: 20px;
    margin: 0;
  }

  .toc-sublist {
    padding-left: 30px;
    margin: 8px 0;
  }

  .toc-item-h2 {
    margin: 12px 0;
    font-weight: 600;
    list-style-type: none;
  }

  .toc-item-h3 {
    margin: 8px 0;
    font-weight: 500;
    font-size: 0.9em;
    list-style-type: none;
  }
</style>
				
			

Key Features:

  1. Numbered Hierarchy:

    • Main sections numbered as 1, 2, 3…

    • Sub-sections numbered as 1.1, 1.2, 2.1, 2.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
  3. Automatic Numbering:

    • Numbers are generated automatically based on heading structure

    • No manual numbering required

  4. Styling:

    • Proper indentation for sub-items

    • Consistent spacing

    • Hover effects for better UX

  5. SEO Friendly:

    • Maintains semantic HTML structure

    • Preserves all anchor links

Shahrukh Miya

Leave a Reply

Your email address will not be published. Required fields are marked *