Settings Page Overview

Open the Settings page in the app to customize the design and behavior of your table of contents. Changes are reflected in the live preview on the right side of the page in real time.

Click Save in the save bar after making any changes.

The text displayed at the top of the TOC box. Defaults to "Contents". You can change it to any text you like (e.g., "In this article", "Table of Contents"). Leave it blank if you don't want a title.

Sets the horizontal alignment of text within the TOC list.

• Left (default): Left-aligned. Indent and counter settings are enabled

• Center: Center-aligned. Indent and counter are disabled

• Right: Right-aligned. Indent and counter are disabled

Visually indents sub-level headings based on their level. Only available when text alignment is set to Left.

• On (default): H3 items under an H2 are shifted to the right, showing the hierarchy

• Off: All items are aligned at the same level regardless of heading level

Sets the marker style displayed before each TOC item. Only available when text alignment is set to Left.

• Bullet: Displays "•" before each item

• Numeric: Displays numbered markers such as "1.", "2.", "3." — nested headings show "1.1.", "1.2.", etc.

• None (default): No marker is shown

Controls whether a horizontal line is shown between TOC items.

• On (default): A thin divider line is shown between items

• Off: No divider is shown

The divider color can be changed in the Colors section.

Select which heading levels to include in the TOC. Multiple selections are allowed. Default is H2 and H3.

• Corresponds to the heading levels available in Shopify's rich text editor (H1–H6)

• Select the levels you actually use in your content. For example, if you only use H2 and H4, select those two

• If none of the selected heading levels exist in the content, the TOC will not be displayed

Specifies where on the page the TOC is displayed.

• Before the first heading (default): The TOC is automatically inserted just before the first heading matching the selected levels

• Specified in the theme editor (OS 2.0 only): The TOC appears where you place the app block in the theme editor

• Specify a CSS class name: The TOC is inserted just before the first element with the specified class name

Controls whether a smooth scroll animation plays when a TOC link is clicked.

• On (default): Smoothly scrolls to the target heading

• Off: Jumps to the heading instantly with no animation

Adjusts how far below the top of the viewport the target heading appears after clicking a TOC link (in px).

If your theme has a fixed header, set this to the header's height to prevent the heading from being hidden behind it. For example, if the header is 80px tall, enter 80.

Sets the font size of the TOC title and list items respectively, in px. The default for both is 14px. Setting 0 applies the theme's default font size.

Sets the inner spacing of the TOC box in px.

• Top padding: default 16px

• Bottom, left, right padding: default 0px

Sets the maximum width of the TOC box in px. Setting 0 removes the width limit (the TOC stretches to the full content width).

When a maximum width is set, the Alignment setting becomes available.

Available when Maximum Width is set. Controls the horizontal position of the TOC box within the content area.

• Center (default)

• Left

• Right

Sets the color of each part of the TOC. Use the color picker or enter a hex color code directly (e.g., #FF0000).

Enables color changes when a visitor hovers over a TOC link. When enabled, the Link Hover Underline Style and Link Hover Color settings take effect.

Sets the underline style shown on hover. Only applies when hover customization is enabled.

• None (default): No underline

• Solid: A solid underline

• Dotted: A dotted underline

Sets how IDs are assigned to headings for use in anchor links (the # part of the URL).

• Sequential ID (default): IDs are assigned sequentially — ruffruff-table-of-contents-1, ruffruff-table-of-contents-2, etc. Reliable and unaffected by heading text changes

• Heading title: Generates a slug from the heading text. Useful when you want the URL fragment to reflect the heading content for external anchor links

Displays a toggle button next to the title that lets visitors expand or collapse the TOC. When enabled, a "Hide" and "Show" button appear beside the title.

Customizes the text of the toggle button when the TOC is shown or hidden.

• "Show" button: Displayed when the TOC is collapsed (default: "show")

• "Hide" button: Displayed when the TOC is expanded (default: "hide")

Sets the number of TOC items shown when the page loads. If the number of items exceeds this value, a "Show all" button appears to reveal the rest. Leave blank to always show all items.

For example, entering 3 shows only the first 3 items — visitors click "Show all" to see the rest.

Customizes the text of the button that reveals all TOC items when Initial Display Lines is set. Default: "show all".