{"product_id":"2026-04-25","title":"【Horizon】テーマ「Horizon」でストアのメニューから自動でパンくずリストを生成するテーマブロック","description":"\u003cp\u003eHorizonテーマで、ストアメニューの階層構造から自動的にパンくずリストを生成する \u003ccode\u003ebreadcrumb\u003c\/code\u003e ブロック（public block）を追加する方法です。商品ページ・コレクションページ・記事ページ・固定ページ・ブログTOPすべてで動作し、商品ページではコレクションのネスト構造（親 → 子 → 孫）も自動でたどります。Dawn版の実装方法は\u003ca href=\"\/products\/2023-04-27\"\u003eこちら\u003c\/a\u003e。\u003c\/p\u003e\n\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\n\u003ch3\u003e仕組み — メニュー階層をたどる\u003c\/h3\u003e\n\u003cp\u003e表示中ページに関連するURL（コレクションのURL、ブログのURL、ページ自身のURLなど）を一覧化し、メニューを3階層まで走査して最も深い一致点を採用します。商品ページであれば「商品が属するコレクションのうち、メニュー上で最も深い位置にあるもの」が起点になり、そこから上位の階層もそのまま反映されます。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"メニュー階層をトレースしてパンくずリストを生成する仕組み\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-25_1.png?v=1777122262\" class=\"zoomable-image\" width=\"800\" height=\"600\" style=\"aspect-ratio: 1.33;\"\u003e\u003c\/p\u003e\n\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\n\u003ch3\u003e設定手順 ① ブロックファイルを新規作成\u003c\/h3\u003e\n\u003cp\u003e\u003ccode\u003eblocks\u003c\/code\u003e フォルダ配下に \u003ccode\u003ebreadcrumb.liquid\u003c\/code\u003e ファイルを新規作成します。VS Code 等のエディタで \u003ccode\u003eblocks\u003c\/code\u003e フォルダを右クリックし、「New File...」を選んで \u003ccode\u003ebreadcrumb.liquid\u003c\/code\u003e という名前で作成してください。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"VS Code で blocks フォルダを右クリックして新規ファイルを作成する手順\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-25_4.png?v=1777123362\" class=\"zoomable-image\" width=\"675\" height=\"566\" style=\"aspect-ratio: 1.19;\"\u003e\u003c\/p\u003e\n\n\u003ch3\u003e設定手順 ② サンプルコードを貼り付け\u003c\/h3\u003e\n\u003cp\u003e本記事下部のサンプルコードを \u003ccode\u003ebreadcrumb.liquid\u003c\/code\u003e の中にそのまま貼り付け、保存します。コードの核心はメニュー階層を 3 階層まで走査して最深一致を採用するロジックで、商品ページではコレクションのネスト構造をそのまま反映します。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"breadcrumb.liquid のメニュー走査・最深一致ロジック\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-25_3.png?v=1777123122\" class=\"zoomable-image\" width=\"713\" height=\"1086\" style=\"aspect-ratio: 0.657;\"\u003e\u003c\/p\u003e\n\n\u003ch3\u003e設定手順 ③ テーマエディタでブロックを挿入\u003c\/h3\u003e\n\u003cp\u003eパンくずを表示したいテンプレートにカスタムセクションを追加し、その中に「パンくずリスト」ブロックを挿入します。設定パネルで参照メニュー（通常は Main menu）を指定し、区切り文字や配色、はみ出し時の挙動（折り返し or 横スクロール）を選べます。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"テーマエディタでカスタムセクションにパンくずリストブロックを挿入する手順\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-25_2.png?v=1777122175\" class=\"zoomable-image\" width=\"800\" height=\"600\" style=\"aspect-ratio: 1.33;\"\u003e\u003c\/p\u003e\n\n\u003ch3\u003eカスタマイズ可能な設定\u003c\/h3\u003e\n\u003cp\u003eテーマエディタから以下を調整できます：\u003c\/p\u003e\n\u003cul\u003e\n  \u003cli\u003e\n\u003cstrong\u003e参照するメニュー\u003c\/strong\u003e — 通常は Main menu。フッターメニュー等を指定することも可能\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003e「ホーム」を先頭に表示\u003c\/strong\u003e・ラベル文言 — 「Home」「ホーム」「TOP」など自由に設定\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003e区切り文字\u003c\/strong\u003e — \u003ccode\u003e\/\u003c\/code\u003e \u003ccode\u003e›\u003c\/code\u003e \u003ccode\u003e\u0026gt;\u003c\/code\u003e \u003ccode\u003e·\u003c\/code\u003e \u003ccode\u003e—\u003c\/code\u003e から選択\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003e横幅をはみ出した時の表示\u003c\/strong\u003e — 折り返し（改行）／横スクロールの2択。横スクロールはモバイルでスクロールバーを自動的に隠す設計\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003e配色\u003c\/strong\u003e — テキスト色（現在ページ・区切り）／リンク色を個別指定（透明度対応）\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eフォントサイズ\u003c\/strong\u003e — PC\/モバイルそれぞれ独立して設定\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003e項目間の余白・コンテナのパディング\u003c\/strong\u003e — px単位で細かく調整\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003e動作対象のページ\u003c\/h3\u003e\n\u003cp\u003e以下のページで自動的にパンくずを生成します：\u003c\/p\u003e\n\u003cul\u003e\n  \u003cli\u003e\n\u003cstrong\u003e商品ページ\u003c\/strong\u003e — メニューに登録された親コレクションを最深まで辿り、末尾に商品名を追加（例：\u003ccode\u003eHome \/ WOMEN \/ WOMEN-TOPS \/ 商品名\u003c\/code\u003e）\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eコレクションページ\u003c\/strong\u003e — メニュー階層をそのまま反映（例：\u003ccode\u003eHome \/ WOMEN \/ WOMEN-TOPS\u003c\/code\u003e）\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003e記事ページ\u003c\/strong\u003e — 親ブログをメニューから検索し、末尾に記事タイトルを追加（例：\u003ccode\u003eHome \/ Blog \/ 記事タイトル\u003c\/code\u003e）\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003e固定ページ\u003c\/strong\u003e — メニューに登録されていればその階層を反映（例：\u003ccode\u003eHome \/ About \/ Our Story\u003c\/code\u003e）。メニュー外でも \u003ccode\u003eHome \/ ページタイトル\u003c\/code\u003e でフォールバック表示\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eブログTOP\u003c\/strong\u003e — メニュー登録の有無に関わらず \u003ccode\u003eHome \/ ブログ名\u003c\/code\u003e を表示\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003e商品ページの最深一致ロジック\u003c\/h3\u003e\n\u003cp\u003e商品が複数のコレクションに属する場合、それら全てを候補として扱い、メニュー上で最も深い階層にあるものを採用します。たとえば商品が「WOMEN」「WOMEN-TOPS」「SALE」の3コレクションに属し、メニューが \u003ccode\u003eCatalog \u0026gt; WOMEN \u0026gt; WOMEN-TOPS\u003c\/code\u003e の構造を持つなら、最深である「WOMEN-TOPS」が起点となり、自動的に上位の WOMEN・Catalog も含まれてフルチェーンが組み立てられます。\u003c\/p\u003e\n\u003cp\u003eこれにより、商品ページにアクセスする経路（直接URL、コレクション経由など）に関係なく、常にメニュー設計通りの階層が表示されます。\u003c\/p\u003e\n\n\u003ch3\u003eテーマファイルへの影響\u003c\/h3\u003e\n\u003cp\u003e\u003ccode\u003eblocks\/breadcrumb.liquid\u003c\/code\u003e を1ファイル新規作成するだけで導入できます。既存ファイルへの変更は不要なので、Horizonのテーマ更新時に上書きされる心配はありません。\u003c\/p\u003e\n","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":48780134547707,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-25.png?v=1777124150","url":"https:\/\/store-dojo.com\/products\/2026-04-25","provider":"STORE DOJO","version":"1.0","type":"link"}