Shopifyでヘッダーに複数列のメガメニューを表示できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/09/23

はじめに

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

Shopify は、商品登録から決済・配送までを 1 つの管理画面で扱えるネットショップ作成サービスです。標準機能で足りない部分は、Shopify App Store で配布されているアプリを追加して補います。Shopify 標準のメニューは 1 列のドロップダウンしか作れないため、カテゴリが多いストアでは「探しているものが見つからずに離脱される」ことが起きがちです。このアプリはその部分を補います。

このガイドでは、インストールからメガメニューがストアに出るまでの最短手順、管理画面の全画面と全項目、テーマエディタの 26 項目、表示されないときの見直しポイントまでを順に説明します。

料金

プラン	料金	無料体験
Basic Plan（月払い）	$4.99 / 月	7 日間
Basic Plan（年払い）	$49.99 / 年（2 ヶ月分お得）	7 日間

アプリストア

シンプルメガメニュー｜お手軽ヘッダー階層ナビゲーション（Shopify App Store）

シンプルメガメニュー｜お手軽ヘッダー階層ナビゲーションのメイン画像。アイコンとキャッチコピー、ドロップダウンを開いたストアフロントのヘッダー

「シンプルメガメニュー」でできること

まず特徴を 5 つにまとめます。

商品数の多いカタログも一目で見渡せる、複数カラムのドロップダウンを作れます
カテゴリ・サブカテゴリ・詳細リンクを最大 3 階層まで入れ子にできます
コレクションや季節のキャンペーンを訴求する画像アイテムを置けます
色・余白・幅はテーマエディタで設定し、実際のストアフロントでプレビューしてから公開できます
複数のメニューを保存しておき、有効なメニューをワンクリックで切り替えられます

複数カラムのドロップダウンで大きなカタログを一目で見せられる

トップレベルのメニューにマウスを重ねると、その下に最大 4 列のドロップダウンが開きます。列の数はアイテムごとに決められるので、「アパレル」は 3 列、「アクセサリー」は 2 列、というように内容に合わせて変えられます。

実際のストアフロントでメガメニューのドロップダウンが開き、画像・見出し・リンクが 3 列に並んでいる

メニューの一覧で有効なメニューを切り替えられる

メニューは 1 ストアに 10 個まで保存できます。ストアに表示されるのは「有効」にした 1 つだけなので、通常用と季節用を作っておいて、時期が来たら「有効にする」を押すだけで切り替えられます。

メニュー一覧。有効・無効のバッジとアイテム数、編集・複製・有効にする・削除のボタンが並ぶ

ドラッグ＆ドロップのビルダーで 3 階層まで組み立てられる

左のツリーにアイテムを足し、右の「アイテム設定」でラベルやリンク先を決めます。アイテムはドラッグで並び替えられ、「子アイテムを追加」で階層を作れます。

メニュービルダー。左にアイテムのツリー、右に選択中のアイテムの設定パネル

リンク先は商品・コレクション・ページ・ブログから選べる

URL 欄を押すとリンクピッカーが開き、ストアの商品・コレクション・ページ・ブログを検索して選べます。外部サイトの URL はそのまま入力できます。

リンクピッカーでコレクションの一覧を開き、ストアのコレクションを選んでいる

色や余白はテーマエディタで見ながら決められる

見た目の設定はアプリの管理画面には無く、すべてテーマエディタの埋め込みアプリの設定にあります。変えた瞬間に右側のプレビューへ反映されるので、実際のストアの雰囲気に合わせながら調整できます。

テーマエディタの埋め込みアプリの設定。ナビゲーション置き換え設定とメニュースタイル設定が開いている

アプリをインストールする

アプリストア: シンプルメガメニュー｜お手軽ヘッダー階層ナビゲーション

