Installing Table of Contents Pro

One code snippet, pasted once. Your sticky sidebar TOC will be live in under a minute.

Video walkthrough coming soon

Before You Start

After purchase, you'll receive an email with an HTML file customized for your domain. Download that file and have it open — you'll copy everything inside it into Squarespace.

You'll need: Access to your Squarespace site's admin panel and the HTML file from your purchase email.

Requirements:

Squarespace 7.1 — not compatible with version 7.0 or older
Business plan or higher — Code Injection requires at least the Business (Core) plan
Blog post pages — the TOC is designed for blog posts, not regular pages

Open your blog post settings

In the Squarespace editor, open the blog post where you want the TOC to appear. Click the gear icon (⚙) in the top-right corner to open Post Settings.

Screenshot: Blog post editor → gear icon

Click the gear icon in the top-right to open your post settings.

Navigate to Code Injection

In the Post Settings panel, scroll down and click Advanced. You'll see a field labeled Post Blog Item Code Injection. This is where the TOC code goes.

Screenshot: Post Settings → Advanced → Code Injection

The Code Injection field is inside Post Settings → Advanced.

Paste the code

Open the HTML file you downloaded. Select all of the contents (Ctrl+A / ⌘+A) and copy it. Then paste it into the Code Injection field.

Screenshot: Code pasted into Code Injection field

Paste the entire contents of the HTML file into this field.

Important: Paste the complete file contents. Don't remove the <style> or <script> tags — the TOC needs both to work.

Save and preview

Click Save at the top of the Post Settings panel. Then open your blog post in a new tab (or click the preview icon) to see the TOC in action.

Screenshot: Live blog post with TOC sidebar

Your TOC sidebar should appear alongside your blog content.

Verify it's working

Check these three things to confirm a successful install:

✓ TOC appears — a sidebar (desktop) or collapsible menu (mobile) shows your post headings.
✓ Links work — clicking a heading in the TOC scrolls to that section.
✓ Scroll tracking — as you scroll, the active heading highlights in the TOC.

Adding the TOC to every blog post

The steps above add the TOC to a single post. If you want it on every blog post automatically, paste the code into your Blog Settings Code Injection instead:

1 In your Squarespace dashboard, go to Website → Pages → Blog.
2 Click the gear icon next to your Blog page to open Blog Settings.
3 Scroll to Advanced, then paste the code into Post Blog Item Code Injection.
4 Click Save. The TOC now appears on every post in that blog.

Screenshot: Blog Settings → Advanced → Post Blog Item Code Injection

Blog-level injection applies the TOC to every blog post automatically.

Tip: If you use blog-level injection and also have the code on an individual post, the TOC won't break — but you may see it render twice. Remove the per-post code if you switch to blog-level.

Customizing after install

Want to change colors, heading levels, or switch the sidebar to the left? Use the live preview on the product page to dial in your settings, then update the CSS variables at the top of the code.

No need to repurchase — the preview generates the same variables you already have.

Troubleshooting

TOC doesn't appear at all

Make sure you pasted the complete file contents — both the style and script sections. The post also needs at least one H2 heading for the TOC to render.

Double-check that you clicked Save at the top of the Post Settings panel after pasting.

View the live page, not the Squarespace editor preview. Code Injection doesn't run inside the editor.

Clicking a link scrolls to the wrong spot

Your site header is likely covering the heading. In the CSS variables at the top of the code, increase the scroll-margin-top value — try 100px or higher if your header is tall.

TOC shows on desktop but not on mobile

Check the mobile behavior setting in the config. If it's set to "hidden," the TOC won't appear on mobile. Change it to "collapsed" or "expanded."

Colors don't match my brand

Go to the Customize Your TOC section on the product page. Pick your colors using the color pickers there, then copy the updated values into the matching lines at the top of your pasted code.

Still stuck?

We're happy to help with installation, color matching, or any custom tweaks for your site.

Book a Free Consultation