In RuffRuff Table of Contents, you can change the appearance and behavior of the table of contents on the "Customize the table of contents" screen. Settings saved here are shared across all templates. The preview on the right lets you check the appearance before saving.
Add the "Table of Contents" app block on an Online Store 2.0 theme, or an app embed on a vintage theme. If you have not added it, saving settings does not display the table of contents on your online store. For the setup steps, see Initial Setup.
(1) Open Customize the table of contents
From Shopify admin → Apps, open "RuffRuff Table of Contents," then select "Settings" from the app menu. You can also select "Customize" on the "Customize Table of Contents" card on the home screen.
(2) Change the settings
Change the settings while watching the preview on the right. When you make a change, an "Unsaved changes" bar appears at the top of the screen.
(3) Save
Select "Save." To cancel your changes, select "Discard."
After saving, open a published blog post that contains headings on your online store using the configured theme. Setup is complete when the table of contents reflects the colors, spacing, and other settings you changed.
If you enabled "Show show/hide button" on the Light Plan or higher, also select the table of contents show/hide button and check that the table of contents closes and opens.
Settings on the "Free Plan" card can be changed on every plan, including the Free Plan.
Table Of Contents Title: Text displayed at the top of the table of contents. The placeholder is "Table Of Contents." Leave it blank to hide the title.
Text alignment: The default is "Left." Choose "Left," "Center," or "Right." If you select anything other than "Left," indentation and numbering are disabled.
Indentation and numbering are enabled only when text alignment is set to "Left."
Indentation: The default is "On." "On" shifts lower levels to the right according to the heading level. "Off" aligns all items in the same position.
Numbering: The default is "None." "None" adds no markers or numbers. "Numbers" adds numbers such as
1,1.1,2, and2.1in the preview. "Bullets" adds•at the start of each item.
Section Line: The default is "On." Displays horizontal lines between items. Change the line color with "Section Line" under "Color."
The heading levels to include in the table of contents. You can select multiple levels from h1–h6. The default is h2 and h3. If the body contains none of the selected heading levels, the table of contents is not displayed.
Set where the table of contents appears on the page and what happens after an item is selected.
Above the first heading: The default. Displays immediately before the first heading among the levels selected under "Headings."
Specify in Theme editor (Online Store 2.0 Only): Displays where you placed the app block.
Specify class name: Displays at the beginning of the first element with the specified class name. For setup steps, see Display the Table of Contents at a CSS Class.
Enable animation for scroll: Enabled by default. When a table of contents item is selected, the page moves smoothly to the heading.
Scroll Offset: The default is 0px. This is the spacing from the top of the screen after moving to a heading. If you have a fixed header, enter its height in px. This offset is used only when "Enable animation for scroll" is enabled. If the position is still off, see Heading Position Is Off After Selecting a Table of Contents Item.
Font size of title / Font size of headings: The default is 14px. Set to 0 to use the font size specified by the theme.
Padding Top / Padding Bottom / Padding Left / Padding Right: Spacing inside the table of contents in px. The default is 16px at the top and 0 at the bottom, left, and right.
Max Width Of Table Of Contents: Maximum width in px. The default is 0, meaning no limit.
Alignment: The default is "Center." Applies when the display area is wider than the specified maximum width. "Left," "Center," and "Right" are available only when the maximum width is greater than 0.
You can change the background, border, section line, title, and heading colors.
Transparent background colors are not supported. To approximate transparency, set the same color as the background of the destination theme.
On the Light Plan and Regular Plan, you can also change settings on the "Light Plan" card. On the Free Plan, heading hover customization, show/hide buttons, and Initial Display Lines are disabled.
When "Enable customize link (On hover)" is enabled, the color and underline are applied when the pointer is over a heading. The default underline style is "None." Choose "None," "Underline (Solid)," or "Underline (Dotted)."
How the anchor (the part after # in the URL) is created when navigating from the table of contents. The default is "Numbering ID."
Numbering ID: Adds sequential IDs in table of contents order, such as
ruffruff-table-of-contents-item-1andruffruff-table-of-contents-item-2.Slug by heading title: Generates a slug from the heading title.
Enable "Show show/hide button" to let customers collapse the table of contents. If you have not changed the labels, the buttons remain in English: hide / show / show all.
Hide button name: The default is
hide. Displayed when the table of contents is open.Show button name: The default is
show. Displayed when the table of contents is closed.Initial Display Lines: Leave blank (the default) to display all items. Enter a number to display up to that many items. If the number of items exceeds the specified number, a "show all" button appears. Set to 0 to display no items initially; customers can open them with "show all."
Show all button name: The default is
show all.
On the online store, [hide] appears above the table of contents. When Initial Display Lines is set to 3, the first 3 items and the show all button appear.
Select [hide] to close the table of contents, leaving only [show].
To change the title or button text for each block, see Set Title and Button Text per Block.
For "show" and "hide," you can change only the text color. For "show all," you can change the text, background, and border colors.
To add HTML or Liquid above or below the table of contents, see Add Custom Liquid Above or Below the Table of Contents.