There are three common causes:
No headings exist for the TOC to use: insert headings into your content using the heading levels configured in RuffRuff Table of Contents, then check again.
RuffRuff Table of Contents is set to "Disabled": open the app settings screen and set the status to enabled.
The TOC app block is hidden in the theme editor: check that the eye icon next to the TOC app block is not grayed out.
If the issue persists, please contact us.
See “The Table of Contents Is Not Displaying” for details.
There are three possible causes:
Your theme is not an OS 2.0 theme: App blocks are only supported on OS 2.0 themes. On a legacy theme, enable the app embed instead.
You have a non-supported template open: This app supports only the blog post, product, page, and collection templates. Open one of these templates.
You are not on the Regular Plan: The product, page, and collection templates are available only on the Regular Plan. Upgrade to the Regular Plan to add the app to these templates.
If none of these apply, please contact us.
See “The App Embed or App Block Is Not Showing Up” for details.
If you see a "Cannot access" message when opening a template in the theme editor, it means no published content of that type currently exists in your store. Create and publish at least one item of that content type.
See “Cannot Access a Template” for details.
Headings added as theme sections or page-builder blocks cannot be included in the table of contents.
RuffRuff Table of Contents builds the TOC by parsing the HTML heading tags (H1–H6) found in blog post body text (article.content), product descriptions (product.content), page content (page.content), and collection descriptions (collection.description). Content added via Shopify sections lives in a separate part of the DOM and is not currently supported as a TOC source.
Structure your content using heading formats in the rich text editor (content body) to have them reflected in the TOC.
The TOC automatically uses the font set by your theme. RuffRuff Table of Contents does not apply its own font family and inherits the theme's CSS. You can adjust the font size (in px) from the app's Settings page.
To change the font family itself, you may be able to add styles to the .ruffruff-table-of-contents selector in your theme's custom CSS (requires knowledge of theme customization).
See “Settings Page Overview” for details.
There is no built-in transparency option, but you can achieve a similar effect by setting the TOC background color to match your theme's background color.
See “Settings Page Overview” for details.
The app itself does not include a translation feature. However, the TOC reads the headings from the page each time it is viewed, so if the page is shown in a translated state (e.g., via a translation app), the headings in the TOC also appear in that language.
On the other hand, text you enter on the app's customization page (the TOC title and the Show / Hide / Show all button labels) is not translated. For multilingual stores, set text that works across all languages, or leave it blank.
Note: title and button text set individually per app block or app embed can be translated per language using your theme's translation feature (Light plan or above).
See “Translate Title and Button Text” for details.
There are two main differences in how RuffRuff Table of Contents works depending on your theme type.
1. How the app is added to the theme
OS 2.0 themes: add an app block
Legacy themes: enable an app embed
2. Available display position options
OS 2.0 themes support all three options:
Specified in the theme editor
Before the first heading
Specify a CSS class name
Legacy themes support two options only:
Before the first heading
Specify a CSS class name
Note: please be aware that ongoing maintenance support for legacy themes may become difficult going forward.
Due to Shopify's caching, changes to your settings may take some time to appear on your storefront. Please wait a while and check again. If the issue persists after several tens of minutes, please contact us. Please note that we may request collaborator access to your Shopify store in order to investigate.
See “Settings Changes Not Reflected in the Table of Contents” for details.
Phone and video call support (e.g., Zoom) is not currently available. Support is provided via a dedicated contact form, in both English and Japanese.