【徹底解説】Shopify アプリ「シンプルメガメニュー｜お手軽ヘッダー階層ナビゲーション」でできること

【徹底解説】Shopify アプリ「シンプルメガメニュー｜お手軽ヘッダー階層ナビゲーション」でできること

Shopify のヘッダーにあるメニューは、標準では 1 列のドロップダウンしか開きません。取り扱う商品が数十種類までなら困りませんが、カテゴリが縦に 15 個も並ぶようになると、お客様は目当ての棚を探す前にスクロールをやめてしまいます。実店舗でいえば、売り場の案内板が「2 階」としか書かれていない状態です。

「シンプルメガメニュー｜お手軽ヘッダー階層ナビゲーション」は、そのヘッダーメニューを、画像と見出しを横に並べた幅広のドロップダウン（メガメニュー）に置き換える Shopify アプリです。メニューの中身はアプリの管理画面でドラッグ＆ドロップで組み、色や余白はテーマエディタで実際のストアを見ながら決めます。テーマのコードには一切触れません。

この記事では、アプリの管理画面を画面ごと・項目ごとにスクリーンショット付きで解説し、テーマエディタにある 26 個の設定、コードを読まないと分からない上限や制約、自作する場合の Liquid と JavaScript、競合アプリ 4 本との違いまでを一本にまとめます。設置手順の順番そのものは Shopifyでヘッダーに複数列のメガメニューを表示できるアプリについて徹底解説｜ご利用ガイド に譲り、ここでは「それぞれの項目が何を決めていて、どう使い分けるか」に比重を置きます。

シンプルメガメニューとは

「シンプルメガメニュー｜お手軽ヘッダー階層ナビゲーション」は、UnReact が開発した Shopify アプリで、テーマのヘッダーナビゲーションを複数列のメガメニューに差し替えます。Shopify App Store での英語名は「UR: Mega Menu & Navigation」です。

仕組みは大きく 2 つに分かれています。

• アプリの管理画面 … メニューの構成（どのラベルを、どの順に、どの階層に置くか）を決める場所です。作ったメニューは Shopify のメタフィールドに JSON として保存されます
• テーマエディタの埋め込みアプリ … 保存されたメニューをストアフロントに描画し、色・文字の大きさ・余白・モバイルの挙動を決める場所です

この分担のおかげで、メニューの中身を変えるときにテーマエディタを開く必要はなく、見た目を変えるときにアプリを開く必要もありません。ストアフロントはメタフィールドを直接読んで描画するので、表示のたびにアプリのサーバーへ問い合わせることもありません。

アプリでできることを先に並べておきます。

• トップレベル → 子 → 孫の 3 階層で、最大 4 列のドロップダウンを組む
• リンク・見出し・画像の 3 種類のアイテムを混ぜて置く
• リンク先を商品・コレクション・ページ・ブログの検索から選ぶ
• メニューを 10 個まで保存し、「有効にする」で表示するものを切り替える
• 色・幅・余白・モバイルの切り替え幅をテーマエディタで調整する
• 管理画面とテーマエディタのラベルを 20 言語で表示する

逆に、持っていないものもはっきりしています。タブ切り替え式のメニュー、お問い合わせフォームや検索ボックスの埋め込み、クリック数の分析、言語ごとにメニューを分ける機能はありません。「ヘッダーの階層ナビゲーションを画像付きで広げる」ことに絞ったアプリです。

シンプルメガメニューのメリット

列の数をアイテムごとに決められる

ドロップダウンの列数は、トップレベルのアイテムごとに 1〜4 で設定します。「アパレル」は写真 1 列＋文字 2 列、「アクセサリー」は文字 2 列だけ、という組み方ができるので、カテゴリの大きさに合わせてメニューの幅が変わります。全部のドロップダウンが同じ形になるアプリと比べて、小さなカテゴリが間延びしません。

中身と見た目の置き場所が分かれている

メニューの内容はアプリ、色や余白はテーマエディタ、という分担なので、担当を分けやすい作りです。商品担当がメニューの並びを変えても、デザイン担当が決めた色は動きません。テーマを差し替えたときも、メニューの内容はメタフィールドに残っているので組み直しは不要で、新しいテーマ側で埋め込みアプリをオンにして色を合わせ直すだけです。

メニューを保存しておいて切り替えられる

通常用と季節用のメニューを別々に保存しておき、一覧の「有効にする」を押すだけでストアの表示が切り替わります。ストアに出るのは有効な 1 つだけなので、切り替え忘れで 2 つ出ることもありません。

画像は Shopify のファイルに置かれる

画像タイプのアイテムでアップロードした画像は、アプリのサーバーではなく Shopify の「コンテンツ > ファイル」に保存され、Shopify の CDN から配信されます。アプリ側に障害があっても画像が消えることはなく、メニューの JSON もメタフィールドにあるので、描画そのものがアプリの稼働状況に左右されません。

管理画面が日本語で、月額 $4.99

この記事の後半で比べる競合 4 本は、いずれも管理画面が英語だけでした。「シンプルメガメニュー」は管理画面もテーマエディタのラベルも日本語で表示され、料金は月額 $4.99（年払い $49.99）です。メガメニューのアプリとしては最も安い部類に入ります。

