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. Use an app embed on a vintage theme.
Use the following method based on your theme type.
Situation | Method to use |
|---|---|
Online Store 2.0 theme | App block |
Vintage theme | App embed |
Limitation: App embeds are for vintage themes. On an Online Store 2.0 theme, use an app block.
This method adds the "Table of Contents" app block in the theme editor. You can move it as a section or block. The app does not add theme files.
App block targets and plans are as follows.
Template | App block name | Required plan |
|---|---|---|
Blog posts | Table of Contents | Every plan |
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.
This method turns on the embed from App embeds in the theme editor. On a vintage theme, this is how you display the table of contents.
App embed targets and plans are as follows.
Template | App embed name | Required plan |
|---|---|---|
Blog posts | Article (Vintage theme) | Every plan |
Products | Product (Vintage theme) | Regular plan |
Pages | Page (Vintage theme) | Regular plan |
Collections | Collection (Vintage theme) | Regular plan |
On an Online Store 2.0 theme, if an app embed is also on, the table of contents can remain in an unexpected place, such as near the footer. On Online Store 2.0, turn the app embed off, and use only the app block.
In "Customize the table of contents," you can choose the following positions.
Position | What it does | Available themes |
|---|---|---|
Above the first heading | Displays immediately before the first heading among the selected heading levels | Every supported theme |
Specify in Theme editor (Online Store 2.0 Only) | Displays where you placed the app block | Online Store 2.0 themes |
Specify class name | Displays as the first child of the element with the specified class name | Every supported theme |
To specify a class name, see Display the Table of Contents at a CSS Class.