Horizonテーマで、ストアメニューの階層構造から自動的にパンくずリストを生成する breadcrumb ブロック（public block）を追加する方法です。商品ページ・コレクションページ・記事ページ・固定ページ・ブログTOPすべてで動作し、商品ページではコレクションのネスト構造（親 → 子 → 孫）も自動でたどります。Dawn版の実装方法はこちら。
仕組み — メニュー階層をたどる
表示中ページに関連するURL（コレクションのURL、ブログのURL、ページ自身のURLなど）を一覧化し、メニューを3階層まで走査して最も深い一致点を採用します。商品ページであれば「商品が属するコレクションのうち、メニュー上で最も深い位置にあるもの」が起点になり、そこから上位の階層もそのまま反映されます。
設定手順 ① ブロックファイルを新規作成
blocks フォルダ配下に breadcrumb.liquid ファイルを新規作成します。VS Code 等のエディタで blocks フォルダを右クリックし、「New File...」を選んで breadcrumb.liquid という名前で作成してください。
設定手順 ② サンプルコードを貼り付け
本記事下部のサンプルコードを breadcrumb.liquid の中にそのまま貼り付け、保存します。コードの核心はメニュー階層を 3 階層まで走査して最深一致を採用するロジックで、商品ページではコレクションのネスト構造をそのまま反映します。
設定手順 ③ テーマエディタでブロックを挿入
パンくずを表示したいテンプレートにカスタムセクションを追加し、その中に「パンくずリスト」ブロックを挿入します。設定パネルで参照メニュー（通常は Main menu）を指定し、区切り文字や配色、はみ出し時の挙動（折り返し or 横スクロール）を選べます。
カスタマイズ可能な設定
テーマエディタから以下を調整できます：
- 参照するメニュー — 通常は Main menu。フッターメニュー等を指定することも可能
- 「ホーム」を先頭に表示・ラベル文言 — 「Home」「ホーム」「TOP」など自由に設定
-
区切り文字 —
/›>·—から選択 - 横幅をはみ出した時の表示 — 折り返し（改行）／横スクロールの2択。横スクロールはモバイルでスクロールバーを自動的に隠す設計
- 配色 — テキスト色（現在ページ・区切り）／リンク色を個別指定（透明度対応）
- フォントサイズ — PC/モバイルそれぞれ独立して設定
- 項目間の余白・コンテナのパディング — px単位で細かく調整
動作対象のページ
以下のページで自動的にパンくずを生成します：
-
商品ページ — メニューに登録された親コレクションを最深まで辿り、末尾に商品名を追加（例：
Home / WOMEN / WOMEN-TOPS / 商品名） -
コレクションページ — メニュー階層をそのまま反映（例：
Home / WOMEN / WOMEN-TOPS） -
記事ページ — 親ブログをメニューから検索し、末尾に記事タイトルを追加（例：
Home / Blog / 記事タイトル） -
固定ページ — メニューに登録されていればその階層を反映（例：
Home / About / Our Story）。メニュー外でもHome / ページタイトルでフォールバック表示 -
ブログTOP — メニュー登録の有無に関わらず
Home / ブログ名を表示
商品ページの最深一致ロジック
商品が複数のコレクションに属する場合、それら全てを候補として扱い、メニュー上で最も深い階層にあるものを採用します。たとえば商品が「WOMEN」「WOMEN-TOPS」「SALE」の3コレクションに属し、メニューが Catalog > WOMEN > WOMEN-TOPS の構造を持つなら、最深である「WOMEN-TOPS」が起点となり、自動的に上位の WOMEN・Catalog も含まれてフルチェーンが組み立てられます。
これにより、商品ページにアクセスする経路（直接URL、コレクション経由など）に関係なく、常にメニュー設計通りの階層が表示されます。
テーマファイルへの影響
blocks/breadcrumb.liquid を1ファイル新規作成するだけで導入できます。既存ファイルへの変更は不要なので、Horizonのテーマ更新時に上書きされる心配はありません。
