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

Frequently Asked Questions

Can I add a table of contents to my Squarespace blog without a plugin?

Yes — this tool provides a self-contained snippet using HTML, CSS, and JavaScript that adds a responsive table of contents (TOC) to any Squarespace 7.1 blog post without needing third-party plugins or external libraries.

Does this Table of Contents work on mobile in Squarespace?

Absolutely. Unlike many workarounds, this TOC snippet is fully mobile-friendly. It includes a floating toggle button for smaller screens, so readers can jump between sections even on phones or tablets.

How do I create anchor links in Squarespace automatically?

This tool scans your headings (like H2s) and auto-generates anchor links to each section. The script ensures clean, clickable navigation without needing to manually insert anchor IDs.

Is there a plugin for a table of contents in Squarespace 7.1

Squarespace doesn’t support native plugins or built-in TOC blocks. This custom code snippet acts like a lightweight plugin by adding anchor navigation to your blog without external dependencies.

Is this tool good for SEO and accessibility?

Yes. A structured table of contents improves readability and helps Google understand your page layout, which may increase your chances of earning featured snippets. It also benefits screen reader users by offering better navigational structure.

Do I need a commercial license for client or paid use?

If you're using this on a client website or any commercial/monetized Squarespace site, a one-time license is required. Personal blogs and portfolios can use the tool for free.

Frequently Asked Questions

How do I add a reading time estimate to my Squarespace blog?
This tool automatically calculates and displays reading time using a simple script. Just copy and paste the generated code into your blog’s Page Footer via Squarespace’s code injection feature.

Can I add a progress bar to a Squarespace blog post?
Yes — this generator creates a lightweight, customizable progress bar that tracks how far a reader has scrolled. It works natively with Squarespace 7.1 using a small JavaScript snippet.

Is this reading time & progress bar tool mobile-friendly?
Yes, the progress bar is fully responsive and adapts to all screen sizes, including tablets and smartphones. It enhances UX across devices.

How is reading time calculated?
You can choose your desired words-per-minute (WPM) setting. The default is 250 WPM — ideal for most general audiences. The tool scans your post content and uses this to estimate total read time.

Does this tool work on multiple blog sections?
Yes. Just enter one or more blog slugs (e.g. /blog, /articles) and the code will only activate on those specific pages.

Is this available as a Squarespace plugin?
Squarespace doesn’t support traditional plugins, but this snippet acts as a plugin alternative — no external libraries or services needed.

Do I need to pay for this tool?
It’s free for personal Squarespace sites. If you’re using it on commercial or client projects, a one-time license is required for £49.99.

Disclaimer

This script is provided as-is with no guarantees. While it's designed to be safe for most Squarespace sites, always test changes before going live — especially if you’ve installed third-party plugins, custom fonts, or heavy integrations. By using this code, you accept that we are not liable for any unexpected behavior or performance changes.

☰ 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.