シンプルメガメニューのデメリット

見た目の設定はアプリの中にない

色や余白を変えたいときは、アプリではなくテーマエディタを開く必要があります。「アプリの管理画面ですべて完結する」ことを期待して入れると、最初に戸惑うところです。その代わり、変更が右側のプレビューに即座に映るので、試行錯誤は速く済みます。

タブ・フォーム・分析はない

競合には、ドロップダウンの中をタブで切り替えたり、お問い合わせフォームや検索ボックスをメニューに埋め込んだり、どのリンクが何回クリックされたかを集計したりする機能を持つものがあります。このアプリにはどれもありません。メニューの中に置けるのは、リンク・見出し・画像の 3 種類だけです。

言語ごとにメニューを分けられない

管理画面は 20 言語に対応していますが、ストアフロントに出る文字は、ビルダーで入力したラベルがそのまま出ます。多言語ストアで、言語ごとに別のメニューを出す仕組みはありません。翻訳したメニューを見せたい場合は、ラベルに複数の言語を併記する運用になります。

モバイルは初期状態ではテーマのメニューのまま

テーマエディタの「モバイルでメガメニューを使用」は初期値がオフで、スマートフォン幅（初期値 768px 以下）ではテーマ標準のハンバーガーメニューが残ります。PC だけ先に切り替えて様子を見られる設計ですが、「入れたのにスマートフォンで変わらない」と感じやすい点でもあります。

料金プラン

料金は Basic Plan の 1 種類で、月払いと年払いから選びます。

• 月払い … $4.99 / 月
• 年払い … $49.99 / 年（月払いより 2 ヶ月分お得）
• 無料体験 … インストールから 7 日間

プランによる機能差はなく、メニューの中のアイテム数に課金上の上限もありません。後述するアイテム数の上限（トップレベル 50 個、子・孫は各 20 個）はプランではなく実装の上限です。最新の料金は Shopify App Store のアプリページで確認できます。

インストール

インストールの流れは他の Shopify アプリと同じです。

Shopify 管理画面の「設定」から「アプリと販売チャネル」を開き、Shopify App Store で「Mega Menu & Navigation」を検索します。公開直後は検索結果に出ないことがあるので、見つからなければ Shopify App Store のアプリページを直接開いてください。

「インストール」を押すと権限の確認画面が開きます。このアプリが求めるのは、テーマの一覧を読む（テーマに追加のため）、ファイルを読み書きする（画像を Shopify のファイルに保存するため）、商品とコンテンツを読む（リンクピッカーで検索するため）の 3 種類で、顧客情報や注文情報には触れません。続けて料金プランを選ぶと、アプリの「メガメニュー管理」画面が開きます。

インストールした時点ではストアに何も出ません。メニューを作って有効にし、テーマエディタで埋め込みアプリをオンにして保存する、という 3 つがそろって初めてヘッダーが置き換わります。

アプリ管理画面の構成

管理画面は 3 つの画面でできています。サイドバーに出るのは「メニュー一覧」と「設定」の 2 つで、表示言語が日本語のときだけ「よくある質問」が 3 つ目として加わります。

• メガメニュー管理（メニュー一覧） … アプリを開くと最初に出る画面。保存したメニューがカードで並び、有効・無効の切り替えと複製・削除をここで行います
• メニューを編集 / 新しいメニュー … メニューの中身を組み立てるビルダー。左がツリー、右がアイテムの設定パネルです
• 設定 … テーマエディタへの導線と、管理画面の表示言語の切り替え

見た目の設定（色・余白・モバイル）は、この 3 画面のどこにもありません。すべてテーマエディタの埋め込みアプリ「UR: Mega Menu」の設定にあり、この記事では「ストアフロントの見た目を変える」の節で全項目を扱います。

各画面の説明

ここからが本体です。管理画面の画面と設定グループを 1 つずつ、スクリーンショットと一緒に見ていきます。

「メニュー一覧」画面のメニューカード

保存したメニューが 1 件 1 枚のカードで並びます。カードに出る情報は 4 つです。

• メニュー名 … ビルダーで付けた名前。ストアには出ず、一覧で見分けるためだけのものです
• 有効 / 無効 のバッジ … ストアに表示されているメニューだけが緑の「有効」になります。有効にできるのは常に 1 つだけです
• ◯個のアイテム … トップレベル・子・孫を合わせた数。「12個のアイテム」のように出ます
• 更新日 … 最後に保存した日時。年/月/日 時:分 の形式です

メニューは 1 ストアあたり 10 個まで保存できます。11 個目を作ろうとすると、新規作成の保存時も「複製」も「メニューはこれ以上作成できません」で止まります。この上限は画面のどこにも書かれていないので、季節ごとにメニューを増やしていくストアは、古いものを削除する運用を先に決めておくと安心です。

「メニュー一覧」画面の操作ボタン

カードの下に 4 つのボタンが並び、右上に「新しいメニューを作成」があります。

