Configuration
Installation and basic setup guide
Set up and customize your Table of Contents to perfectly match your Shopify theme. Easy Table of Contents (eToC) is designed to be "plug-and-play" but offers deep customization for power users.
---
🚀 Quick Setup
Getting eToC running on your store is a two-step process:
1. Activate Extension: On your eToC dashboard, click the "Activate Extension" button. This will automatically open your Shopify Theme Editor. 2. Enable App Embed: In the Shopify Theme Editor, ensure the Easy Table of Contents toggle under App Embeds is set to ON, then click Save.
Once enabled, eToC will immediately begin appearing on your articles using the default settings.
---
🛠️ The Article Wrapper (Critical Setting)
This is the most important configuration setting in eToC.
The Article Wrapper is the CSS selector that tells eToC exactly where your content is located (e.g., .article-content or #main-post).
- Self-Configuring: In most cases, our RND engine detects this automatically. You don't need to change it if your ToC is working.
- Multiple Containers (Builder Support): eToC now supports multiple content areas. If you are using a Page Builder (like PageFly, Shogun, or GemPages) where content is split across different sections, you can enter multiple selectors separated by commas (e.g.,
.section-one, .section-two). eToC will scan all of them and combine the headings into a single Table of Contents. - When it fails: If the extension is enabled but the Table of Contents is not appearing, it almost always means the Article Wrapper is incorrect.
- How to Fix: You can find this setting under Advanced Settings in your dashboard. If you aren't sure what to enter, ask your developer to find the main content CSS selector for your theme, or contact our support—we will find it and configure it for you for free.
🏗️ Settings Groups
The Settings Groups feature allows you to create different designs and behaviors for different parts of your store. You can create a group for "Blog Posts" and a completely different one for "Product Pages."
- Global Default: These settings apply to everything unless a specific group overrides them.
- Template Matching: Assign groups based on page types (Article, Page, Product, Collection).
⚙️ Configuration Breakdown
1. Main Configuration
- Title: The heading that appears at the top of your ToC (e.g., "Table of Contents" or "Quick Navigation").
- Heading Levels: Select which tags (H1 through H6) should be scanned. Most users prefer H2 and H3.
- Minimum Headings: The ToC will only appear if at least this many headings are found in your content.
2. Positioning
- Inner Content: Places the ToC directly inside your article (e.g., "Top" or "Before first H2").
- Floated: A "sticky" ToC that follows the user as they scroll. You can choose Top-Right or Top-Left.
- Drawer: Hides the ToC inside a slide-out menu button. Great for saving space on mobile and desktop.
- Destination Selector: For advanced layouts, you can "teleport" the ToC into a specific element in your theme (like a sidebar) by providing its CSS selector.
3. Visual Style & Behavior
- Counter Type: Choose between Numeric (1.1, 1.2), Bullet, or None.
- Hierarchical View: When enabled, sub-headings (like H3) will be indented under their parent headings (H2).
- Smooth Scrolling: Adjust the Scroll Offset to ensure that when a user clicks a link, the heading isn't covered by your theme's sticky header.
4. Advanced Controls
- Exclude Specific Content: Use tags or handles to prevent the ToC from showing on certain pages.
- Custom JS Hooks: Run your own JavaScript before or after the ToC is generated for deep theme integration.
Need help finding your Article Wrapper? Contact our support team for a free setup assistance.