Shopify plugin "Hanpo Easy Table of Contents".
Hanpo Easy Table of Contents
Help readers navigate your blog articles with a stylish, customizable table of contents
App Details
Automatically generates a table of contents from your blog article headings. Add the block to your theme — no coding required.
Text color, background, indent, marker customization, borders, font size, and corner radius, clickable links, collapsible TOC, and smooth scroll, custom CSS and overlay panel (a tab on the right bottom to expand the TOC). (Some features are available on paid plan.)
Each TOC block can be individually styled per placement — so you can use different designs in different sections of your theme.
Paid plans unlock additional features like collapsible TOC, smooth scroll navigation, link underline styles, overlay panel display, and custom CSS control
All settings are configured directly in the Shopify Theme Editor. No external dashboard required.
Feature List
- Each TOC block styled independently — different designs per placement location!
- Custom CSS for design control!
- Automatically generates TOC from your blog article headings
- Choose which heading levels to display: H1–
- Customize text/background color, indent, and marker; borders, padding, font size, and corner radius
- Collapsible TOC — let readers show/hide with one click
- Smooth scroll to headings on click
- TOC link underline styles: none, always, on hover
- Display as overlay panel on the right edge of screen
- Supports Japanese and English
*Available features vary by plan. Basic features are completely free, and paid features are also available with a 7-day free trial, so please take a look!
Pricing
■ Free plan
- Basic TOC display (static list, no clickable links)
- Heading level selection (H1–H3)
- Text color, background color, indent, and marker customization
■ Design plan — $1.99/month (or $19.9/year)
- All Free features
- Extended design options
■ Usability plan — $2.99/month (or $29.9/year)
- All Design features
- Clickable TOC links
- Collapsible TOC
- H4 / H5 / H6 heading display
- Smooth scroll / instant scroll
- TOC link underline styles
■ Pro plan — $4.99/month (or $49.9/year)
- All Usability features
- Overlay panel display
- Custom CSS (top-level div / ul / li / li::before)
- Available on "page" and "product page"
※All paid plans include a 7-day free trial.
Suppport / FAQ
Getting Started
Q: How do I add the table of contents to my blog?
A: After installing the app, go to your Shopify Admin > Online Store > Themes > Customize. Open a blog article template, click "Add block", and select "Easy Table of Blog Contents". Save the theme to publish your changes.
Q: The TOC is not showing any headings. What should I check?
A: Make sure your blog article contains heading tags (H2, H3, etc.) in the article body. The TOC block reads headings directly from the article content. Also check the block settings to confirm the correct heading levels are enabled (e.g., "Show H2" and "Show H3" are turned on). Note: H4, H5, and H6 are only available on the Usability plan or above.
Q: Can I use this app on pages other than blog articles?
A: The block is optimized for blog article pages. Using it on other page types (e.g., product pages, custom pages) requires the Pro plan.
Customization
Q: What can I customize on the free plan?
A: On the free plan, you can choose which heading levels to display (H1–H3), and adjust text color, background color, indent size, and marker style in the Theme Editor. The TOC is displayed as a static, non-interactive list — headings are shown as plain text without links. Border, border radius, title, shadow, padding size, and font size require the Design plan or above. Click-to-navigate links require the Usability plan or above.
Q: How do I change the border, font size, or title of the TOC?
A: These options are available on the Design plan or above. Once upgraded, open the Theme Editor, select the TOC block, and use the settings panel on the left to adjust these properties.
Q: Can I display H4, H5, or H6 headings?
A: Yes, H4, H5, and H6 are available on the Usability plan or above. On the free or Design plan, these heading levels are not displayed even if enabled in the settings.
Q: Can I collapse/expand the TOC?
A: Yes, the collapsible toggle is available on the Usability plan or above. Enable "Allow collapsing TOC" in the block settings.
Q: Can I add my own CSS?
A: Yes, custom CSS fields are available on the Pro plan. You can add CSS for the top-level div, ul, li, and li::before elements.
Plans & Billing
Q: What is included in the free plan?
A: The free plan includes basic TOC display as a static list (headings shown as plain text, no links), heading level selection (H1–H3), and text color, background color, indent, and marker customization in the Theme Editor.
Q: What does the Design plan add?
A: The Design plan unlocks border style and color, border radius, transparent background option, title display, box shadow, padding size, font size, and line height settings.
Q: What does the Usability plan add?
A: The Usability plan makes TOC items clickable links (on the free and Design plan, items are plain text with no navigation). It also adds H4/H5/H6 heading display, collapsible TOC, smooth/instant scroll on click, and link underline style options.
Q: What does the Pro plan add?
A: The Pro plan adds custom CSS control (top-level div, ul, li, li::before), overlay panel display mode, and the ability to use the TOC block on pages other than blog articles.
Q: How do I upgrade my plan?
A: Go to the app's admin page in your Shopify Admin and select the plan you want. Billing is handled securely through Shopify's Billing API.
Q: Can I cancel my paid plan anytime?
A: Yes. You can cancel or downgrade your plan at any time from the app's admin page. Your subscription ends at the end of the current billing cycle.
Q: Is there a free trial?
A: Yes, all paid plans include a 7-day free trial.
Troubleshooting
Q: The TOC appears in the Theme Editor preview but not on the live store.
A: Make sure you clicked "Save" in the Theme Editor after adding and configuring the block.
Q: The TOC block disappeared after a theme update.
A: Theme updates can sometimes reset theme customizations. Re-add the block in the Theme Editor. Your plan settings are preserved in the app.
Q: The app shows an error message about the plan.
A: Try reloading the app page.
All content on this page may be updated at any time without prior notice. Updated content takes effect immediately upon publication.