Shopify 管理画面の左下にある「設定」をクリックします。
「アプリと販売チャネル」を開き、「Shopify App Store」へ移動します。
検索窓に「Mega Menu & Navigation」と入力してアプリを探します。公開直後は検索結果に出ないことがあるので、その場合は上のアプリストアのリンクを直接開いてください。
アプリ詳細ページで「インストール」をクリックします。
権限の確認画面が開きます。このアプリが求める権限は、テーマの一覧を読む（テーマに追加のため）、ファイルを読み書きする（メニューの画像を Shopify のファイルに保存するため）、商品とコンテンツを読む（リンクピッカーで検索するため）の 3 種類です。内容を確認して「インストール」を押すと、料金プランの選択画面に進みます。プランを選ぶとアプリの「メガメニュー管理」画面が開きます。

インストール直後はストアに何も出ません。次の「まず最初にやる設定」を済ませると、ヘッダーのメニューがメガメニューに置き換わります。

まず最初にやる設定（5 ステップ）

メガメニューがストアに出るまでの最短ルートです。所要時間は 10 分ほどです。

アプリの「メガメニュー管理」画面で「最初のメニューを作成」（メニューがすでにあるときは右上の「新しいメニューを作成」）を押します。
「メニュー名」を入れ、「アイテムを追加」でトップレベルのアイテムを作ります。右の「アイテム設定」で「ラベル」と「URL」を入れ、「子アイテムを追加」でドロップダウンに並べるアイテムを足します。
右上の「保存」を押します。保存すると一覧に戻らず、そのまま編集画面に残ります。
サイドバーの「メニュー一覧」に戻り、作ったメニューの「有効にする」を押します。バッジが「有効」になります。ストアに出るのは有効なメニュー 1 つだけです。
サイドバーの「設定」を開き、「テーマを選択」で公開中のテーマを選んで「テーマに追加」を押します。テーマエディタが新しいタブで開き、埋め込みアプリの一覧で「UR: Mega Menu」がオンになった状態になります。右上の「保存」を押すと、ストアのヘッダーがメガメニューに置き換わります。

テーマエディタの埋め込みアプリの一覧。「UR: Mega Menu」の行とオン・オフのトグルがある

手順 5 で開くテーマエディタは常にホームページの画面ですが、埋め込みアプリはストア全体に効くので、どのページで有効にしても全ページのヘッダーが置き換わります。

Horizon テーマを使っているストアでは、埋め込みアプリの設定にある「置き換え対象のセレクター」を header-menu に変えてください。初期値の header nav のままだと、メガメニューがテーマのメニューの下に別の段として出ます（詳しくは「うまく表示されないときは」）。

管理画面でできること

サイドバーには「メニュー一覧」と「設定」の 2 つがあります（日本語表示のときは「よくある質問」も出ます）。メニューの中身はこの管理画面で、見た目はテーマエディタで、という分担です。

「メニュー一覧」画面（メガメニュー管理）

アプリを開くと最初に出る画面です。作ったメニューがカードで並び、下に「セットアップガイド」が付いています。

メガメニュー管理の画面。3 つのメニューのカードと、3 ステップのセットアップガイド

カードに出る情報

項目	内容
メニュー名	ビルダーで付けた名前。空のまま保存はできないので「名前なし」になることは通常ありません
有効 / 無効のバッジ	ストアに出ているメニューは緑の「有効」。それ以外は「無効」
◯個のアイテム	トップレベル・子・孫を合わせたアイテムの数
更新日	最後に保存した日時（年/月/日時:分）

メニューに対してできる操作

ボタン	押すと何が起きるか
新しいメニューを作成	右上のボタン。空のビルダー画面（新しいメニュー）が開きます。メニューが 1 つも無いときはこのボタンは出ず、代わりに画面中央の「最初のメニューを作成」から始めます
編集	そのメニューのビルダー画面（メニューを編集）が開きます
複製	同じ内容のメニューが「元の名前 (コピー)」という名前で一覧の末尾に追加されます。複製は必ず「無効」の状態で作られるので、ストアの表示は変わりません
有効にする	そのメニューをストアに表示します。それまで有効だったメニューは自動で「無効」になります（有効にできるのは 1 つだけ）
無効にする	ストアからメガメニューを外します。有効なメニューが 1 つも無い状態になると、テーマ標準のメニューも隠れたままになるので注意してください（「うまく表示されないときは」を参照）
削除	確認モーダルが開きます。「削除」を押すと取り消せません