• 新しいメニューを作成 … 空のビルダー（新しいメニュー）を開きます。メニューが 1 件も無いときはこのボタンは出ず、画面中央の「最初のメニューを作成」から始めます
• 編集 … そのメニューのビルダー（メニューを編集）を開きます
• 複製 … 同じ内容のメニューを「元の名前 (コピー)」という名前で一覧の末尾に追加します。複製は必ず「無効」で作られるので、押した瞬間にストアの表示が変わることはありません
• 有効にする … そのメニューをストアに出します。それまで有効だったメニューは自動で「無効」になります
• 無効にする … ストアからメガメニューを外します。有効なメニューが 0 になると、テーマ標準のメニューも隠れたままになるので、切り替えるときは別のメニューを「有効にする」で行うほうが安全です
• 削除 … 確認モーダルが開き、「削除」で確定すると取り消せません

「複製」で付く「(コピー)」の文字は、複製した時点の表示言語で保存されます。英語表示のときに複製すると「(Copy)」になり、あとで日本語に切り替えてもその名前は変わりません。

「メニュー一覧」画面のセットアップガイド

一覧の下に、3 ステップの「セットアップガイド」が付いています。「メニューを作成する」はメニューが 1 件でもあれば、「メニューを有効にする」は有効なメニューがあれば、番号が緑に変わります。

3 つ目の「テーマにブロックを追加する」だけは、設定が済んでいても緑になりません。アプリ側からテーマエディタの状態を確かめる手段が無いためで、ここが灰色のままでもストアに出ていれば設定は完了しています。

「メニューを編集」画面のメニュー名

ビルダーは、左に「メニュー名」と「メニューアイテム」のカード、右に「アイテム設定」のカードという 2 列の画面です。新規作成と編集で画面は同じで、タイトルだけが「新しいメニュー」と「メニューを編集」で変わります。

「メニュー名」は 1〜50 文字で、入力欄の右端に「7/50」のように文字数が出ます。空のまま「保存」を押すと、入力欄の下に「メニュー名は必須です」と出て保存されません。

「メニューを編集」画面のメニューアイテム（ツリー）

「メニューアイテム」のカードに、アイテムが階層順に並びます。各行は左からドラッグハンドル、アイテムタイプのアイコン（リンク・見出し・画像で違います）、ラベルの順で、「表示する」を外したアイテムには目を伏せたアイコンが付きます。

• アイテムを追加 … カード右上のボタン。リンクタイプの空のアイテムがトップレベルの末尾に追加され、そのまま選択状態になります。ラベルが空の間はツリーに「ラベル未設定」と出ます
• 行をクリック … そのアイテムを選び、右の「アイテム設定」に内容が出ます
• ドラッグで並び替え … ハンドルをつかんで上下に動かすと順番が変わります

ドラッグで変わるのは順番だけで、階層は「移動先の位置にあるアイテムと同じ階層」になります。ドラッグで階層を深くしたり浅くしたりはできず、階層を作りたいときは右のパネルの「子アイテムを追加」を使います。この点は多くのツリー UI と挙動が違うので、最初に覚えておくと迷いません。

アイテム数の上限は、トップレベルが 50 個、子アイテムと孫アイテムがそれぞれ 20 個です。階層は 3 つまでで、孫アイテムを選んでも「子アイテムを追加」は出ません。

「メニューを編集」画面のアイテム設定とアイテムタイプ

ツリーでアイテムを選ぶと、右の「アイテム設定」に入力欄が並びます。

最初の「アイテムタイプ」で、リンク・見出し・画像の 3 つから選びます。タイプによって下の入力欄が入れ替わります。

• リンク … クリックで移動する文字リンク。入力欄は「ラベル」「URL」「新しいタブで開く」。トップレベルに置いて子アイテムを付けると、ホバーでドロップダウンが開きます
• 見出し … クリックできない太字の文字。入力欄は「ラベル」だけ。ドロップダウンの中で列の見出しにします
• 画像 … 画像とその下にラベルが並ぶリンク。入力欄は「ラベル」「画像」「画像のalt属性」「リンクURL」「新しいタブで開く」

タイプを切り替えると、URL と画像はリセットされます。リンクを入れたあとで「見出し」に変えると URL が消えるので、戻すつもりなら先に控えておいてください。

「ラベル」はストアフロントに表示する文字で、1〜100 文字です。空のまま保存すると「ラベルは必須です」で止まります。「新しいタブで開く」にチェックを入れると、そのリンクは別のタブで開くので、外部サイトへのリンクに向いています。

パネルの最下部にある赤い「削除」は、確認モーダルを開きます。子アイテムがあるときは「子アイテム 3 件も一緒に削除されます。」のように件数が出て、「削除」で確定すると戻せません。

「メニューを編集」画面のリンクピッカー

リンクタイプの「URL」、画像タイプの「リンクURL」は同じ入力欄で、クリックするとリンクピッカーが開きます。

「商品」「コレクション」「ページ」「ブログ」のどれかを選ぶと、その種類のリソースが一覧で出ます。上の「リソースを検索」に名前の一部を入れると絞り込め、項目をクリックするとリンク先が入ってピッカーが閉じます。

ここには画面に出ない決まりが 3 つあります。

• 一覧に出るのは各カテゴリの 先頭 5 件 です。商品が多いストアでは目当てのものが最初の一覧に出ないので、「リソースを検索」で名前を入れて絞り込む前提です
• 選んだリンク先は /collections/ハンドル のような、ドメインを除いた相対パスで保存されます。ストアのドメインを変えてもリンクは切れません
• 外部サイトへ飛ばしたいときは、ピッカーを使わず https:// から始まる URL を直接入力します。URL は 2000 文字までです

