Shopify blog table of contents: add and verify jump links

A blog table of contents is a short list of links to useful sections within the article. Add one when readers may need to skip to a particular answer. The important test is whether every link reaches the right heading on mobile and with a keyboard, not whether a tool awards an SEO point.

This guide includes a small working HTML example and a release checklist. The example is a standalone local fixture, not a claim of compatibility with every Shopify theme. Primary documentation was checked on 17 September 2026.

Decide whether the article needs section navigation

A short answer with two paragraphs may not need a table of contents. A sizing guide with measuring steps, a comparison and care advice probably benefits from a way to reach those tasks directly.

Start with meaningful headings. “Measure the inside of your bag” tells a reader more than “Important information.” Use main headings for the article's sections and subordinate headings for details within them. W3C's accessibility guidance explains how descriptive, logically nested headings help users understand and navigate content. W3C heading guidance.

Keep the outline smaller than the article. Listing every minor heading can create a second wall of text before readers reach the answer. A brief opening answer followed by a concise outline is a practical editorial choice, not a mandatory search-engine format.

Check for an existing generator first

A theme, blog app or custom article template may already generate a table of contents. Inspect one published article before adding another. Two generators can create duplicate menus, duplicate IDs or links to headings that one generator has renamed.

Choose one owner for the outline. If an app maintains it, test that edits to headings update the links. If you maintain it manually, include link verification in the article review. The blog SEO checklist covers the other page-level checks.

Build the smallest useful HTML version

Shopify documents HTML editing in the rich text editor for blog posts, while warning that unsuitable pasted markup can cause storefront display problems. Save a copy of the existing content and work in a preview before publishing changes. Shopify rich text editor documentation.

The core pattern is a normal link and a matching unique heading ID:

<nav aria-label="On this page">
  <ul>
    <li><a href="#measure-bag">Measure your bag</a></li>
    <li><a href="#compare-fit">Compare the fit</a></li>
  </ul>
</nav>
<h2 id="measure-bag">Measure your bag</h2>
<p>Record the usable internal dimensions.</p>
<h2 id="compare-fit">Compare the fit</h2>
<p>Compare those dimensions with the item's widest points.</p>

The # belongs in the link destination, not in the ID. Keep each ID unique within the page and stable when you lightly rewrite a heading. An old shared fragment link can stop working if the ID changes.

The downloadable example adds ordinary page styling and visible keyboard focus. It contains no external scripts, trackers or product recommendations. Its sample measuring text demonstrates navigation only; it is not a tested product-fit method.

Audit failure cases instead of checking only the first link

Failure	What a reader experiences	What to inspect
Missing target	Clicking changes the hash but not the intended section	Exact correspondence between fragment and ID
Duplicate IDs	A link can reach the wrong instance	Every target ID appears once
Sticky header overlap	The heading is hidden after the jump	Actual header height and scroll offset
Edited heading	Menu label or destination becomes stale	Manual list and generated heading updates
Narrow-screen overflow	The outline or code sample widens the page	Wrapping and contained horizontal scroll
Removed focus outline	Keyboard position is difficult to see	Focus styles and keyboard traversal

If a sticky header hides destinations, a theme developer can consider scroll-margin-top on the relevant headings and test it across breakpoints. Do not paste a global offset without checking the header: desktop and mobile headers may differ.

A collapsible outline should have an operable control and a clear expanded state. The static example deliberately avoids that additional behavior. If your theme adds it, test the collapsed and expanded states rather than assuming the basic anchor test covers both.

A five-minute verification pass

Open the published or preview article at a narrow width and use each outline link. Confirm that the destination heading is visible, not merely that the address gained a fragment. Then use the keyboard to reach the links, activate them and continue through the article.

Copy a complete URL including a fragment into a fresh navigation. It should still reach the intended section. Rename one heading in a safe draft and recheck the outline to establish whether your generator follows the edit. Finally, restore or update the stable IDs deliberately.

Our standalone example has two fragment links and two unique destinations. Local browser verification checks both jumps at narrow and desktop widths; it does not certify a merchant theme or demonstrate a traffic improvement. Keep the same acceptance questions when adapting it.

Keep the outline honest about SEO and AI discovery

A table of contents does not establish indexing, better rankings or assistant citations. Its immediate purpose is helping readers find a section. Write that section so it answers its heading, supports factual claims and includes relevant limits.

Good navigation also cannot repair an oversized image, an inaccurate product claim or an unfocused article. Use the media guide for page assets and the content brief for the article's purpose.

Citelift publishes this example to make the mechanism inspectable. Use it as a starting point, verify the actual output from your editor and theme, and keep the outline in the same review cycle as the article it describes.