{"product_id":"2026-04-15","title":"【Horizon】ログイン状態でナビゲーションメニューを切り替える","description":"\u003cp\u003eHorizonテーマで、ログイン中の顧客にだけ別のナビゲーションメニューを表示する方法です。\u003ccode\u003e_header-menu.liquid\u003c\/code\u003e に数行の条件ロジックを追加し、テーマエディタで「会員専用メニュー」を設定するだけで動作します。Dawn版の実装方法は\u003ca href=\"\/products\/2023-04-15\"\u003eこちら\u003c\/a\u003e。\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003e完成イメージ\u003c\/h3\u003e\n\u003cp\u003eログイン前は通常のナビゲーション、ログイン後は会員専用メニュー（Orders・Profile を追加）が表示されます。\u003c\/p\u003e\n\u003cp\u003e\u003cimg style=\"aspect-ratio: 1.25;\" height=\"640\" width=\"800\" class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-15_1.png?v=1776264909\" alt=\"ログイン前後のナビゲーションメニュー切り替え例\"\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003e仕組み\u003c\/h3\u003e\n\u003cp\u003eファイル冒頭で \u003ccode\u003eactive_menu\u003c\/code\u003e 変数を定義し、ログイン状態（\u003ccode\u003ecustomer\u003c\/code\u003e オブジェクトが truthy かどうか）と会員専用メニューの設定有無に応じて、参照するメニューを切り替えます。\u003c\/p\u003e\n\u003cp\u003e\u003cimg style=\"aspect-ratio: 2.54;\" height=\"315\" width=\"800\" class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-15_2.png\" alt=\"active_menu 条件ロジック（L9–16）\"\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003e変更①：モバイルドロワーへの適用\u003c\/h3\u003e\n\u003cp\u003eモバイル用のドロワーメニューを呼び出している箇所で、\u003ccode\u003elinklist\u003c\/code\u003e パラメータの参照先を \u003ccode\u003eactive_menu\u003c\/code\u003e に変更します。\u003c\/p\u003e\n\u003cp\u003e\u003cimg style=\"aspect-ratio: 3.04;\" height=\"263\" width=\"800\" class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-15_3.png\" alt=\"header-drawer の linklist を active_menu に変更（L27）\"\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003e変更②：ナビゲーションバーの for ループ（L46）\u003c\/h3\u003e\n\u003cp\u003eナビゲーションバー（\u003ccode\u003enavigation_bar\u003c\/code\u003e）のループ処理で、\u003ccode\u003eactive_menu.links\u003c\/code\u003e を参照するよう変更します。\u003c\/p\u003e\n\u003cp\u003e\u003cimg style=\"aspect-ratio: 3.38;\" height=\"237\" width=\"800\" class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-15_4.png\" alt=\"for ループを active_menu.links に変更（L46 navigation_bar）\"\u003e\u003c\/p\u003e\n\u003ch3\u003e変更③：メガメニューの for ループ（L91）\u003c\/h3\u003e\n\u003cp\u003eメガメニューのループ処理も同様に変更します。\u003c\/p\u003e\n\u003cp\u003e\u003cimg style=\"aspect-ratio: 3.38;\" height=\"237\" width=\"800\" class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-15_5.png\" alt=\"for ループを active_menu.links に変更（L91 mega menu）\"\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003e変更④：schema への設定追加\u003c\/h3\u003e\n\u003cp\u003eブロック settings の末尾に \u003ccode\u003elink_list\u003c\/code\u003e 型の \u003ccode\u003emember_menu\u003c\/code\u003e フィールドを追加します。これでテーマエディタから会員専用メニューを選択できるようになります。\u003c\/p\u003e\n\u003cp\u003e\u003cimg style=\"aspect-ratio: 2.02;\" height=\"395\" width=\"800\" class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-15_6.png\" alt=\"schema に member_menu 設定を追加（L706–710）\"\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003eテーマエディタの設定\u003c\/h3\u003e\n\u003cp\u003e実装後、テーマエディタでヘッダーの「Header Menu」ブロックを選択すると「会員専用メニュー（ログイン時のみ表示）」フィールドが追加されています。作成した会員専用メニューを選択して保存するだけで切り替えが有効になります。\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003ch3\u003e注意点：会員専用メニューの作成\u003c\/h3\u003e\n\u003cp\u003eShopifyの「Customer account main menu」をそのまま \u003ccode\u003emember_menu\u003c\/code\u003e に指定すると、アカウントアイコンのドロップダウンにも同じメニューが反映されてしまいます。ヘッダーナビ用に別途「Member navigation」などの専用メニューを作成して設定することをおすすめします。\u003c\/p\u003e\n\u003cp\u003e会員専用メニューには通常のナビ項目（Home, Catalog, Blog など）に加えて、アカウント系項目（Orders, Profile など）を含めておくと便利です。\u003c\/p\u003e\n\u003cp\u003eなお、\u003ccode\u003e_header-menu.liquid\u003c\/code\u003e はテーマ本体のファイルのため、Horizonのテーマ更新時に変更が上書きされる場合があります。更新後は手動での再適用、またはGitHub連携によるマージ管理をおすすめします。\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":48746029187323,"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-15.jpg?v=1776261670","url":"https:\/\/store-dojo.com\/products\/2026-04-15","provider":"STORE DOJO","version":"1.0","type":"link"}