URL が空のリンクは、クリックしても今いるページが開き直されるだけです。ドロップダウンを開くためだけのトップレベルなら、リンクではなく「見出し」タイプにしておくと、押しても何も起きない文字として自然に見えます。

「メニューを編集」画面の画像タイプ

「画像」タイプにすると、ラベルの下に画像の枠が出ます。

• 画像なし … 「画像を追加する」の枠。クリックしてファイルを選ぶか、画像をドラッグ＆ドロップします
• アップロード中 … 「画像をアップロード中...」とスピナーが出ます
• 画像あり … サムネイルと「画像を変更するにはドラッグ＆ドロップ」。別の画像を落とすと差し替わります

受け付けるのは 1 回に 1 枚、画像ファイルだけです。アップロードは Shopify の「ファイル」に対して行われ、Shopify 側の処理が終わるまで 0.5 秒ごとに確認を繰り返す作りなので、大きな画像ほど「画像をアップロード中...」が長く続きます。表示が変わるまで待ってから次の操作に移ってください。

画像を差し替えても、前の画像は「ファイル」に残ったままです。不要なら Shopify 管理画面のファイル一覧から消します。また、画像をアップロードしただけではメニューは保存されていません。最後に右上の「保存」を押すところまでがワンセットです。

「画像のalt属性」は、画像が表示できないときや読み上げソフト向けの代替テキストで、200 文字まで、空でも保存できます。

「メニューを編集」画面のドロップダウンカラム数と表示する

トップレベルのアイテムを選んだときだけ、「ドロップダウンカラム数」のスライダーが出ます。そのアイテムのドロップダウンを何列で組むかを 1〜4 で決め、初期値は 3 です。

列には子アイテムが左から順に流し込まれます。子アイテムが列の数より少ないときは子アイテムの数が上限になり、空の列は作られません（画面の説明文「子アイテムの数が上限になります。」がこの意味です）。列の見出しにしたい「見出し」タイプと、その下に並べたい孫アイテムをセットで作ると、見出し付きの列になります。

「表示する」のチェックを外すと、そのアイテムは子・孫ごとストアフロントに出なくなります。ツリーには残るので、季節限定のアイテムを削除せずに隠しておく用途に使えます。トップレベルのアイテムが全部非表示になると、メニューバー自体が描画されません。

「メニューを編集」画面の保存と変更を破棄

右上の「保存」は、何か変更があるときだけ押せます。変更があると「変更を破棄」も並んで出て、メニュー名・アイテム・選択状態を最後に保存した内容へ戻します。

保存に成功すると「メニューを保存しました」のトーストが出て、新規作成のときはそのまま「メニューを編集」の画面に切り替わります。一覧には戻りません。

保存できないのは、メニュー名が空のとき、アイテムが 1 つも無いとき（「アイテムを1つ以上追加してください」）、ラベルが空のアイテムがあるとき、メニューが 10 個を超えるときの 4 つです。失敗しても入力内容は残るので、直してからもう一度押せます。

注意したいのは、未保存のまま「メニュー一覧」やブラウザの戻るで画面を離れても警告が出ないことです。変更はそのまま消えます。反対に、有効なメニューを編集して保存すると、テーマエディタを触らなくてもストアフロントに即座に反映されます。

「設定」画面のテーマにメガメニューを追加

サイドバーの「設定」を開くと、「テーマにメガメニューを追加」「言語設定」「おすすめアプリ」の 3 つのカードが並びます。

• テーマを選択 … ストアにあるテーマの一覧。公開中のテーマには「（公開中のテーマ）」が付き、初期値は公開中のテーマです
• テーマに追加 … 選んだテーマのテーマエディタを新しいタブで開き、埋め込みアプリ「UR: Mega Menu」をオンにした状態にします。テーマエディタ右上の「保存」を押すまでは公開されません
• テーマをプレビュー … 同じテーマエディタを、埋め込みアプリの一覧を開いた状態で開きます。オン・オフは変えません

どちらのボタンも常にホームページのテンプレートで開きますが、埋め込みアプリはストア全体に効くので、どのページで有効にしても全ページのヘッダーが置き換わります。テーマのバージョンによっては選択欄が空になることがあり、その場合は Shopify 管理画面の「オンラインストア > テーマ > カスタマイズ」からテーマエディタを開き、左下の「埋め込みアプリ」で「UR: Mega Menu」をオンにします。

「設定」画面の言語設定

「言語を選択」で管理画面の表示言語を選び、「変更する」を押すと切り替わります。日本語・英語・中国語（簡体字・繁体字）・韓国語・タイ語・ドイツ語・フランス語・スペイン語・イタリア語・オランダ語・デンマーク語・ノルウェー語・スウェーデン語・フィンランド語・ポーランド語・チェコ語・ポルトガル語（ブラジル・ポルトガル）・トルコ語の 20 言語です。

この設定はブラウザに保存されます。別のブラウザや別のパソコンから開いたときは、もう一度選び直す必要があります。ストアフロントのメガメニューはこの言語の影響を受けません。