「メニューを削除しますか？」の確認モーダル。この操作は取り消せないという説明と、キャンセル・削除のボタン

メニューは 1 ストアあたり 10 個までです。11 個目を作ろうとすると、「新しいメニューを作成」の保存時も「複製」も「メニューはこれ以上作成できません」と出て止まります。不要なメニューを削除してから作り直してください。

セットアップガイド

一覧の下にある 3 ステップの案内です。「メニューを作成する」はメニューが 1 つでもあれば、「メニューを有効にする」は有効なメニューがあれば、番号が緑になります。3 つ目の「テーマにブロックを追加する」は、アプリ側からテーマの状態を確かめる手段が無いため、設定が済んでいても緑になりません。案内として読み流してください。

「メニューを編集」「新しいメニュー」画面（メニュービルダー）

左にメニューの構成（ツリー）、右に選択中のアイテムの設定パネルという 2 列の画面です。新規作成と編集で画面は同じで、タイトルだけが「新しいメニュー」「メニューを編集」に変わります。

新しいメニューの画面。メニュー名が空で、右のアイテム設定に「ツリーからアイテムを選択すると、ここで設定を編集できます。」と出ている

メニュー名

1〜50 文字で付けます（入力欄の右端に「7/50」のように文字数が出ます）。ストアには表示されず、一覧で見分けるための名前です。空のまま「保存」を押すと、入力欄の下に「メニュー名は必須です」と出て保存されません。

メニューアイテム（ツリー）

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

操作	内容
アイテムを追加	カード右上のボタン。リンクタイプの空のアイテムがトップレベルの末尾に追加され、そのまま選択状態になります。ラベルが空の間はツリーに「ラベル未設定」と出ます
行をクリック	そのアイテムを選択し、右の「アイテム設定」に内容が出ます
ドラッグで並び替え	ドラッグハンドルをつかんで上下に動かすと順番が変わります。階層は「移動先の位置にあるアイテムと同じ階層」になります。ドラッグで階層を深くしたり浅くしたりはできません。階層を作りたいときは「子アイテムを追加」を使ってください

「アイテムを追加」を押した直後。ツリーに「ラベル未設定」の行が増え、右にリンクタイプのアイテム設定が開いている

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

アイテム設定

ツリーでアイテムを選ぶと右のカードに出ます。上から順に説明します。

メニューを編集の画面。トップレベルのリンク「ショップ」を選択し、右にアイテムタイプ・ラベル・URL・新しいタブで開く・ドロップダウンカラム数・表示する・削除が並ぶ

子アイテムを追加

選択中のアイテムの下に、リンクタイプの空のアイテムを追加して、そのまま選択状態にします。トップレベルと 2 階層目のアイテムでだけ出ます（3 階層目には子を作れません）。

アイテムタイプ

「リンク」「見出し」「画像」の 3 つから選びます。タイプを切り替えると、入力欄がそのタイプのものに入れ替わります。切り替えたときに URL と画像はリセットされるので、リンクを入れたあとで「見出し」に変えると URL は消えます。

タイプ	ストアフロントでの見え方	入力欄
リンク	クリックで移動する文字リンク。トップレベルに置いて子アイテムを付けると、ホバーでドロップダウンが開きます	ラベル / URL / 新しいタブで開く
見出し	クリックできない太字の文字。ドロップダウンの中で列の見出しにします	ラベル
画像	画像とその下にラベルが並ぶリンク。コレクションのサムネイルやキャンペーンのバナーに使います	ラベル / 画像 / 画像のalt属性 / リンクURL / 新しいタブで開く

見出しタイプのアイテム設定。アイテムタイプが「見出し」で、入力欄はラベルだけ。下に表示するのチェックと削除

