Table Of Contents

Author: Anna Nguyen 3397 views

The Table of Contents extension automatically generates a structured table of contents for long-form pages, helping visitors quickly navigate to specific sections without changing your existing content.

Key Features:

• Automatically generate a table of contents from your page headings.
• Improve navigation and readability on long pages.
• Customize the layout and design to match your store.

1. How to install/add the Table of Contents extension?

Step 1: From your EComposer dashboard, go to CRO Extensions from the left sidebar menu.
Step 2: Search for the Table Of Contents extension.
Step 3: Click Details and install the extension on your store.

2. How to add the Table of Contents to your page and customize it

Inside the EComposer editor, open the Extensions tab from the left sidebar, then find the Table Of Contents extension in the installed extensions list and drag it to your desired position on the page. After adding it successfully, you can select the blog post content and customize the heading levels, button text, layout, and style.

2.1. Content

First, select the article content you want to use. Then configure the following options:

Choose content: Select whether the Table of Contents should scan the Full page or only the Blog content.
- Full Page: Scans all eligible headings across the entire published page, including those outside the main article. Ensure the relevant text elements use HTML heading tags so they can be detected.
- Blog Content: Scans only the headings within the main blog article content. Headings in other areas, such as the header, footer, sidebar, or additional sections, will not be included.

Heading/Button text: Enter the text displayed as the heading or toggle button of the Table of Contents.

Type: Choose how the extension identifies the content headings:
- Tag Navigator: Uses heading tags applied to your elements, such as H2 or H3. Once selected, configure the corresponding levels under Heading Tag Level.
- CSS Selector: Uses custom CSS selectors assigned to your text elements. Once selected, enter the corresponding selectors under CSS Selector Level.

Show index for Level 1 and Level 2: Display numbering before each navigation item.

Icon: Select an icon to display before the navigation items.

Enable sticky position: Keep the Table of Contents visible while visitors scroll through the article.

Note: The Blog content option is available only when the page contains an Article Content element.

2.2. Design

The Design tab includes several sections that allow you to customize the appearance of the Table of Contents extension:

General: Customize the background color, border, border radius, box shadow, and other overall styling options.

Heading: Adjust the heading alignment, typography, text color, spacing, and other related settings.

Switch Button: Customize the button’s height, width, border, border radius, and other design options. Learn more here.

Navigator and Navigation Level 2: Customize the appearance of the Level 1 and Level 2 navigation items. These sections include similar styling options, which are explained in detail here.