「設定」画面のおすすめアプリ

同じ開発元の他の Shopify アプリの一覧です。右上の「×」で閉じられ、メガメニューの動作には関係しません。

テーマへの追加

メニューを 1 つ作って「有効にする」を押したら、「設定」の「テーマに追加」からテーマエディタを開きます。埋め込みアプリの一覧に「UR: Mega Menu」の行があり、トグルがオンになった状態で開くので、右上の「保存」を押せばストアのヘッダーが置き換わります。

置き換えの仕組みは、テーマのメニュー要素を CSS で隠し、その直前にメガメニューを挿入する、というものです。元の要素は削除されません。埋め込みアプリをオフにして保存すれば、テーマ標準のメニューがそのまま戻ります。

Horizon テーマを使っているストアでは、次の節の「置き換え対象のセレクター」を header-menu に変えてください。初期値の header nav のままだと、Horizon ではメガメニューがテーマのメニューの下に別の段として出ます。

ストアフロントの見た目を変える

テーマエディタの「埋め込みアプリ」で「UR: Mega Menu」の行を開くと、6 つのグループ・26 項目の設定が出ます。変更は右のプレビューに即座に反映され、右上の「保存」で公開されます。

ナビゲーション置き換え設定

• 置き換え対象のセレクター（既定: header nav）… テーマのどのメニューをメガメニューに置き換えるかを CSS セレクターで指定します。これに一致して画面に見えている要素の直前にメガメニューが挿入され、元の要素は非表示になります
• 追加で非表示にする要素（既定: 空）… テーマ側で残ってしまう要素（モバイル用のハンバーガーなど）を隠すセレクターを、カンマ区切りで指定します

一致する要素が見つからない、または見えていないときは、ヘッダーの直後に挿入されます。ヘッダーが画面に追従する（スクロールしても上に残る）テーマでは、メガメニューも一緒に追従します。書き方は CSS と同じで、.header__inline-menu のようにクラス名で指定するときは先頭に . を付けます。

メニュースタイル設定

• メニュー幅（既定: 全幅）… メニューバーを画面いっぱいに広げるか、中央に寄せるか。「コンテナ幅」は最大 1200px です
• 文字の大きさ（既定: 14px）… トップレベルのアイテムの文字サイズ。10〜24px を 1px 刻みで動かせます
• アイテム左右パディング（既定: 16px）… トップレベルのアイテムの左右の余白。0〜40px、2px 刻み
• アイテム上下パディング（既定: 12px）… トップレベルのアイテムの上下の余白。0〜40px、2px 刻みで、メニューバーの高さがここで決まります

文字の大きさは px で固定なので、スマートフォンで小さく見えるときは「モバイル設定」の切り替え幅と合わせて考えます。

メインメニュー色設定

• 背景色（既定: #FFFFFF）… メニューバーの背景
• 文字の色（既定: #333333）… トップレベルのアイテムの文字
• ホバー時の文字の色（既定: #000000）… マウスを重ねたアイテムの文字
• ホバー時の背景色（既定: #F5F5F5）… マウスを重ねたアイテムの背景
• 枠線の色（既定: #E0E0E0）… メニューバー下端の 1px の線

色はカラーピッカーで選ぶか、#RRGGBB の 16 進数で入力します。ヘッダーに馴染ませたいときは、背景色をテーマのヘッダーと同じ色に、枠線の色も背景色と同じにすると、メニューバーの境目が消えてヘッダーの一部に見えます。

ドロップダウン設定

• ドロップダウン背景色（既定: #FFFFFF）… 開いたパネルの背景
• ドロップダウンの文字の色（既定: #333333）… パネル内のリンクと見出しの文字
• ドロップダウンホバー時の文字の色（既定: #000000）… パネル内でマウスを重ねたリンクの文字
• ドロップダウンホバー時の背景色（既定: #F5F5F5）… パネル内でマウスを重ねたリンクの背景
• ドロップダウン枠線の色（既定: #E0E0E0）… パネルの 1px の枠線
• ドロップダウンの文字の大きさ（既定: 14px）… パネル内の文字サイズ。10〜24px、1px 刻み
• ドロップダウン内パディング（既定: 24px）… パネルの内側の余白。0〜60px、2px 刻み
• ドロップダウンアイテム間隔（既定: 8px）… 列と列、行と行の間隔。0〜24px、2px 刻み

パネルは画面の高さに収まらないとき縦スクロールになり、最小幅 200px から列の内容に合わせて広がります。カテゴリが多くて 1 列に入りきらないときは、文字の大きさを 12px、アイテム間隔を 4px にすると 1 列に入る行数が増えます。

モバイル設定

• モバイルでメガメニューを使用（既定: オフ）… オンにすると、モバイル幅でもメガメニュー（ハンバーガー＋アコーディオン）を出します。オフのときはモバイル幅ではメガメニューを出さず、テーマ標準のメニューをそのまま残します
• モバイル切り替え幅（既定: 768px）… この幅以下をモバイルとみなします。320〜1024px、8px 刻み
• ハンバーガーアイコンを表示（既定: オン）… モバイルでメガメニューを使うとき、3 本線のボタンを出すか
• モバイル背景色（既定: #FFFFFF）… 開いたモバイルメニューの背景
• モバイルの文字の色（既定: #333333）… モバイルメニューの文字
• ハンバーガーアイコンの色（既定: #333333）… 3 本線の色

