Tocito

A clean, easy table of contents for Shopify blog posts.

Getting started

Tocito builds a table of contents from your blog post headings. Before it can appear on your storefront, the Tocito app embed must be enabled in your theme.

If Tocito shows Not activated, the app embed is off.

To set it up:

Open Tocito in Shopify admin.
Choose a plan. You can start with a free trial before deciding to purchase.
Click Activate.
Enable the Tocito app embed in the Shopify theme editor.
Click Save in the theme editor.
Return to Tocito. The status should change to Activated.
Configure Tocito and save your changes.
Check a blog post on your storefront.

If the status does not change after saving the theme, .

Configure Tocito

Tocito has three settings tabs: General, Desktop, and Mobile.

General

Use this tab for settings that affect the table of contents overall.

Basics: title, heading levels, minimum headings required, mobile breakpoint, hidden blog posts, and SEO JSON-LD schema.
Text Formatting: text alignment, list style, and nested item indentation.
Advanced settings: custom CSS for cases where the built-in controls are not enough.

Desktop

Use this tab to tune the desktop table of contents. Most sections can be copied to mobile with Apply to Mobile.

Layout: placement, selected element, mobile fallback for floating layouts, background color, and maximum width.
Title: show or hide the title, then set title color, weight, and size.
Links: set link color, weight, and size.
Border: border color, width, and corner radius.
Shadow: shadow style and shadow color.
Padding: top, bottom, left, and right spacing inside Tocito.
Offset: top, bottom, left, and right position offsets.
Scroll behavior: smooth scroll and scroll offset.
Show more button: enable show more, collapsed height, button text, padding, font, and border.
Animation: choose none, following marker, crawling snake, or jumping marker, then tune color, size, offset, and roundness where available.

Mobile

Use this tab to tune the mobile table of contents. Most sections can be copied to desktop with Apply to Desktop.

Layout: placement, selected element, background color, and maximum width.
Title: show or hide the title, then set title color, weight, and size.
Links: set link color, weight, and size.
Border: border color, width, and corner radius.
Shadow: shadow style and shadow color.
Padding: top, bottom, left, and right spacing inside Tocito.
Offset: top, bottom, left, and right position offsets.
Scroll behavior: smooth scroll and scroll offset.
Show more button: enable show more, collapsed height, button text, padding, font, and border.

Desktop and mobile settings are separate, so you can use a floating layout on desktop and an inline layout on mobile.

Custom CSS

Use Custom CSS only when the built-in controls are not enough.

Custom CSS is in the General tab under advanced settings. It can target Tocito widget elements such as the wrapper, title, list, links, toggle button, fade areas, and floating layout.

Use {{mobileBreakpoint}} for mobile-only rules that should follow your Tocito mobile breakpoint.

Test custom CSS on both desktop and mobile before publishing. Need help with styling? .

Troubleshooting

Start with these checks if Tocito does not appear or the table of contents does not match your settings.

Tocito does not appear

Check that the Tocito app embed is enabled in the theme editor. Also check that the article has enough matching headings.

Headings are missing

Make sure the blog post uses real heading tags, such as H2 or H3, and that those levels are selected in Headings to include.

Tocito appears on the wrong posts

Check Hide on blog posts. You can exclude posts with comma-separated article IDs, exact tags, or wildcard patterns.

The desktop layout does not fit

If you use a left or right floating placement, enable Use mobile layout when desktop layout no longer fits.

Custom selector placement does not work

Make sure the CSS selector exists on the article page. If Tocito cannot find the selected element, it uses the fallback placement.

Still stuck? .

Uninstall Tocito

There are two ways to remove Tocito from your storefront.

Disable Tocito in the theme

Use this if you want to stop showing the table of contents but keep the app installed.

Open the Shopify theme editor, go to app embeds, disable Tocito, and save the theme.

Delete the app

Use this if you want to remove Tocito completely.

Uninstall Tocito from Shopify admin. After uninstalling, Tocito stops running on your storefront and you will no longer be able to manage its settings from the app.

Support

Need help? Email us at [email protected].

You can also use the inside the Tocito app.