【Horizon】ヘッダーのメニューをDawnのような「ドロップダウン」表示にする方法
テーマ「Horizon」のPC用メニューはメガメニュー形式だけで、Dawnのように親メニューのすぐ下に子メニューの一覧を小さく開く「ドロップダウン」表示は選べません。そこで、ヘッダーのメニューブロックを元にした新しいブロックを追加し、PC表示だけをドロップダウンに置き換える方法です。スマホのドロワーメニューはHorizon標準のまま使えます。
👉 実際の表示は、以下のデモストアで確認できます（PCで親メニュー「商品一覧」にマウスを乗せると、すぐ下に子・孫メニューが開く状態）。
horizon-store-q9zl2koe.myshopify.com
ストアパスワード：store-dojo
完成イメージ
親メニューにマウスを乗せると、すぐ下に子メニューと孫メニューが開きます。マウスを乗せて開く設定のときは、親メニューをクリックするとそのリンク先のページへ移動します（キーボード操作やタップでは開閉だけ行います）。
開き方・孫メニューの表示・見た目は設定で切り替えられる
◆ドロップダウン
・親メニューの開き方（PC）：マウスオーバーで展開／クリックで展開
・孫メニューの表示（PC）：最初から展開／クリックで展開（子メニューの横の矢印ボタンで開閉）
・孫メニューをタップで展開（スマホ）：オフにすると、スマホでも孫メニューを最初から展開して表示
◆ドロップダウンの見た目（PC表示）
・親メニュー：文字サイズ、文字の太さ、文字間隔、親メニュー同士の間隔、文字色、矢印の表示、ホバー時の見せ方（下線／文字色を変える／なし）
・パネル：最小幅、上下の余白、ヘッダーとパネルの間隔、角の丸み、影、枠線、背景色、文字色、開くときのアニメーション（フェード／スライド／なし）
・子メニュー：文字サイズ、文字の太さ、上下・左右の余白、ホバー背景色
・孫メニュー：文字サイズ、字下げ、文字の濃さ
色の設定を空のままにすると、ヘッダーの配色がそのまま使われます。
【設定手順】テーマエディタで設定する
導入後、テーマエディタの左パネルで「ヘッダー（ドロップダウンメニュー）」の中にある「メニュー（ドロップダウン）」を選ぶと、右パネルにドロップダウンの設定が表示されます。
【導入手順】コードを編集で3ファイルを追加し、header-group.json を書き換える
オンラインストア ＞ テーマ ＞ 「…」 ＞ コードを編集 から、次の順に作業します。テーマ本体のファイル（header.liquid・_header-menu.liquid）は変更しません。
◆① blocks/_header-menu-dropdown.liquid（新規作成）
・blocks フォルダで「新しいブロックを追加する」から作成し、購入特典のコードを貼り付けます
・_header-menu.liquid をコピーし、PC表示の部分（L66〜L188）をドロップダウンに置き換えたブロックです。スマホのドロワーとナビゲーションバーの部分は元のままです
◆② sections/custom-header.liquid（新規作成）
・sections フォルダで「新しいセクションを追加する」から作成し、header.liquid の中身をすべてコピーして貼り付けます
・L88・L92・L96 の3か所で、ブロック名 '_header-menu' を '_header-menu-dropdown' に書き換えます
・schema の "name" を "ヘッダー（ドロップダウンメニュー）" に変えると、テーマエディタで見分けやすくなります
◆③ snippets/dropdown-menu-style-vars.liquid（新規作成）
・snippets フォルダで「新しいスニペットを追加する」から作成し、購入特典のコードを貼り付けます。見た目の設定値を CSS 変数に変換するスニペットです
◆④ sections/header-group.json（既存ファイルを修正）
・"header_section" の "type": "header" を "custom-header" に書き換えます
・その中の "header-menu" の "type": "_header-menu" を "_header-menu-dropdown" に書き換えて保存します
動作確認は Horizon 4.3.0 で行っています。行番号も Horizon 4.3.0 の header.liquid・_header-menu.liquid を基準にしています。
Horizonのデスクトップメニューの「メディアタイプ」設定による表示の違いはこちら： デスクトップメニューで「メディアタイプ」設定によるサブメニュー表示の違い
