In RuffRuff Table of Contents, set "Position" to "Specify class name" on the "Customize the table of contents" screen to display the table of contents at the beginning of the element with that class name. If multiple elements have the same class name, only the first is used. It cannot be placed in the middle of the element or immediately after a specific child element.
Add the "Table of Contents" app block on an Online Store 2.0 theme, or an app embed on a vintage theme. For setup steps, see Initial Setup and App Block vs. App Embed.
(1) Check the class name at the desired position
Check the class name of the element where you want the table of contents. Do not enter a leading dot (.). For example, enter article-template__content, article--content, or rte.
(2) Change the position
Select "Settings" from the app menu to open "Customize the table of contents," then select "Specify class name" under "Position." A class name input field appears.
(3) Enter the class name and save
Enter the class name in the field, then select "Save."
After saving, open a page containing headings included in the table of contents on your online store using the configured theme. Setup is complete when the table of contents appears at the beginning of the element with the specified class name and selecting an item moves to its corresponding heading.
Note: If no element with the specified class name is found, that setting alone does not hide the table of contents. If the display conditions are met, it remains at the app block or app embed position.
For other position options, see Customize the Table of Contents.