Add a table of contents to Shopify FAQs and guides

To add a table of contents to Shopify FAQs or guides, add headings to the page body and place the Table of Contents block from RuffRuff Table of Contents in the page template. Displaying it on pages requires Regular Plan.

When one page contains information about orders, shipping, and returns, a table of contents lets readers move to the section they need. Decide which topics will be headings and how to order the questions before configuring it.

This guide uses our app with a guide written in a Shopify page body. The steps use an app block in an Online Store 2.0 theme.

Plans and features checked on October 28, 2026.

Example: link to the main sections of a store guide

The fictional page ご利用ガイド（撮影用デモ） is divided into the following four H2 headings. Readers can select a topic such as Shipping to move to its explanation.

• Orders
• Shipping
• Returns and exchanges
• Contact

For a real page, prepare the body according to the store's actual terms. Do not use the sample descriptions as the store's shipping or return policy.

Requirements for a table of contents on pages

Displaying a table of contents on pages is available on Regular Plan. Install and enable the app, then add the block to the relevant page template.

Duplicate the theme before making changes and check the result in the duplicate. When editing the body of a published guide, remember that those edits also affect the published page.

The entries are generated from the body on the page editing screen. Headings in separate theme sections or theme accordion items are not included. Add the headings you want in the table of contents to the page body.

Use H2 for topics and H3 for questions where needed

Decide how much detail to include before adding headings to the body. H2 and H3 are included by default, so questions placed under main topics as H3 headings will also appear.

1. Open the guide on the page editing screen and use H2 for main topics such as orders, shipping, and returns.
2. To link to individual questions, add each question as an H3 heading with its answer beneath the relevant H2.
3. Save and reopen the editing screen to confirm that the text is formatted as headings rather than just bold text.

For a page with many questions, the table of contents can show only the main topics. Select only H2 in Headings for that arrangement. “Headings” is a shared setting. Selecting only H2 also excludes H3 on other products, pages, blog posts, and other content displaying the table of contents.

Add Table of Contents to the page template

After saving the guide body, open the page template in the working theme. Check that it is the same template assigned to the guide.

1. Select the duplicated working theme under Add the app to a theme in RuffRuff Table of Contents.
2. Open the page template with Add app block beside Pages (Regular Plan).
3. Add Table of Contents using Add block or Add section.
4. Save in the theme editor and open the guide in that theme's preview.

The placement applies to other pages using the same template. Consider using a separate page template if the layout should be specific to the guide.

Adjust the position and length of the table of contents

The default position is Above the first heading. Check the actual page to see whether readers can find the navigation before reading the body.

To use the block's location in the theme editor, change Position to Specify in the theme editor (Online Store 2.0 themes only) in the customization settings. Confirm each save separately rather than assuming that saving the body also saves the position setting.

If including individual questions makes the table of contents long, consider showing only H2 headings or using “Display the show/hide button” and “Items shown initially.” Compare how easy the navigation is to find with how much space it takes before the body.

Check the destinations and mobile layout

1. Reload the guide and check that the entries match the saved headings.
2. Select a topic such as Returns and exchanges and check that it moves to the corresponding heading.
3. If the theme has a fixed header, check that the destination heading is not hidden beneath it.
4. At mobile width, check wrapping, horizontal overflow, and the readability of questions and answers.

After updating the guide body, check the relationship between its headings and the table of contents again. When adding questions, review whether the number and order of entries still suit the layout.

Check the body and placement if nothing appears

Check the required plan, app activation, assigned page template, and saved theme in that order. The table of contents does not appear when the body contains none of the levels selected in Headings.

Check headings entered in the body separately from headings placed in other theme sections. If the navigation must cover content outside the body, review the page structure first.

Choose a setup that fits the guide's structure

For a guide that brings several topics together on one page, a table of contents can link to main topics or individual questions. Check the requirements and current pricing, then choose a layout that fits the page's length.

Learn more about the app