When you add a table of contents to the page template, a table of contents is displayed based on the headings in each page’s body. Display on pages is available on Regular Plan (shown as “🏢 Regular Plan” in the app).
Check the following before you begin.
You are using Regular Plan. On Free Plan and Light Plan, you cannot open the theme editor from the “Pages (Available on Regular Plan)” row on the home screen. For plan details, see Plan Differences.
The app is enabled on the home screen. The table of contents does not appear in the online store while the app is disabled.
The page body contains headings to include in the table of contents. The default selection is H2 and H3.
Add an app block on an Online Store 2.0 theme 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.
To choose the appropriate method, see App Block vs. App Embed.
(1) Select a theme
Open “RuffRuff Table of Contents” from Shopify admin → Apps. Under “Add the app to a theme” on the home screen, choose the target theme from “Select a theme.” For an Online Store 2.0 theme, “This theme is Online Store 2.0 theme.” appears.
(2) Open the theme editor for the page template
Select “Add app block” next to “Pages (Available on Regular Plan).” The theme editor opens for the page template.
Add the “Table of Contents” app block in the theme editor, then save.
(3) Add the “Table of Contents” app block
Add “Table of Contents” from “Add block” or “Add section,” then select “Save” in the upper-right corner.
Optional: To display the table of contents at the position specified in the theme editor, open “Settings” in the app, set “Position” to “Specify in Theme editor (Online Store 2.0 Only),” then save. Next, move “Table of Contents” to the desired position in the theme editor, then select “Save.”
Tip: In the theme editor preview, a blue message appears above the table of contents. This message appears only in the theme editor and does not appear in the online store.
Enable the app embed on a vintage theme.
(3) Enable the app embed
Enable “Page (Vintage theme),” then select “Save.”
In the online store, open a published page whose body contains H2 or H3 headings, using the theme where you added the app block or app embed. Setup is complete when the table of contents appears and selecting an item takes you to the corresponding heading in the body.
When “Position” is set to its default, “Above the first heading,” the table of contents appears immediately before the first matching heading. Also confirm that the corresponding row on the app home screen shows “Added.”
The table of contents does not appear on a page that has no headings matching the selection.
The table of contents is generated from headings in the page body. The default selection is H2 and H3.
Included: Headings formatted in the page body
Not included: Headings added through theme sections
For instructions on changing the heading levels to include, see Customize the Table of Contents.
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