From "Customize the table of contents" in the app menu, you can change how the table of contents looks and behaves. The settings apply to every template. You can check the result in the preview on the right.
(1) Open Customize the table of contents
From Shopify admin, go to Apps and open "RuffRuff Table of Contents." Select "Customize the table of contents" from the app menu.
(2) Change the settings
Change the settings while watching the preview.
(3) Save
Select "Save."
Prerequisite: Add the "Table of Contents" app block to the theme, or add an app embed on a vintage theme. If you have not added it, saving settings does not display the table of contents on the online store.
You can change the following settings on every plan, including Free.
Setting | What it does |
|---|---|
Title | The heading at the top of the table of contents. Hidden if blank |
Text alignment | Left, center, or right |
Indentation | Indent by heading level. Available only when left-aligned |
Numbering | Bullets, numbers, or none. Available only when left-aligned |
Section line | A horizontal line between items |
Headings | H1–H6 to include. Default is H2 and H3 |
Position | Above the first heading, specify in the theme editor, or specify a class name |
Scroll | Animation when moving to a heading |
Scroll offset | Top spacing for a fixed header (px) |
Font size of title | Title size (px). 0 uses the theme default |
Font size of headings | Item size (px). 0 uses the theme default |
Padding top, bottom, left, and right | Inner spacing (px) |
Max width of table of contents | Maximum width (px). 0 means no limit |
Alignment | Left, center, or right. Available when a max width is set |
Background, border, section line, title, and heading | Colors for each part |
The text shown at the top of the table of contents. If you leave it blank, the title is hidden.
The horizontal position of the items. Choose left, center, or right. Indentation and numbering are available only when left-aligned.
Shifts lower heading levels to the right. This is available only when text alignment is left.
On: Indents H3 under H2, and so on
Off: Aligns every item in the same position
The marker at the start of each item. This is available only when text alignment is left.
Bullets: Adds • at the start
Numbers: Adds 1. 2. 3. Nested headings display as 1.1
None: Adds no marker or number
Shows a horizontal line between items. Change the color in the Section Line color setting.
The heading levels to include. You can select more than one from H1–H6. The default is H2 and H3. If the body has none of the selected headings, the table of contents is not displayed.
Choose where the table of contents appears on the page.
Above the first heading: Displays immediately before the first heading among the selected heading levels
Specify in Theme editor (Online Store 2.0 Only): Displays where you placed the app block
Specify class name: Displays as the first child of the specified element
To specify a class name, see Display the Table of Contents at a CSS Class.
Sets whether the page moves smoothly to the heading when a customer selects an item.
The spacing from the top of the screen (px) when moving to a heading. If you have a fixed header, enter the header height. This helps keep the heading from hiding under the header.
Set the title and item sizes in px. If you set 0, the theme default size is used.
Set inner spacing and a maximum width in px. Alignment (left, center, or right) is available only when max width is greater than 0.
You can change the background, border, section line, title, and heading colors.
Limitation: Transparent background colors are not supported. To approximate transparency, set the same color as the destination theme background.
On the Light and Regular plans, you can also change the following.
Setting | What it does |
|---|---|
Enable customize heading (On hover) | Color and underline when the pointer is over an item |
Underline style for heading (On hover) | None, underline (solid), or underline (dotted) |
Heading ID generation | Numbering ID, or slug by heading title |
Show show/hide button | Fold the table of contents |
Show button name | Label shown when the table of contents is closed |
Hide button name | Label shown when the table of contents is open |
Initial display lines | How many items to show first. A Show all button appears if there are more |
Show all button name | Label for revealing the remaining items |
Heading (On hover) color | Link color when the pointer is over an item |
Show, hide, and show all colors | Text, background, and border colors for each button |
When "Enable customize heading (On hover)" is on, the hover color and underline are applied. Choose none, underline (solid), or underline (dotted).
How the anchor (the part after # in the URL) is created. Numbering ID uses IDs such as ruffruff-table-of-contents-item-1. Slug by heading title builds the ID from the heading text.
When this is on, "hide" and "show" appear next to the title so customers can fold the table of contents.
You can change the labels and colors for show, hide, and show all. The Show all button appears only when there are more items than the initial display lines.
How many table of contents items to show first. If there are more, a Show all button appears. Leave this blank to show all items. Set this to 0 to hide every item at first. Customers open it with "Show all."