How to Add a Table of Contents to Your Squarespace Blog (That Works on Mobile)

Quick Guide

1. Fill out the fields
   Choose your title, which heading tag to use (h2 is best for most blogs), a color to match your theme, and whether you want the TOC visible on mobile.

2. Click “Generate Code”
   This will output three blocks of code: HTML, CSS, and JavaScript.

3. Copy and paste the code into your Squarespace site:

   • 📘 HTML → Add to a code block where you want the TOC to appear

   • 🎨 CSS → Paste into Custom CSS in your site settings

   • 🧠 JavaScript → Paste into the Page Footer in your page or site settings, inside <script> tags

📚 TOC Snippet Generator

Title:
Heading Tag to Scan:
h1 h2 h3 h4 Theme Color:
Blue Green Red Orange Purple Cyan Dark Yellow Pink Teal Show on Mobile?
Show Hide Generate Code

Is This Free to Use?

Personal use is free forever.
If you’re using this tool on your own blog, portfolio, or personal Squarespace site, you don’t need to pay — enjoy it freely.

Commercial use requires a one-time license.
If you’re a developer, agency, or using this on a client project or monetized site, please purchase a commercial license. It helps support ongoing development and gives you peace of mind.

One-time cost: £49.99 (normally £79.99)
Covers unlimited client sites, all current tools, and future updates.

👉 Learn more or buy a license here

☰ Table of Contents

Table of Contents

If you write long-form content on Squarespace — tutorials, essays, opinion pieces, or research-style posts — you’ve probably noticed something missing: there’s no built-in way to add a Table of Contents.

This can be frustrating when you're trying to structure your work, especially if you have lots of headings and want readers to navigate more easily. While Squarespace gives you the tools to format your text, it doesn’t provide a native solution to automatically generate anchor links or a TOC.

In this guide, we’ll walk through how to add a responsive, mobile-friendly Table of Contents to any Squarespace page using a small snippet of HTML, CSS, and JavaScript. This approach is designed to be simple, lightweight, and fully compatible with Squarespace 7.1.

Why a Table of Contents Helps

Adding a TOC isn’t just about aesthetics — it improves:

• Reader experience: lets visitors quickly jump to the section they care about

• Page structure: makes long content less overwhelming

• SEO: can help with featured snippets and Google’s in-page jump links

• Accessibility: clearer structure benefits users navigating via keyboard or screen reader

If your content includes more than a few main sections, a TOC is worth adding.

The Problem with Squarespace

Squarespace doesn’t currently offer:

• An auto-generating table of contents

• Page anchors linked to headings

• A way to toggle visibility of long page elements, especially on mobile

Some workarounds exist (like manually linking to headings), but they’re time-consuming, error-prone, and not scalable.

That’s where this small tool comes in — it scans your headings, builds the TOC, and gives you full control over how it appears, including on mobile devices.

How to Use the TOC Snippet Generator

You’ll find the generator below this article, or in the Behind the Blog section. Here's how to use it:

1. Fill Out the Generator Fields

• Title: What you want your TOC to be called (e.g., "Jump to Section", "On this Page", "Table of Contents")

• Heading Tag to Scan: Choose the level of heading you use for sections — usually h2

• Theme Color: Select a color that fits your site (this affects the border and button)

• Show on Mobile: Decide if the TOC should be visible on smaller screens (recommended: yes)

2. Click “Generate Code”

The tool will output three blocks of code:

• 📘 HTML

• 🎨 CSS

• 🧠 JavaScript

Each block comes with its own copy button, and you’ll be told exactly where to paste it.

3. Add the Code to Your Squarespace Site

• HTML: Add to a code block at the top or side of your blog post — wherever you want the TOC to appear

• CSS: Paste into Custom CSS (Pages → Website Tools→ Custom CSS)

• JavaScript: Paste into Page Footer (Pages → Website Tools→ Footer Code Injection)

No external libraries. No plugins. It’s fully self-contained.

Notes and Best Practices

• If you use multiple heading levels (e.g., h2 and h3), consider choosing just one for clarity

• The TOC will ignore any headings that match the title itself (so you don’t get a loop)

• You can style it further via the CSS block if needed — for example, change the toggle icon or make it collapsible by default

• Mobile users will see a fixed-position button that toggles the TOC open and closed

Troubleshooting

Nothing is showing up?

• Make sure your page contains headings that match the level you selected (h2, etc.)

• Double check that all code blocks were pasted correctly and saved

• If you’re on mobile and selected "Hide", it may be working — just not displaying

TOC appears but doesn’t work on click?

• Make sure your headings (h2, etc.) aren’t missing IDs. The script auto-generates them, but they must not be overwritten.

Simply put

Squarespace makes it easy to write content, but harder to structure it for longer reads. A responsive Table of Contents helps readers navigate, stay longer, and actually engage with the full post. This snippet-based approach gives you control without needing to leave the Squarespace ecosystem or rely on third-party plugins.