If the table of contents is not displaying, first check whether the app is enabled, whether an app block or app embed has been added to the theme, and whether the body contains the selected headings.
App status: If “Enable app” appears in the upper-right corner of the home screen, the app is disabled. The table of contents does not appear on the storefront while the app is disabled.
Theme setup: Check whether the template for the blog post, product, page, or collection where you want to display a table of contents contains the “Table of Contents” app block, or an app embed on a vintage theme.
Headings: Check whether the body contains headings to include in the table of contents. For products and collections, check the description. The default selection is h2 and h3.
Page being checked: If you are checking a product, page, or collection, confirm that you are using Regular Plan.
Recent changes: Check whether you recently switched themes or set the
table_of_contents.hiddenmetafield to 1.
Cause: If “Enable app” appears in the upper-right corner of the home screen, the app is disabled. The table of contents does not appear on the storefront while the app is disabled.
Solution: Select “Enable app.” The button changes to “Disable app.”
Open the published page where you want to display the table of contents in the online store and confirm that it appears.
Cause: The table of contents is displayed through the “Table of Contents” app block in the target template, or an app embed on a vintage theme. If neither has been added, the table of contents does not appear even when the body contains headings. After switching themes, you need to add it again to the target template in the new theme.
Solution: In the theme editor, open the template for the blog post, product, page, or collection where you want to display a table of contents. Check whether the “Table of Contents” app block is present, or an app embed on a vintage theme. If it is missing, add it and select “Save.”
For instructions on adding the app, see the following articles.
If the app block or app embed itself does not appear in the theme editor, see App Block or App Embed Not Appearing.
Cause: 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. The table of contents that remains may be in a different position than intended.
Solution: On an Online Store 2.0 theme, disable app embeds and use only an app block.
Cause: The table of contents is generated from headings in the body of a blog post, product, page, or collection. For products and collections, it uses the description. If heading styles are not used, the table of contents does not appear. Headings added through theme sections are not included. The table of contents also does not appear if the page has no headings matching the selection.
Solution: Use the rich text editor for the body to format the headings you want to include in the table of contents. The default selection is h2 and h3.
Cause: If “Headings” on the “Customize the table of contents” page does not match the levels used in the body, the table of contents does not appear. For example, if the body contains only h2 headings and only h3 is selected, the table of contents does not appear. The default selection is h2 and h3.
Solution: Open “Settings” in the app menu, change “Headings” to match the levels used in the body, then select “Save.” For details on the settings, see Customize the Table of Contents.
Cause: Display on products, pages, and collections is available on Regular Plan. Free Plan and Light Plan support display on blog posts only.
Solution: To display a table of contents on products, pages, or collections, use Regular Plan and add an app block or app embed to the target template. For plan details, see Plan Differences.
Cause: The table of contents does not appear on blog posts, products, pages, or collections where the table_of_contents.hidden metafield is set to 1.
Solution: Clear the value or set it to 0 on the affected content, then select “Save.” For setup instructions, see Hide the Table of Contents on Specific Content.
Cause: When the position is “Specify class name,” the table of contents is not hidden if no element with that class is found. It remains at the app block or app embed position. It may have stayed in its original position rather than disappeared.
Solution: Check the app block or app embed position on the page. If you want to move the table of contents to the specified position, check the class name. For instructions, see Display the Table of Contents at a CSS Class.
Open the affected published page in the online store. The setup is complete when the table of contents appears at the configured position.
If the issue persists after checking the items above, contact us through the contact form.
Include the following information when contacting us.
Your store’s myshopify.com domain
The URL of the page where you want to display the table of contents
The theme name
The items you have already checked