見出しタイプはリンク先を持たないので、入力欄は「ラベル」だけになります。トップレベルに置くと、クリックできない文字としてメニューバーに並びます（子アイテムを付ければホバーでドロップダウンは開きます）。

ラベル

ストアフロントに表示する文字です。1〜100 文字で、空のままだと保存時に「ラベルは必須です」で止まります。

URL（リンクURL）とリンクピッカー

リンクタイプは「URL」、画像タイプは「リンクURL」という名前で同じ入力欄が出ます。入力欄をクリックするとリンクピッカーが開き、「商品」「コレクション」「ページ」「ブログ」の 4 つのカテゴリが出ます。

URL 欄をクリックしたところ。商品・コレクション・ページ・ブログの 4 つのカテゴリが縦に並ぶ

カテゴリを選ぶと、その種類のリソースが一覧で出ます。上の「リソースを検索」に名前の一部を入れると絞り込めます。項目をクリックするとリンク先が入り、ピッカーが閉じます。

コレクションを選んだあと。リソースを検索の欄と、Home page・Automated Collection・Hydrogen などのコレクションが URL 付きで並ぶ

一覧に出るのは各カテゴリ 先頭 5 件 です。商品やコレクションが多いストアでは目当てのものが出ないことがあるので、「リソースを検索」で名前を入れて絞り込んでください。
選んだリンク先は /collections/ハンドル /products/ハンドル /pages/ハンドル /blogs/ハンドル の形（ドメインを除いた相対パス）で保存されます。そのため、ストアのドメインを変えてもリンクは切れません。
外部サイトへ飛ばしたいときは、ピッカーを使わず https:// から始まる URL を直接入力します。URL は 2000 文字までです。
入力欄の右端の「クリア」（×）で空にできます。URL が空のリンクは、クリックしても今いるページが開き直されるだけなので、ドロップダウンを開くためだけのトップレベルには「見出し」タイプを使うのがきれいです。

新しいタブで開く

チェックを入れると、そのリンクは別のタブで開きます。外部サイトへのリンクに向いています。

画像（画像タイプだけ）

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

画像タイプのアイテム設定。画像のサムネイル、画像を変更するにはドラッグ＆ドロップの案内、画像のalt属性、リンクURL

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

1 回に 1 枚、画像ファイルだけを受け付けます。
画像は Shopify の「コンテンツ > ファイル」に保存され、そこから配信されます。アプリのサーバーは経由しません。
アップロードは Shopify 側の処理が終わるまで 0.5 秒ごとに確認を繰り返します。大きな画像ほど「画像をアップロード中...」が長く続くので、表示が変わるまで待ってから次の操作をしてください。
画像を差し替えても、前の画像は「ファイル」に残ります。不要なら Shopify のファイル一覧から消してください。
画像をアップロードしただけではメニューは保存されていません。最後に「保存」を押してください。

画像のalt属性

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

ドロップダウンカラム数

トップレベルのアイテムを選んだときだけ出るスライダーです。そのアイテムのドロップダウンを何列で組むかを 1〜4 で決めます（初期値 3）。子アイテムが列の数より少ないときは、子アイテムの数が上限になり、空の列は作られません（画面の説明文「子アイテムの数が上限になります。」がこの意味です）。子アイテムを 1 つずつ左から順に列へ流し込むので、列の見出しにしたい「見出し」タイプと、その下に並べたい孫アイテムをセットで作ると、見出し付きの列になります。

表示する

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

削除

パネルの最下部にある赤いボタンです。確認モーダルが開き、子アイテムがあるときは「子アイテム 3 件も一緒に削除されます。」のように件数が出ます。「削除」で確定すると取り消せません。「キャンセル」なら何も起きません。

「アイテムを削除しますか？」の確認モーダル。子アイテム 3 件も一緒に削除されます、という説明

保存する・変更を破棄する

