There are two ways to display a table of contents: app blocks and app embeds. Use an app block on an Online Store 2.0 theme and an app embed on a vintage theme.
Use an app block on an Online Store 2.0 theme and an app embed on a vintage theme.
Theme type | Method to use |
|---|---|
Online Store 2.0 theme | App block |
Vintage theme | App embed |
For instructions on adding the app, see Initial Setup.
This method adds the “Table of Contents” app block in the theme editor. You can move it as a section or block. No theme files are added.
The app block is named “Table of Contents,” with “Table of Contents” displayed below it. Display on blog posts is available on all plans. Display on products, pages, and collections is available on Regular Plan.
Template | App block name | Required plan |
|---|---|---|
Blog posts | Table of Contents | All plans |
Products | Table of Contents | Regular Plan |
Pages | Table of Contents | Regular Plan |
Collections | Table of Contents | Regular Plan |
Open the theme editor from “Add app block” on the home screen to add the app block to the target template. It cannot be added to templates such as the home page or blog listing.
When you select the “Table of Contents” block in the theme editor, its settings (“Custom Liquid” and “Text”) appear on the right. These settings take effect on Light Plan or above.
This method enables the app from “App embeds” in the theme editor. Use it to display a table of contents on a vintage theme. On a vintage theme, you can also open app embeds from “Add app block” on the home screen.
The app embed names and required plans are listed below. The product, page, and collection embeds are available only on Regular Plan.
Template | App embed name | Required plan |
|---|---|---|
Blog posts | Article (Vintage theme) | All plans |
Products | Product (Vintage theme) | Regular Plan |
Pages | Page (Vintage theme) | Regular Plan |
Collections | Collection (Vintage theme) | Regular Plan |
When you enable “Article (Vintage theme)” in the theme editor, a table of contents appears in the preview. The blue message above it appears only in the theme editor.
When a page contains two or more tables of contents, such as when both an app block and an app embed are enabled, the app keeps only the one closest to the beginning of the page and removes the others.
Caution: On an Online Store 2.0 theme, disable app embeds and use only an app block. If both are enabled, the table of contents that remains may be in a different position than intended.
Open “Settings” in the app to choose one of the following positions. The default is “Above the first heading.”
Position | What it does | Supported themes |
|---|---|---|
Above the first heading | Displays immediately before the first heading selected under “Headings” | All supported themes |
Specify in Theme editor (Online Store 2.0 Only) | Keeps the table of contents where the app block is placed | Online Store 2.0 themes |
Specify class name | Displays at the beginning of the first element with the specified class name | All supported themes |
When the position is “Specify class name,” only the first matching element is used if multiple elements have the same class name. If no element with the specified class name is found, the table of contents is not hidden. It remains at the app block or app embed position.
For instructions on specifying a class name, see Display the Table of Contents at a CSS Class.