オンにすると、モバイル幅ではドロップダウンがアコーディオン（タップで開閉、矢印が回転）になります。「ハンバーガーアイコンを表示」をオフにすると開くボタンが無くなるので、通常はオンのままにしておきます。画面幅の判定はブラウザの幅で行い、幅を変えた瞬間に切り替わります。

追加設定

• 追加の CSS（既定: 空）… メガメニューに当てる CSS を直接書けます。メガメニューの要素は .sa-185-mega-menu から始まるクラス名を持ちます

安全のため、書いた内容から < の文字は取り除かれます。CSS の子セレクター > はそのまま使えます。テーマ全体ではなくメガメニューにだけ効かせたいときは、.sa-185-mega-menu から書き始めてください。

設定後のストアフロント

保存すると、テーマのメニューがあった場所にメガメニューが出ます。子アイテムを持つトップレベルには下向きの矢印が付きます。

トップレベルにマウスを重ねると 0.2 秒後にドロップダウンが開き、離れてから 0.2 秒後に閉じます。斜めにマウスを動かしても閉じにくいように、意図的に遅らせてあります。

キーボードでも操作できます。Tab で次のアイテム、Enter でリンクへ移動、↓ でドロップダウンを開いて最初のアイテムへ、← → でトップレベルを移動、Escape で閉じて親に戻ります。

スマートフォン幅では、「モバイルでメガメニューを使用」がオフの間はテーマ標準のハンバーガーメニューが残ります。上の画像がその状態です。

コードで自作する場合

Shopify の「ナビゲーション」自体は 3 階層のメニューを持てますし、Dawn 系のテーマにはヘッダー設定に「メガメニュー」の選択肢があって、3 階層の文字リンクを列に並べて出せます。文字だけの列で足りるなら、アプリを入れずに済みます。

足りなくなるのは、列ごとに画像を置きたい、列の数をカテゴリごとに変えたい、色や余白をテーマの CSS から切り離して調整したい、といったときです。ここではそれをテーマのコードで自作する場合の骨組みを示します。

まず Liquid です。ヘッダーのセクションで、テーマエディタから選んだメニュー（link_list）を 3 階層まで描画します。コレクションへのリンクなら link.object からコレクション本体を引けるので、その featured_image を列の画像に使えます。

{%- assign menu = linklists[section.settings.menu] -%}
<nav class="mega-nav" aria-label="メインメニュー">
  <ul class="mega-nav__bar">
    {%- for link in menu.links -%}
      <li class="mega-nav__item{% if link.links.size > 0 %} has-panel{% endif %}">
        <a href="{{ link.url }}" aria-expanded="false">{{ link.title }}</a>
        {%- if link.links.size > 0 -%}
          <div class="mega-nav__panel" style="--cols: {{ link.links.size | at_most: 4 }}">
            {%- for child in link.links -%}
              <div class="mega-nav__col">
                {%- if child.type == "collection_link" and child.object.featured_image -%}
                  <a href="{{ child.url }}">
                    {{ child.object.featured_image | image_url: width: 320 | image_tag: loading: "lazy" }}
                  </a>
                {%- endif -%}
                <a class="mega-nav__heading" href="{{ child.url }}">{{ child.title }}</a>
                {%- for grand in child.links -%}
                  <a class="mega-nav__link" href="{{ grand.url }}">{{ grand.title }}</a>
                {%- endfor -%}
              </div>
            {%- endfor -%}
          </div>
        {%- endif -%}
      </li>
    {%- endfor -%}
  </ul>
</nav>

--cols に子リンクの数（最大 4）を入れておき、CSS のグリッドで列数として使います。2 階層目のリンクを列の見出し、3 階層目をその下のリンクにしているので、Shopify のナビゲーション画面で作った階層がそのまま列になります。ただし、この形では「見出しだけでリンクにしない」「画像だけ置く」といった種類の違うアイテムは表現できません。ナビゲーションのリンクはすべて URL を持つためです。

次に CSS です。パネルを絶対配置で下に開き、--cols を grid-template-columns に渡します。

.mega-nav__bar { display: flex; margin: 0; padding: 0; list-style: none; }
.mega-nav__item { position: relative; }
.mega-nav__item > a { display: block; padding: 12px 16px; color: #333; text-decoration: none; }
.mega-nav__panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  padding: 24px;
  background: #fff;
  border: 1px solid #e0e0e0;
  grid-template-columns: repeat(var(--cols, 3), minmax(160px, 1fr));
  gap: 8px 24px;
  z-index: 50;
}
.mega-nav__item.is-open > .mega-nav__panel { display: grid; }
.mega-nav__heading { font-weight: 700; }
.mega-nav__link { display: block; padding: 4px 0; }
@media (max-width: 768px) {
  .mega-nav { display: none; } /* モバイルはテーマのドロワーに任せる */
}

display: none と display: grid を is-open クラスで切り替えているのは、ホバーの遅延を JavaScript で制御するためです。:hover だけで開閉すると、隣の項目へ斜めにマウスを動かした瞬間にパネルが閉じてしまいます。

