RuffRuff Table of Contents is a Shopify app that builds a table of contents from the headings in blog posts, products, pages, and collections, then displays it on your online store. Customers can select a heading to move to that place.
You can do the following.
Display a table of contents on blog posts
On the Regular plan, display a table of contents on products, pages, or collections
Change the table of contents colors, spacing, font size, and position
On the Light plan and higher, use a show/hide button, initial display lines, and custom Liquid above or below the table of contents
Hide the table of contents on specific content
The pages you can display and the required plans are as follows.
Page | Heading source | Required plan |
|---|---|---|
Blog posts | Blog post body | Every plan |
Products | Product description | Regular plan |
Pages | Page body | Regular plan |
Collections | Collection description | Regular plan |
Prerequisite: Headings used in the table of contents are H1–H6 set in the rich text of the body. The default is H2 and H3.
Limitation: Headings added in theme sections or page builders are not included. You also cannot display the table of contents on templates other than the four above, such as the home page, blog listing, or search results.
There are two ways to display a table of contents: app blocks and app embeds. Use an app block on an Online Store 2.0 theme.
You can choose the position from "Above the first heading," "Specify in Theme editor (Online Store 2.0 Only)," or "Specify class name." To choose a method, see App Block vs. App Embed.
Follow these articles in order.