RuffRuff TOC Help Center

Display the TOC at a Specific CSS Class

You can display the TOC at the top of any element that has a specific CSS class name.

You can display the TOC at the top of any element that has a specific CSS class name.

This requires the app block to already be added to your Shopify theme (or the app embed to be enabled).

For example, if you want to display the TOC just below the blog post title, find the class name of the element directly below the title and use that. In the example screenshot, either article--content or rte would be used.

The TOC will be displayed inside the first element on the page that has the specified class name.

  1. Open the "Customize" page in the app

  1. Under Display position, select "Specify class name"

  2. Enter the class name in the input field that appears

    Note: Do not include a leading dot (.) in the class name

  3. Click Save