Table of Contents / Jump Link Generator

Every major platform has a code view hiding somewhere in the editor. Open your post, switch to that view, select everything, and copy it:

• Shopify: in the blog post editor, click the <> button on the toolbar to "Show HTML". Select all, copy, and later paste the result back into the same view.
• WordPress (block editor): click the three-dot menu in the top right and choose "Code editor". The HTML includes <!-- wp:heading --> comments; that's fine, the tool keeps them, and the anchor IDs show up as the "HTML anchor" field on each heading block when you switch back.
• WordPress (classic editor): use the "Text" tab next to "Visual".
• Squarespace, Wix, Webflow, Ghost, and most others: paste the result into an HTML or Code block, or into the editor's source view if it has one.

If you only have the post as plain text or a Word document, the tool has nothing to link to, because there are no heading tags yet. Run it through our Word and Google Docs to HTML converter first, then paste the HTML here.

Yes. Shopify is the reason this tool exists. Shopify's blog has no built-in table of contents, the apps that add one cost a monthly fee, and the themes that include one mean redesigning your store. This generator started life embedded in our guide to adding a table of contents to a Shopify blog, and it now has its own page so it's easier to find and use.

The steps on Shopify are short. Open the post in your Shopify admin, click the <> button to show the HTML, select all and copy, paste it here, and click Generate. Then copy the result, go back to the same HTML view, select all, and paste over the old code. Save, and the table of contents is live. Shopify keeps the IDs on your headings, so the links keep working through later edits in the visual editor.

Since the table of contents is plain HTML, it doesn't depend on your theme or on any app, and it comes with you if you ever switch themes.

It's inserted right above your first H2 or H3, which is where most readers expect it: after your intro, before the first real section. If your post has no headings at that level, it goes at the very top instead. For WordPress block editor posts, it's wrapped as a Custom HTML block so it slots in cleanly between your other blocks.

You can move it anywhere you like. The whole block sits between <!-- Begin Table of Contents --> and <!-- End Table of Contents --> comments in the output, so it's easy to find, cut, and paste somewhere else. The links keep working wherever it lives, because they point at the IDs on your headings, not at a position in the page.

Indirectly, yes, and in a couple of ways you can actually see. When your headings have anchor IDs and a list of links pointing at them, Google can show "Jump to" links under your result in search, which take people straight to the section that answers their query. Those extra links make your listing bigger and more clickable, and Google only builds them from anchors that exist on the page. No anchors, no jump links.

The bigger win is for the people who are already on the page. Long posts are intimidating. A table of contents shows someone in two seconds that the thing they came for is in there, and lets them get to it without scrolling. That tends to mean fewer people bouncing back to the search results, which is the kind of behavior you want associated with your page.

What it won't do is magically rank a thin post. The table of contents only helps when the sections behind it are worth jumping to. If you're not sure your headings are pulling their weight, check them with our H1-H6 Heading Tag Checker before you add the links.

That's a sticky header getting in the way. The browser scrolls the heading to the very top of the window, and your site's navigation bar covers it. One line of CSS fixes it for every jump link on the site:

h2, h3, h4, h5 { scroll-margin-top: 90px; }

Change 90px to the height of your header. Add it to your theme's CSS (in Shopify that's the theme's custom CSS field or theme.css, in WordPress it's Appearance, Customize, Additional CSS). If you'd also like the page to glide to the section instead of snapping, add html { scroll-behavior: smooth; } alongside it.

A jump link has two halves: the link in the list, and an ID on the heading it jumps to. Your headings almost certainly don't have IDs yet, so the tool has to add them, and the only way to hand those back to you is as the full post. Paste the result over your old HTML and both halves are in place.

If your headings already have IDs, paste the post anyway and use the "Copy just the table of contents" button. The tool keeps any existing IDs it finds rather than renaming them, so the list will match your headings exactly as they are.

The table of contents is plain HTML, so it doesn't update itself. If you rename a heading, the old wording stays in the list until you change it, and if you add a new section it won't appear at all.

The quick fix is to run the post through the tool again. It recognizes the table of contents it made last time, removes it, and builds a fresh one from your current headings, so you can regenerate as often as you like without ending up with two. Small wording tweaks you can just make by hand in the list.

No. Everything happens in your browser. The HTML you paste never leaves your computer, which also means you can use the tool on unpublished drafts and client work without worrying about it. Your style settings are saved in your own browser so they're there next time; clear your site data and they're gone.