After installing the app, start by displaying a table of contents on blog posts. If you open the app before any settings have been saved, onboarding opens instead of the home screen.
Use an app block on an Online Store 2.0 theme and an app embed on a vintage theme. See App Block vs. App Embed to choose the appropriate method.
RuffRuff Table of Contents is installed.
The app is enabled. “Disable app” appears in the upper-right corner of the home screen.
The body of your blog post contains headings to include in the table of contents. The default “Headings” selection is h2 and h3.
You are using Regular Plan if you want to display a table of contents on products, pages, or collections.
If there are no published blog posts, a warning appears in the “Blog posts” row on the home screen and during onboarding. You can still use the link to open the theme editor. To check the display, prepare at least one published blog post containing headings.
If you open the app before any settings have been saved, the “Let's create a table of contents!” onboarding screen opens.
(1) Select heading tags in blog posts
Follow the on-screen instructions to select heading tags, then select “Next.” You can change this setting later.
(2) Add app block to your theme
Select “Add app block.” On an Online Store 2.0 theme, add the “Table of Contents” app block. On a vintage theme, enable “Article (Vintage theme).”
If there are no published blog posts, the warning “You need a published blog post to add app block” appears. You can still use the link to open the theme editor when this warning appears.
Select “Save” in the theme editor, return to onboarding, then select “Next.”
(3) Select plan
Follow the on-screen instructions to select a plan. Display on blog posts is available on all plans.
If you added an app block or enabled an app embed during onboarding, you can skip the section “Add a table of contents to your theme from the home screen” below. Use those instructions when you change themes or need to add it again.
On an Online Store 2.0 theme, choose the target theme under “Add the app to a theme” on the home screen, then select “Add app block” in the appropriate row.
(1) Select a theme
Open “RuffRuff Table of Contents” from Shopify admin → Apps. Choose the target theme under “Select a theme” on the home screen. For an Online Store 2.0 theme, “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. Rows where the app has already been added show “Added.”
The other row labels are “Collections (Available on Regular Plan),” “Pages (Available on Regular Plan),” and “Products (Available on Regular Plan).” These rows can only be opened on Regular Plan. If a row shows “Upgrade to unlock,” check your plan.
(3) Add the “Table of Contents” app block
On the left side of the theme editor, select “Add block” or “Add section,” then add “Table of Contents.” Move it to the desired position, then select “Save” in the upper-right corner.
In the theme editor preview, a blue message above the table of contents explains its display position. This message appears only in the theme editor and does not appear in the online store.
Use an app embed on a theme that predates Online Store 2.0. When you choose the target theme under “Select a theme” on the home screen, “This theme is Vintage theme.” appears.
(1) Open app embeds
Select “Add app block” next to “Blog posts.” App embeds opens in the theme editor.
(2) Enable “Article (Vintage theme)”
Enable “Article (Vintage theme),” then select “Save.”
Optional: You can change the colors, spacing, and heading selection later. Open “Settings” in the app menu, change the settings, then select “Save.” For details, see Customize the Table of Contents.
In the online store, open a published blog post containing 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.
For display instructions for each content type, see the following articles.
If the issue persists after following these instructions, contact us through the contact form. Include the following information.
Your store’s myshopify.com domain
The theme name
The type of page where you want to display the table of contents
The items you have already checked