Sticky Table of Contents in SideBar [Dawn Theme]

Store Design

Topic summary

A user is attempting to implement a sticky sidebar table of contents for blog posts on the Dawn Shopify theme, similar to the example on Ahrefs’ blog.

Current Approach:

  • Created a snippet called ‘table-of-contents’
  • Added CSS positioning properties (position: sticky, top: 20px)
  • Attempted to include the snippet in ‘main-article.liquid’

Issue:
The implementation is not working as intended. The code snippets provided appear corrupted or reversed (text is backwards), making it difficult to diagnose the specific problem.

Status:
The user is seeking help to successfully create this functionality and welcomes any assistance from the community.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

Hi all,

I have been trying to code a Sticky SideBar Table of contents for the Dawn theme.

I just want to add it at my Blog posts.

Here’s what I am looking for: https://ahrefs.com/blog/ahrefs-for-content-marketers/

I have been coding the following with no luck at all.

  1. Snippets > ‘table-of-contents.liquid’

  ### Table of Contents
  1. And then adding this code to ‘main-article.liquid’:

  

    

      
    

    
      
      {% include 'table-of-contents' %}
    

  


.table-of-contents {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
}

Any help is well received.

Thank you,