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

【Horizon】ドロワーメニューを開いた時に現在ページの階層を自動展開し、選択中メニューを強調する方法

【Horizon】ドロワーメニューを開いた時に現在ページの階層を自動展開し、選択中メニューを強調する方法

用途

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

Horizonテーマのドロワーメニューは、階層が深いと現在地までもう一度たどり直す必要があり、回遊の手間になりがちです。この設定をすると、ドロワーを開いた瞬間に「いま見ているページの階層」が自動で開いた状態になり、さらに現在ページのメニュー項目がグレー背景で強調されます。Dawn版の実装方法はこちら

テーマファイル(header-drawer.liquid 等)は一切編集せず、フッターグループにカスタムLiquidセクションを追加してコードを貼るだけで実装できます。トップのスライドパネルと、パネル内のアコーディオン(3階層目)の両方に対応しています。

完成イメージ

ドロワーを開くと現在ページの階層が自動表示される様子

設定手順

◆カスタムLiquidセクションを追加
・テーマエディタを開き、フッターグループに「カスタムLiquid」セクションを追加します。
・追加したセクションのLiquidコード欄に、本TIPSのコードを貼り付けて保存します。

フッターグループにカスタムLiquidセクションを追加してコードを挿入

◆ポイント
・現在ページの判定は、Shopify が自動で付与するマーカー(現在ページ・親階層)を利用するため、メニュー構成を変更しても自動で追従します。
・現在ページの強調表示はコードを入れるだけで常に有効です。手動でメニューを辿った場合も、いまどこを見ているかが一目で分かります。

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

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

サンプルコード

動作検証済テーマ:Horizon 3.5.1

カスタムLiquidセクション(フッターグループに追加)