最後に JavaScript です。マウスが入ってから 200 ミリ秒後に開き、出てから 200 ミリ秒後に閉じる、いわゆるホバーインテントを付けます。

document.querySelectorAll(".mega-nav__item.has-panel").forEach((item) => {
  let timer = null;
  const trigger = item.querySelector(":scope > a");
  const open = () => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      item.classList.add("is-open");
      trigger.setAttribute("aria-expanded", "true");
    }, 200);
  };
  const close = () => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      item.classList.remove("is-open");
      trigger.setAttribute("aria-expanded", "false");
    }, 200);
  };
  item.addEventListener("mouseenter", open);
  item.addEventListener("mouseleave", close);
  item.addEventListener("focusin", open);
  item.addEventListener("focusout", close);
  item.addEventListener("keydown", (e) => {
    if (e.key === "Escape") { item.classList.remove("is-open"); trigger.focus(); }
  });
});

focusin / focusout を付けているのは、キーボードで Tab 移動したときにもパネルが開くようにするためです。aria-expanded を更新しておくと、読み上げソフトが開閉の状態を伝えられます。

ここまでで「3 階層・列数可変・コレクション画像付き」の最小構成ですが、実際に運用に載せるには、まだ手が要ります。

• テーマ標準のヘッダーメニューを隠し、テーマのアップデートのたびにその指定を確認する
• 見出しだけ・画像だけのアイテムを扱うために、ナビゲーションとは別にメタフィールドなどの保存先を作る
• 色や余白をテーマエディタから変えられるように、セクションの schema に設定項目を足す
• モバイル用のアコーディオンと、ヘッダーが追従するテーマでの位置決めを書く
• テーマを乗り換えたときに、これらを新しいテーマへ移植する

「シンプルメガメニュー」がやっているのは、この作業をアプリ側に閉じ込めることです。メニューの構成はメタフィールドに、見た目の設定は埋め込みアプリの schema に持ち、テーマの置き換え位置は「置き換え対象のセレクター」1 つで調整します。テーマを替えても組み直しは要りません。月額 $4.99 と、上のコードを保守し続ける手間のどちらが安いかは、ストアの体制によって答えが変わるところです。

競合アプリとの比較

アプリストアで「メガメニュー」を検索して上位に出る 4 本を、実際に開発ストアへインストールして管理画面を触りました。掲載ページの説明文ではなく、入れて分かったことを書きます。

Globo Mega Menu, Navigation

Globo.io が開発するアプリで、評価 4.9・レビュー 1,661 件と、この 4 本の中では最も多く使われています。無料プランがあり、有料は $12.90 / 月と $17.90 / 月（年払い $129 / $179）、7 日間の無料体験付きです。

• 管理画面は英語だけです。アプリストアの掲載は日本語を含む 10 言語に翻訳されていますが、管理画面には日本語がありません。右下のチャットだけ日本語で案内が出ます
• ホーム画面に「Create a mega menu」「Add sticky mobile menu」「Import your menu」の 3 つの入口があり、モバイル固定メニューとインポートは「Available on PRO plan」でロックされています
• インストール直後は「App status: Inactive」で、テーマの app embed を有効化しないと何も表示されません
• メニューは Draft と公開の状態を持ち、一覧に「Mega menu #192032」のような番号付きの名前で並びます
• Clicks / Impressions / Orders / Revenue の分析が管理画面に組み込まれています

メガメニュー・タブ・ドロップダウンの 3 形式を 1 本で作れ、多言語ストアやクリック分析まで欲しいストアに向きます。その代わり、モバイル固定メニューとインポートは上位プランで、操作はすべて英語になります。

Qikify Mega Menu & Navigation

Qikify Design のアプリで、評価 4.9・レビュー 1,077 件。無料プランに加えて $9.99 / 月と $19.99 / 月（年払い $95.90 / $191.90）があり、無料体験は 7 日間です。

• 管理画面の言語切り替えは English / Tiếng Việt / Français / Deutsch / Español / Italiano / Português (Brasil) / Português (Portugal) の 8 つで、日本語はありません
• 初回は「Get started」→「Create menu / Skip」のオンボーディングを通ります。セットアップガイドは「Create your menu」「Enable theme app extensions」の 2 ステップです
• サイドバーに Translations（翻訳）・Analytics（クリック数の集計）・Pricing があり、メニューの翻訳とクリック分析を持ちます
• テーマ側で app embed を有効にしないとストアには出ません（ガイドに「Open theme editor > Click Save button」と案内されます）

ビルダーの横にストアのプレビューが並ぶので、置いた瞬間に見た目を確かめながら作れます。メニューの翻訳機能があるのは 4 本の中でここだけで、多言語ストアで言語ごとにラベルを変えたいなら第一候補です。操作は英語か欧州 7 言語になります。

Buddha Mega Menu & Navigation

Buddha Apps (Zero Carbon) のアプリで、評価 4.8・レビュー 613 件。無料の STARTER PLAN と、$9.95 / 月（年払い $95.52）の PRO PLAN があり、無料体験は 14 日間です。

