RuffRuff Table of Contents is a Shopify app that automatically creates a table of contents from body headings in blog posts, products, pages, and collections and displays it on your online store. Customers can select a heading to move to that location.
The table of contents appears on an online store blog post as shown below.
You can do the following with this app.
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 or higher, use show/hide buttons, Initial Display Lines, and custom Liquid above or below the table of contents.
Hide the table of contents only on specific content. For setup steps, see Hide the Table of Contents on Specific Content.
For a feature comparison by plan, see Plan Differences.
Blog posts are supported on every plan. Products, pages, and collections require the Regular Plan.
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 |
The table of contents uses h1–h6 set as headings in the body rich text. The default for "Headings" is h2 and h3. Headings added through theme sections or page builders are not included.
Templates other than blog posts, products, pages, and collections, such as the home page, blog listing, and search results, are not supported for displaying the table of contents.
To change the appearance or included heading levels, see Customize the Table of Contents.
There are two ways to display the table of contents: app blocks and app embeds. Use an app block on an Online Store 2.0 theme. Use an app embed on a vintage theme.
Choose a position from "Above the first heading," "Specify in Theme editor (Online Store 2.0 Only)," or "Specify class name." For details on choosing a method, see App Block vs. App Embed.
Start with Initial Setup to display the table of contents. Begin with displaying it on blog posts. Displaying it on products, pages, and collections requires the Regular Plan.