右上の「保存」は、何か変更があるときだけ押せます。変更があると「変更を破棄」も並んで出ます。

メニュー名を変えた直後。右上に「変更を破棄」と押せる状態の「保存」が出ている

ボタン	動作
保存	メニュー名とアイテムをストアに保存し、「メニューを保存しました」のトーストが出ます。新規作成のときは保存後に「メニューを編集」の画面に切り替わります
変更を破棄	メニュー名・アイテム・選択状態を、最後に保存した内容へ戻します

保存できないのは、メニュー名が空のとき、アイテムが 1 つも無いとき（「アイテムを1つ以上追加してください」）、ラベルが空のアイテムがあるとき、メニューが 10 個を超えるときです。失敗したときは入力内容が残るので、直してからもう一度押してください。
未保存のまま「メニュー一覧」やブラウザの戻るで画面を離れても警告は出ず、変更は消えます。離れる前に必ず「保存」を押してください。
有効なメニューを編集して保存すると、ストアフロントにはすぐ反映されます（テーマエディタでの保存は不要です）。

「設定」画面

サイドバーの「設定」から開きます。左上の「← 」（メニュー一覧）で戻れます。

設定画面。テーマにメガメニューを追加、言語設定、おすすめアプリの 3 つのカード

テーマにメガメニューを追加

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

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

言語設定

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

設定はブラウザに保存されます。別のブラウザや別のパソコンから開いたときは、もう一度選び直してください。
「複製」で付く「(コピー)」の文字は、複製した時点の表示言語で保存されます。あとで言語を変えても、その名前は変わりません。
ストアフロントのメガメニューは、ここで選んだ言語の影響を受けません。ストアに出る文字はすべてビルダーで入力したラベルです。

ストアフロントの設定（テーマエディタ）

メガメニューの見た目はすべてテーマエディタの埋め込みアプリ「UR: Mega Menu」の設定で決めます。「設定」画面の「テーマをプレビュー」を押すか、Shopify 管理画面の「オンラインストア > テーマ > カスタマイズ」を開いて左下の「埋め込みアプリ」を選び、「UR: Mega Menu」の行を開くと設定が出ます。変更は右のプレビューに即座に反映され、右上の「保存」で公開されます。

テーマエディタで「UR: Mega Menu」の行を開いたところ。ナビゲーション置き換え設定とメニュースタイル設定が見え、右のプレビューにメガメニューが出ている

設定は 6 つのグループ、26 項目です。

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

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

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

メニュースタイル設定

メニュースタイル設定。メニュー幅（全幅・コンテナ幅）、文字の大きさ 14px、アイテム左右パディング 16px、アイテム上下パディング 12px

項目	意味	選択肢・範囲	初期値
メニュー幅	メニューバーを画面いっぱいに広げるか、中央に寄せるか	全幅 / コンテナ幅（最大 1200px）	全幅
文字の大きさ	トップレベルのアイテムの文字サイズ	10〜24px、1px 刻み	14px
アイテム左右パディング	トップレベルのアイテムの左右の余白	0〜40px、2px 刻み	16px
アイテム上下パディング	トップレベルのアイテムの上下の余白（メニューバーの高さが変わります）	0〜40px、2px 刻み	12px

メインメニュー色設定

メインメニュー色設定。背景色 #FFFFFF、文字の色 #333333、ホバー時の文字の色 #000000、ホバー時の背景色 #F5F5F5、枠線の色 #E0E0E0

項目	意味	初期値
背景色	メニューバーの背景	#FFFFFF
文字の色	トップレベルのアイテムの文字	#333333
ホバー時の文字の色	マウスを重ねたアイテムの文字	#000000
ホバー時の背景色	マウスを重ねたアイテムの背景	#F5F5F5
枠線の色	メニューバー下端の 1px の線	#E0E0E0

色はカラーピッカーで選ぶか、#RRGGBB の 16 進数で入力します。

ドロップダウン設定

