When you add a table of contents to the product template, a table of contents is displayed based on the headings in each product’s description. Display on products 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 “Products (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 product 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 product template
Select “Add app block” next to “Products (Available on Regular Plan).” The theme editor opens for the product 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 “Product (Vintage theme),” then select “Save.”
In the online store, open a published product page 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. Also confirm that the corresponding row on the app home screen shows “Added.”
The table of contents does not appear on a product that has no headings matching the selection.
The table of contents is generated from headings in the product description. The default selection is H2 and H3.
Included: Headings formatted in the product description
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