商品情報にスキップ
1 1
公開日:2026.04.15

【Horizon】ログイン状態でナビゲーションメニューを切り替える

【Horizon】ログイン状態でナビゲーションメニューを切り替える

用途

  • メニュー編集
詳細を表示する

Horizonテーマで、ログイン中の顧客にだけ別のナビゲーションメニューを表示する方法です。_header-menu.liquid に数行の条件ロジックを追加し、テーマエディタで「会員専用メニュー」を設定するだけで動作します。Dawn版の実装方法はこちら


完成イメージ

ログイン前は通常のナビゲーション、ログイン後は会員専用メニュー(Orders・Profile を追加)が表示されます。

ログイン前後のナビゲーションメニュー切り替え例


仕組み

ファイル冒頭で active_menu 変数を定義し、ログイン状態(customer オブジェクトが truthy かどうか)と会員専用メニューの設定有無に応じて、参照するメニューを切り替えます。

active_menu 条件ロジック(L9–16)


変更①:モバイルドロワーへの適用

モバイル用のドロワーメニューを呼び出している箇所で、linklist パラメータの参照先を active_menu に変更します。

header-drawer の linklist を active_menu に変更(L27)


変更②:ナビゲーションバーの for ループ(L46)

ナビゲーションバー(navigation_bar)のループ処理で、active_menu.links を参照するよう変更します。

for ループを active_menu.links に変更(L46 navigation_bar)

変更③:メガメニューの for ループ(L91)

メガメニューのループ処理も同様に変更します。

for ループを active_menu.links に変更(L91 mega menu)


変更④:schema への設定追加

ブロック settings の末尾に link_list 型の member_menu フィールドを追加します。これでテーマエディタから会員専用メニューを選択できるようになります。

schema に member_menu 設定を追加(L706–710)


テーマエディタの設定

実装後、テーマエディタでヘッダーの「Header Menu」ブロックを選択すると「会員専用メニュー(ログイン時のみ表示)」フィールドが追加されています。作成した会員専用メニューを選択して保存するだけで切り替えが有効になります。


注意点:会員専用メニューの作成

Shopifyの「Customer account main menu」をそのまま member_menu に指定すると、アカウントアイコンのドロップダウンにも同じメニューが反映されてしまいます。ヘッダーナビ用に別途「Member navigation」などの専用メニューを作成して設定することをおすすめします。

会員専用メニューには通常のナビ項目(Home, Catalog, Blog など)に加えて、アカウント系項目(Orders, Profile など)を含めておくと便利です。

なお、_header-menu.liquid はテーマ本体のファイルのため、Horizonのテーマ更新時に変更が上書きされる場合があります。更新後は手動での再適用、またはGitHub連携によるマージ管理をおすすめします。

ご購入(すべて¥0です)いただくと、サンプルコードをご覧いただけるようになります。

すでにご購入済みの方はこちらからログインしてください。

サンプルコード

動作検証済テーマ:Horizon 3.4.0

blocks/_header-menu.liquid — active_menu 条件ロジック(L9–16)

blocks/_header-menu.liquid — モバイルドロワーの linklist 変更(L26–31)