ドロップダウン設定。5 つの色と、ドロップダウンの文字の大きさ 14px、ドロップダウン内パディング 24px、ドロップダウンアイテム間隔 8px

項目	意味	選択肢・範囲	初期値
ドロップダウン背景色	開いたパネルの背景	色	#FFFFFF
ドロップダウンの文字の色	パネル内のリンクと見出しの文字	色	#333333
ドロップダウンホバー時の文字の色	パネル内でマウスを重ねたリンクの文字	色	#000000
ドロップダウンホバー時の背景色	パネル内でマウスを重ねたリンクの背景	色	#F5F5F5
ドロップダウン枠線の色	パネルの 1px の枠線	色	#E0E0E0
ドロップダウンの文字の大きさ	パネル内の文字サイズ	10〜24px、1px 刻み	14px
ドロップダウン内パディング	パネルの内側の余白	0〜60px、2px 刻み	24px
ドロップダウンアイテム間隔	列と列、行と行の間隔	0〜24px、2px 刻み	8px

パネルは画面の高さに収まらないとき縦スクロールになります（画面の高さ − 180px が上限）。
パネルの最小幅は 200px で、列の内容に合わせて広がります。

モバイル設定

モバイル設定。モバイルでメガメニューを使用（オフ）、モバイル切り替え幅 768px、ハンバーガーアイコンを表示（オン）、モバイル背景色、モバイルの文字の色、ハンバーガーアイコンの色

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

初期状態（オフ）では、スマートフォンではテーマ標準のメニューが動きます。まず PC だけメガメニューにして様子を見たいストアはこのままで構いません。
オンにすると、モバイル幅ではドロップダウンがアコーディオン（タップで開閉、矢印が回転）になります。「ハンバーガーアイコンを表示」をオフにすると開くボタンが無くなるので、オンのままにしてください。
画面幅の判定はブラウザの幅で行い、幅を変えた瞬間に切り替わります。

追加設定

追加設定。追加の CSS のテキストエリアが空の状態

項目	意味	初期値
追加の CSS	メガメニューに当てる CSS を直接書けます。メガメニューの要素は `.sa-185-mega-menu` から始まるクラス名を持ちます	空

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

ストアフロントでの見え方

設定を保存すると、テーマのメニューがあった場所にメガメニューが出ます。

ストアフロントのヘッダー。テーマのメニューがメガメニューに置き換わり、「ショップ」に下向きの矢印が付いている

トップレベルのアイテムにマウスを重ねると、0.2 秒後にドロップダウンが開きます。離れてから 0.2 秒後に閉じるので、斜めにマウスを動かしても閉じにくくなっています。

ドロップダウンが開いた状態。左に画像アイテム、右に「アパレル」「アクセサリー」の見出しとその下のリンク

スマートフォン幅では、「モバイルでメガメニューを使用」がオフ（初期値）の間はメガメニューが出ず、テーマ標準のハンバーガーメニューが残ります。

スマートフォン幅のストアフロント。テーマ標準のハンバーガーアイコンが左上にあり、メガメニューは出ていない

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

こんなときはこう設定する

コレクションの写真で誘導したいとき

トップレベルのアイテム（例: ショップ）の下に「画像」タイプの子アイテムを作り、コレクションの写真をアップロードして「リンクURL」でそのコレクションを選びます。同じ階層に「見出し」タイプを置き、その下（孫）にテキストリンクを並べると、上の画像のように「写真 1 列＋文字 2 列」の構成になります。「ドロップダウンカラム数」を 3 にすると、画像・見出し・見出しがそれぞれ 1 列に入ります。

カテゴリが多くて 1 つのドロップダウンに収まらないとき

トップレベルを「メンズ」「レディース」のように分け、それぞれに「ドロップダウンカラム数」4 で子アイテムを最大 20 個まで置きます。列は左から順に埋まるので、「見出し」を 4 つ作って、それぞれの下に孫アイテムを入れると 4 列の整った表になります。それでも足りないときは、テーマエディタの「ドロップダウンの文字の大きさ」を 12px、「ドロップダウンアイテム間隔」を 4px にすると 1 列に入る行数が増えます。

