[Horizon] A Theme Block That Auto-Generates a Breadcrumb List from the Store Menu in the Horizon Theme

How to add a breadcrumb public block to the Horizon theme that auto-generates breadcrumbs from the store menu's hierarchical structure. Works on product, collection, article, page, and blog index templates, and traces nested collection hierarchy (parent → child → grandchild) on product pages. The Dawn version is available here.

How it works — tracing the menu hierarchy

The block collects URLs related to the current page (collection URLs, blog URL, the page's own URL, etc.), walks the menu up to 3 levels deep, and picks the deepest matching node. On a product page, the deepest collection in the menu becomes the breadcrumb's anchor, and its ancestors are automatically included.

Step 1: Create the new block file

Create a new breadcrumb.liquid file under the blocks folder. In VS Code or your preferred editor, right-click the blocks folder, choose "New File…", and name it breadcrumb.liquid.

Step 2: Paste the sample code

Paste the sample code from the bottom of this article into breadcrumb.liquid and save. The core logic walks the menu up to 3 levels deep and picks the deepest match, so the breadcrumb on product pages reflects the full nested collection structure.

Step 3: Insert the block from the theme editor

Add a custom section to the template where you want the breadcrumb to appear, then insert the "Breadcrumb" block inside it. From the settings panel, choose the source menu (typically Main menu), separator style, colors, and overflow behavior (wrap or horizontal scroll).

Customizable settings

The following can be configured from the theme editor:

• Source menu — Main menu by default; footer or any other menu can be specified
• Show "Home" at the start and its label text — "Home", "ホーム", "TOP", etc.
• Separator — choose from /, ›, >, ·, —
• Overflow behavior — wrap (line break) or horizontal scroll. The scroll mode automatically hides the scrollbar on mobile
• Colors — text color (current page / separator) and link color are configurable independently (with alpha)
• Font size — separately configurable for desktop and mobile
• Item gap and container padding — fine-grained px control

Supported page types

Breadcrumbs are auto-generated on the following page types:

• Product page — traces the deepest parent collection in the menu and appends the product title (e.g., Home / WOMEN / WOMEN-TOPS / Product Name)
• Collection page — reflects the menu hierarchy (e.g., Home / WOMEN / WOMEN-TOPS)
• Article page — locates the parent blog in the menu and appends the article title (e.g., Home / Blog / Article Title)
• Page (static page) — reflects the menu hierarchy when registered (e.g., Home / About / Our Story). Falls back to Home / Page Title when not in the menu
• Blog index — displays Home / Blog Name regardless of menu registration

Deepest-match logic on product pages

When a product belongs to multiple collections, all of them are treated as candidates and the deepest one in the menu is selected. For example, if a product belongs to "WOMEN", "WOMEN-TOPS", and "SALE", and the menu has the structure Catalog > WOMEN > WOMEN-TOPS, the deepest "WOMEN-TOPS" becomes the anchor, and its ancestors WOMEN and Catalog are automatically included to build the full chain.

This ensures the breadcrumb always reflects the menu design, regardless of how the product is accessed (direct URL, via a collection, etc.).

Impact on theme files

This TIPS only requires creating a new blocks/breadcrumb.liquid file. No existing files are modified, so Horizon theme updates won't overwrite anything.