When you add a table of contents to the collection template, a table of contents is displayed based on the headings in that collection’s description. Display on collections 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 “Collections (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 collection description 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 description 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 collection template
Select “Add app block” next to “Collections (Available on Regular Plan).” The theme editor opens for the collection 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 “Collection (Vintage theme),” then select “Save.”
In the online store, open a published collection whose description 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 description.
When “Position” is set to its default, “Above the first heading,” the table of contents appears immediately before the first matching heading. Headings on product cards are not included in the table of contents. Also confirm that the corresponding row on the app home screen shows “Added.”
The table of contents does not appear on a collection that has no headings matching the selection.
The table of contents is generated from headings in the collection description. The default selection is H2 and H3.
Included: Headings formatted in the collection description
Not included: Headings added through theme sections and headings on product cards within the collection
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