ストアの雰囲気に馴染ませたいとき

テーマエディタの「メインメニュー色設定」で「背景色」をテーマのヘッダーと同じ色に、「枠線の色」も背景色と同じにすると、メニューバーの境目が消えてヘッダーの一部に見えます。「ホバー時の背景色」を背景色と同じにして「ホバー時の文字の色」だけ変えると、文字色だけが変わる控えめな動きになります。文字の大きさとパディングはテーマの他の要素に合わせて調整してください。

季節限定のメニューに切り替えたいとき

通常のメニューを「複製」し、名前を「セール用」などに変えて、キャンペーンの画像アイテムやリンクを足しておきます。期間が来たら一覧で「有効にする」を押すだけで切り替わり、終わったら元のメニューを「有効にする」で戻せます。テーマエディタの操作は要りません。特定のアイテムだけ一時的に消したいときは、削除せず「表示する」を外しておくと、あとで戻せます。

うまく表示されないときは

ストアにメガメニューが出ない

次の順に確かめてください。

メニュー一覧で、どれか 1 つのメニューが「有効」になっているか。有効なメニューが無いと何も出ません。
有効なメニューに、「表示する」が付いたトップレベルのアイテムが 1 つ以上あるか。表示できるアイテムが 0 のメニューは、メニューバーごと描画されません。
テーマエディタの「埋め込みアプリ」で「UR: Mega Menu」がオンになっていて、「保存」を押したか。「テーマに追加」を押しただけでは反映されません。
有効にしたテーマが公開中のテーマか。「設定」の「テーマを選択」で公開中以外のテーマを選んでいると、公開中のストアには出ません。

メガメニューがテーマのメニューの下に別の段として出る

「置き換え対象のセレクター」に一致する要素が見つからず、ヘッダーの直後に挿入されています。Horizon テーマなら header-menu を指定してください。他のテーマでは、テーマのメニュー要素のクラス名（例: .header__inline-menu）を指定します。テーマのメニューが残ってしまうときは「追加で非表示にする要素」にそのクラス名を足します。

テーマのメニューが消えたのにメガメニューも出ない

「置き換え対象のセレクター」に一致した要素は隠されますが、有効なメニューが無い・表示できるアイテムが無いときはメガメニューが描画されません。この状態ではヘッダーからメニューが無くなって見えます。メニューを有効にするか、埋め込みアプリをオフにして保存してください。

スマートフォンで出ない

「モバイルでメガメニューを使用」が初期値のオフだと、「モバイル切り替え幅」（初期値 768px）以下ではメガメニューを出さない仕様です。スマートフォンでも使いたいときはオンにして保存してください。

設定を変えたのにストアに反映されない

テーマエディタでは「保存」を押すまで公開されません。入力欄にカーソルを置いたまま「保存」を押すと保存されないことがあるので、別の場所を一度クリックしてから押してください。
メニューの内容（ラベル・リンク）はアプリの「保存」を押した時点で反映されます。ブラウザのキャッシュで古い表示が残ることがあるので、再読み込みして確かめてください。

リンクピッカーに商品やコレクションが出ない

一覧は各カテゴリ先頭 5 件だけです。「リソースを検索」に名前を入れて絞り込んでください。
それでも 1 件も出ないときは、アプリの権限（商品とコンテンツの読み取り）が付いていない可能性があります。アプリを一度アンインストールして入れ直すと、権限の確認画面がもう一度出ます（メニューのデータは Shopify のメタフィールドに残るので消えません）。

画像が「画像をアップロード中...」のまま終わらない

Shopify 側の画像処理を待っています。大きな画像は時間がかかるので、しばらく待ってください。ページを再読み込みすると中断されるので、その場合はもう一度アップロードしてください。「画像のアップロードに失敗しました。」と出たときは、ファイルが画像でない、または権限（ファイルの書き込み）が無い可能性があります。