Shopifyのグローバルメニューを第2、第3階層まで設定していると、同じ階層内を移動するだけでも毎回メニューを開き直す必要があり、少々面倒です。そこでテーマ「Horizon」で、メインメニューの構造に合わせて同一階層を移動しやすくするサブメニューを自動表示する方法です。
テーマ「Horizon」で、同一階層を移動できるメニューをメインメニューから自動で生成する方法
【設定手順】ヘッダーグループにカスタムLiquidセクションを追加してコードを挿入
Horizonではヘッダーが「セクショングループ」になっています。テーマエディタの「ヘッダー」エリアで「セクションを追加」から「カスタムLiquid」を選び、購入特典のコードを貼り付けてください。これだけで全ページのヘッダー直下に、いま見ているページと同じ階層の兄弟リンクが横並びのサブメニューとして表示されます。
このコードはDawn版とほぼ共通で、実質的な変更点はCSSの外側セレクタ1か所だけです。Horizonではセクションのラッパー要素が section ではなく div（.shopify-section）になるため、section:has(...) を .shopify-section:has(...) に置き換えています。これにより「サブメニューがあるページだけ表示し、それ以外のページでは非表示にする」という元の仕組みがそのまま機能します。
Dawnテーマ版のTIPSはこちら： 同一階層を移動できるメニューをメインメニューから自動生成する方法（Dawn）
