Table Of Contents

Author: Anna Nguyen 3500 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 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: The Type option determines how the Table of Contents identifies headings on your page. Choose one of the following methods:

Tag Navigator: Uses heading tags applied to your elements, such as H2 or H3. Once selected, configure the corresponding levels under Heading Tag Level.

How to set it up: Assign the appropriate heading tags to the content you want to include in the Table of Contents. For Shopify blog content, format the relevant titles and subheadings as heading levels such as H2 or H3 in the Shopify content editor.

For content created in EComposer, use the Heading element or select the corresponding HTML heading tag in any supported element. Then, make sure the heading levels used in your content match the values selected under Heading Tag Level 1 and Heading Tag Level 2.

CSS Selector: Uses custom CSS selectors assigned to your text elements. Once selected, enter the corresponding selectors under CSS Selector Level.

How to set it up: Assign a custom CSS class or CSS ID to each heading you want to include in the Table of Contents. For Shopify blog content, open the HTML view and add the appropriate class or id attribute to the relevant headings or text.

For content created in EComposer, select the relevant element, then go to Advanced → Attributes and enter a value in CSS ID or CSS Classes. After that, enter the same selectors under CSS Selector Level 1 and CSS Selector Level 2 in the Table of Contents settings.

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.

Space from the top of the page to the heading content: Adjusts the distance between the top of the page and the target heading after a visitor clicks an item in the Table of Contents.

Scroll vertical alignment: Determines where the target heading appears in the viewport after scrolling, with options to position it at the Start, Center, End, or Nearest visible location.

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.