After you install the app, add the table of contents to a theme from the home screen to display it on your online store. Start with display on blog posts.
Prerequisite: To add a table of contents to blog posts, you need at least one published blog post. Put headings in the body (the default is H2 and H3).
Before you start setup, confirm the following.
RuffRuff Table of Contents is installed
The app is enabled on the home screen
If you want to display the table of contents on blog posts, at least one published blog post exists
If you want to display it on products, pages, or collections, you are using the Regular plan
On the home screen, choose a theme under "Add the app to a theme," then continue with "Add app block" next to the page you want.
(1) Select a theme
From Shopify admin, go to Apps and open "RuffRuff Table of Contents." Under "Select a theme" on the home screen, choose the target theme. For an Online Store 2.0 theme, the message "This theme is Online Store 2.0 theme" appears.
(2) Open the blog post theme editor
Select "Add app block" next to "Blog posts." The theme editor opens for the blog post template.
(3) Add the Table of Contents app block
In the left menu of the theme editor, select "Add block" or "Add section," then add "Table of Contents." Move it to the position you want, then select "Save" in the upper-right corner.
Limitation: Adding the app block to product, page, and collection templates is available on the Regular plan. If a row shows "Upgrade to unlock," check your plan.
You can change the colors, spacing, and headings later.
(1) Change the design (optional)
Open "Customize the table of contents" from the app menu. Change the colors, spacing, and headings, then select "Save."
On a vintage theme, use an app embed. When you choose the theme under "Select a theme" on the home screen, the message "This theme is Vintage theme" appears.
Select "Add app block" next to "Blog posts" to open App embeds in the theme editor. Turn on "Article (Vintage theme)," then select "Save."
To choose between an app block and an app embed, see App Block vs. App Embed.
Check: Open a published blog post that contains headings in the online store, and confirm that the table of contents appears.
If the above still does not solve the issue, contact us through the contact form.
When you contact us, include the following information.
The store's myshopify.com domain
The theme name
The type of page you want to display
The items you have already checked