• インストールすると Shopify 管理画面の中ではなく、開発元のサイト（megamenu.buddhaapps.com）に遷移します。最初に出るのは料金プランの選択画面で、プランを選ばないと先に進めません
• 無料の STARTER PLAN は、メニュー形式 2 種類（Tree (Flyout) / Simple）・メニュー数と項目数は無制限・Featured Collections と Featured Products は各 5 件まで・透かし無しです
• PRO PLAN（Mega Zen）で形式が 4 種類（Tabbed / Contact が追加）になり、画像付きリンクリストやセール用バナー、売れ筋・新着の自動ブロックが使えます
• アプリストアの掲載は英語のみで、日本語には翻訳されていません

無料プランでもメニュー数・項目数が無制限なので、まず費用をかけずに始めたいストアに向きます。管理画面が Shopify の外で開くことと、プランを選ぶまで何も作れないことは、最初に戸惑うところです。

Meteor Mega Menu & Navigation

Helium のアプリで、評価 4.7・レビュー 350 件。無料プランと $8 / 月・$14 / 月の有料プランがあり、無料体験は 7 日間です。有料プランの月額はこの 4 本で最も安く設定されています。

• 管理画面は英語のみで、アプリストアの掲載も日本語に翻訳されていません
• ダッシュボードは「Launch menu editor」の 1 ボタンで、メニューの作成・管理・デザインは別画面のエディタで行います
• インストール直後は「You currently do not have Meteor installed on your live storefront」と出て、「Manage installation」からテーマへの設置を別途行う必要があります
• サイドバーは Account and plan / General settings / Help and support の 3 つで、ダッシュボードにセットアップ動画（2 分）へのリンクがあります

商品を大きく見せるビジュアル重視のメガメニューで、エディタを別画面で開く作りです。写真で選ばせるアパレルや雑貨のストアで、英語の操作に抵抗が無ければ候補になります。

4 本と比べて見えること

• 管理画面の言語 … 4 本ともに英語で、日本語で操作できるのは「シンプルメガメニュー」だけでした。Qikify は欧州 7 言語、Globo はチャットのみ日本語です
• メニューの形式 … Globo と Buddha（PRO）はタブ形式まで作れます。「シンプルメガメニュー」は複数列のドロップダウン 1 形式で、その中にリンク・見出し・画像を置きます
• 翻訳と分析 … 翻訳は Qikify、クリック分析は Globo と Qikify にあります。「シンプルメガメニュー」にはどちらもありません
• 管理画面の場所 … Buddha だけが Shopify の外のサイトで開きます。他の 4 本は Shopify 管理画面の中で完結します
• 価格 … 無料プランを持つのは競合 4 本で、有料は月額 $8〜$17.90。「シンプルメガメニュー」は無料プランが無い代わりに、有料の中では最安の $4.99 です

タブや分析まで含めて 1 本で済ませたいなら Globo か Qikify、費用ゼロで始めたいなら Buddha の無料プラン、日本語で迷わず組んで月額を抑えたいなら「シンプルメガメニュー」、という分かれ方になります。

まとめ

ヘッダーのメニューは、お客様が最初に触る売り場の案内板です。「シンプルメガメニュー｜お手軽ヘッダー階層ナビゲーション」は、その案内板を複数列の写真付きにすることだけを、管理画面のビルダーとテーマエディタの 26 項目で完結させています。

• 3 階層・最大 4 列のドロップダウンを、ドラッグ＆ドロップで組める
• リンク・見出し・画像の 3 種類を混ぜ、リンク先は商品・コレクション・ページ・ブログの検索から選べる
• メニューを 10 個まで保存し、「有効にする」で切り替えられる
• 見た目はテーマエディタでプレビューを見ながら決め、テーマを替えてもメニューの中身は残る
• 管理画面は日本語を含む 20 言語で、月額 $4.99・7 日間の無料体験付き

タブ形式・クリック分析・言語ごとのメニューが要るストアには向きませんが、「カテゴリが多くて 1 列のドロップダウンに収まらない」という悩みには、いちばん短い道です。まずは Shopify App Store から入れて、いちばん商品数の多いカテゴリを 3 列に広げるところから始めてみてください。

おすすめ Shopify アプリ

UnReact の他のアプリも紹介します。どれも「シンプル〇〇｜お手軽△△」の名前で、機能を絞った作りになっています。

• シンプル画像バナー｜お手軽広告バナーアプリ … テーマに画像バナーを置くアプリです。メガメニューで誘導したコレクションページの上に、キャンペーンのバナーを重ねる使い方ができます
• シンプルレビュー｜お手軽口コミ … 商品レビューを集めて表示します。メニューから商品にたどり着いたあとの購入の後押しになります
• シンプル Wishlist｜お手軽お気に入り … お気に入り機能を追加します。メニューの画像アイテムで見せたコレクションを、あとで見返す導線として相性がよいアプリです
• シンプルLINE誘導｜お手軽追従LINEアイコン … ストアに追従する LINE 誘導アイコンを置きます。メニューにお問い合わせ用のリンクを置かない代わりに、こちらで窓口を用意する組み合わせです
• シンプル店舗受け取り｜お手軽ローカルピックアップ … 店舗受け取りの日時指定を追加します。実店舗を持つストア向けで、メニューに「店舗受け取りについて」のページを載せるとセットで案内できます