Shopifyナビゲーションメニューにサブメニューを追加する方法（ドロップダウン、階層、モバイル対応）
Shopifyでのサブメニュー追加は「コンテンツ > メニュー」でのドラッグ操作だけで完了します。しかし、親項目、テーマのヘッダー設定、モバイルドロワーが正しく構成されていなければ、顧客にとって使いやすいメニューにはなりません。
オンラインストアを開設した直後は、4〜5個のリンクを並べたフラットなヘッダーで十分です。しかし、商品カタログが増えるにつれ、すべてのコレクションを1行に並べるとヘッダーが散らかってしまいます。Eコマースの設計において、サブメニュー、ドロップダウンメニュー、ネストされたメニュー項目はすべて同じ仕組みを指します。親項目の下に子リンクを整理して配置する構成です。Shopifyの管理画面を使えば、テーマのコードを編集することなく直感的に設定できます。
- 素早いネスト操作： コンテンツ > メニュー で、ドラッグハンドルアイコン（
⠿）を使い、子項目を親項目の下かつ少し右側にドラッグします。 - 階層の制限： Shopifyでは親項目の下に最大2階層までネスト可能（合計3階層）ですが、テーマ側の対応が必要です。
- クリック不可の親項目： リンク欄に
#を設定すると、親項目がリンク遷移せず、メニューを開閉するボタンとして機能します。
クイックアンサー：Shopifyでサブメニューを追加する方法
Shopifyでサブメニューを追加するには、「コンテンツ > メニュー」を開き、メインメニューを選択して親項目の下に配置したい項目を追加します。その後、その項目を親項目の下かつ少し右側にドラッグして「メニューを保存」をクリックします。トップレベルの項目には、最大2階層のネストされたドロップダウンメニューを設定できます。
次の5つの手順で設定します：
- Shopify管理画面で コンテンツ > メニュー に移動します。
- 編集したいメニューのタイトル（通常は Main menu）をクリックします。
- メニュー項目を追加 をクリックし、名前 とリンク先を入力して 追加 をクリックします。
- 項目の横にあるハンドルアイコン（
⠿）をクリックしたまま、親項目のすぐ下かつ右側にドラッグしてネストします。 - メニューを保存 をクリックします。
トップレベルの項目の下には、最大2階層のドロップダウンメニューを配置できます。
サブメニューとは何か、いつ店舗に必要なのか
サブメニューとは、親ヘッダーの下にまとめられた子リンクのリストです。デスクトップではホバーやクリックによってドロップダウンが開き、スマートフォンではナビゲーションドロワー内で展開されます。
ネストされたナビゲーションは、コレクション、商品、ページを効果的に整理するための一般的な手法です。すべてのリンクを一度に表示する代わりに、階層構造を作ることで直感的な誘導が可能になります。顧客は「アパレル」といった大カテゴリを確認した上で、「ジャケット」などの具体的な商品群へ進むことができます。
サブメニューが必要になる基準は、カタログの規模です。Shopifyでは、視覚的な混雑を避けるため、トップレベルのメニュー項目を7個以下に抑えることを推奨しています。関連するコレクションを親項目の下にまとめると、長いヘッダーも見やすくなります。
一方、商品数が数点しかなかったり、コレクションが2〜3個しかない場合はサブメニューを作る必要はありません。小さなカタログで無理にドロップダウンを使うと、余計なクリックが増えてしまいます。
また、整ったナビゲーション構造は検索エンジンの巡回にも好影響を与えます。Googleがメニューをクロールする仕組み を確認し、メニューのリンクが検索エンジンによるコレクションページの発見にどう役立つかを理解しましょう。
Shopifyでサブメニューを追加する手順（ステップバイステップ）
Shopifyにはドラッグ＆ドロップで操作できるメニューマネージャーが備わっています。パソコンのブラウザでも、モバイルアプリからでも設定が可能です。
デスクトップでの操作手順
- Shopify管理画面の コンテンツ > メニュー を開きます。（注：古いガイドではこの項目を オンラインストア > ナビゲーション と呼んでいますが、Shopify ヘルプセンターの現在の表記は コンテンツ > メニュー です。）
- 編集するメニュー（通常は Main menu）をクリックします。
- 親項目がまだない場合は、メニュー項目を追加 をクリックし、大分類の名前（例：「ショップ」）を入力してリンクを設定し、追加 をクリックします。
- 再度 メニュー項目を追加 をクリックして子項目を作成します。名前 欄にサブカテゴリ名を入力し、リンク 欄でコレクションやページを選択して 追加 をクリックします。
- 作成した項目の左側にある6つの点のハンドルアイコン（
⠿）を見つけます。メニュー項目の横にあるハンドルアイコン（⠿）をクリックしたまま別の位置へドラッグします。親項目の下へ移動し、カーソルを少し右に動かして行が右にインデント（字下げ）されたら指を離します。 - 他のサブカテゴリについても同様の手順を繰り返し、必要に応じて並び順を調整します。
- メニューを保存 をクリックします。Shopifyには変更数の上限があるため、上限に達しないようこまめにメニューを保存してください。
Shopifyモバイルアプリでの操作手順
スマートフォンから操作する場合も手順は同様です：
- Shopifyアプリを開き、メニューアイコンをタップして、Contents セクションの メニュー を開きます。
- メインメニューの名前をタップし、メニュー項目を追加 をタップします。
- 項目名とリンク先を入力して 追加 をタップします。
- ハンドルアイコン（
⠿）を長押しし、親項目の下にドラッグしながら右へスライドさせてインデントします。 - 保存 をタップします。
Shopifyでは、ドロップダウンメニューが期待通りに展開するか、タッチ操作がスムーズに行えるかを確認するため、モバイル端末実機でのテストを推奨しています。
ドロップダウンを開くだけの親項目（リンクなし）を作成する
多くのストアオーナーから「Shopifyでクリックできない親メニュー項目を作るにはどうすればよいか？」という質問が寄せられます。
「カテゴリから探す」といった親見出しは、下層メニューを開くだけのトリガーにしたい場合があります。もし親項目に不要なページへのリンクが設定されていると、誤ってクリックした顧客が現在の閲覧ページから離脱してしまいます。
クリックしてもページ遷移しない親項目を作る手順は次の通りです：
- コンテンツ > メニュー で、親項目の横にある 編集 をクリックします（新規の場合は メニュー項目を追加）。
- 名前 欄に見出しを入力します。
#リンクを使用するトップレベル項目には、「カテゴリから探す」など何が表示されるか伝わる説明的なラベルを付けます。 - ヘッダーをどこにもリンクさせたくない場合は、親項目のリンク検索欄に
#を入力します。 - 変更を適用 をクリックし、メニューを保存 をクリックします。
多くのテーマでは、ドロップダウンメニューのヘッダーをクリック可能なリンクではなくボタンとして実装しています。# を設定すると、親項目には読み込むページがないため、タップしたときにドロップダウンが開く場合があります。
もし親カテゴリ自体の全体コレクションページにもアクセスさせたい場合は、サブメニューの先頭に「[カテゴリ名]をすべて見る」という子リンクを設置してください。
注意点として、ドロップダウンメニューで下に項目がネストされているメニュー項目を削除すると、ネストされたメニュー項目も一緒に削除されます。親項目を削除・変更したいときは、先に子項目をトップレベルへ引き出してから削除してください。
図1：概念図 — ハッシュリンク（#）でドロップダウン展開ボタンにする設定と直接ページ遷移するリンクの比較
Shopifyのサブメニューは何階層まで作成できるか？
大規模な商品構成を持つストアでは、「Shopifyのメニューは何階層まで対応しているか？」という点が重要になります。
Shopify標準のメニュー管理では、トップレベル項目の下に最大2階層のネストされたドロップダウンメニューを配置できます。トップの親項目を含めると、合計3階層まで作成可能です：
- 第1階層（トップレベル）： ヘッダーのメインバーに表示される項目（例：「メンズ」）。
- 第2階層（第1サブメニュー）： 第1階層を選択した際に開くドロップダウン（例：「シューズ」）。
- 第3階層（第2サブメニュー / フライアウト）： 第2階層からさらに横へ分岐する項目（例：「スニーカー」）。
管理画面上では3階層までネストできますが、それが実際のストアフロントで展開されるかはテーマの仕様に依存します。オンラインストアで全3階層のメニューが表示されるよう、テーマを最新版に更新してください。
また、配置場所による違いもあります。ほぼすべてのテーマがメインメニューではネストされたドロップダウンを表示しますが、フッターやサイドバーなどの他の場所でドロップダウン表示できるテーマは一部に限られます。
現在のテーマが3階層に対応しているか確認するには、第2階層の下にテスト用の第3階層リンクをネストして保存し、プレビューで確認します。第3階層が開かない場合、テーマが対応していない可能性があります。
UXの観点からは、可能な限り2階層以内に留めることをお勧めします。3階層のフライアウトは、特にマウスでは操作しにくくなります。深い分類が必要な場合は、Shopifyマルチレベルメニューの設計ガイド を参考に構造を整理してください。
モバイル端末でサブメニューはどのように動作するか
スマートフォンにはマウスがないため、サブメニューはタップで操作できる必要があります。
モバイルドロワーで顧客が見る画面
スマートフォンの画面では、横長のヘッダーメニューはハンバーガーアイコン（3本線）の中に格納されます。アイコンをタップするとドロワーが引き出されます：
- サブメニューを持つ親項目には、プラス記号（
+）や矢印などの展開アイコンが表示されることがよくあります。 - タップすると通常は下層がリスト表示されるか、子パネルが開きます。具体的な動作はテーマによって異なります。
- 親項目に
#を設定した場合、多くのテーマではページ遷移せずにリストが開きます。
テーマごとに表示が異なるため、Shopifyではドロップダウンメニューが期待通りに展開するか、モバイル端末上で実際にテストしてタップ領域を確認することを推奨しています。
「すべて表示」リンクを追加する
パソコン画面では、親カテゴリにカーソルを乗せて子項目を見つつ、親リンクをクリックして全体ページへ行くことができます。しかしタッチ画面にホバー操作はありません。タップは「サブメニューを開く」か「ページへ行く」のどちらか一方しか実行できません。
Baymard Instituteの調査によると、モバイルのメインナビゲーションに「すべて表示」の選択肢を提供することは、このモバイルユーザーの要求を満たす低コストで効果的な方法です。
しかし、Baymardの実態調査では、これを適切に実装できているサイトは全体のわずか24%にとどまっています。
自社ストアでの対策手順：
- 各親項目の下に、「[カテゴリ名]をすべて表示」という子リンクを追加して全体コレクションにリンクさせます。
- このリンクをネストリストの最上部に配置します。
- リストが長くなりすぎないように整理し、縦スクロールの手間を減らします。
モバイルドロワーの配置設計について詳しくは、モバイルドロワーメニューのベストプラクティス をご覧ください。
サブメニューが表示されない？よくある問題と解決策
メニューを保存したのにストア上でサブメニューが表示されない場合、原因の多くは以下の4つの設定ミスに集約されます。
以下のトラブルシューティング表を参考に原因を特定してください：
| 症状 | 考えられる原因 | 解決手順 |
|---|---|---|
| サブメニューがストア上に一切表示されない | テーマのヘッダー設定で別のメニューが割り当てられている | オンラインストア > テーマ > カスタマイズ > ヘッダー を開き、選択中のメニューが編集したメニューと一致しているか確認します。 |
| 子項目がドロップダウンにならずメインバーに並んでしまう | 親項目の下にインデント（字下げ）されずに保存されている | コンテンツ > メニュー でハンドルアイコン（⠿）を使い、親項目の下かつ右側へインデントさせてから保存します。 |
| 第3階層のフライアウトリンクが表示されない | テーマが古いか3階層の表示に対応していない | テーマを最新バージョンに更新し、テーマがドロップダウン表示をメインメニュー以外で制限していないか確認します。 |
| ドロップダウンが一瞬チラついて消える、または開かない | アプリのスクリプト競合やカスタムCSSの重複 | テーマを複製し、コード変更のないプレビューで再現するか確認するか、ブラウザの開発者ツールでエラーを調べます。 |
テーマが別のメニューを参照している
最も多い原因は、管理画面で Main menu を編集しているのに、テーマのヘッダー設定が別のメニューを参照しているケースです。最上部のメインメニューとして選択されているメニューが、作成・編集したメニューと同じであることを確認してください。ほとんどのテーマでは、テーマのヘッダーセクションの設定を編集してデフォルトのメインメニューを変更できます。オンラインストア > テーマ > カスタマイズ > ヘッダー に進み、メニュー の割り当てを確認してください。
項目が正しくネストされていない
項目の左端が親項目と同じ位置で揃っている場合、Shopifyはそれを独立したトップレベル項目として認識します。コンテンツ > メニュー で子項目を親項目の下へ運び、少し右にスライドさせてインデント線が表示された状態でドロップし、保存してください。
テーマが第3階層に対応していない
第3階層を作成したのに表示されない場合、テーマが3階層の表示に対応していない可能性があります。オンラインストアで全3階層のメニューが表示されるよう、テーマを最新版に更新してください。また、一部のテーマではネストメニューの表示がメインヘッダーに限定されている場合もあります。
カスタムコードやアプリとの干渉
メニューが点滅したり正常に開閉しない場合、theme.liquid に追加されたカスタムCSSやポップアップアプリが干渉していることがあります。テーマを複製し、クリーンな状態で動作を確認してみてください。
キーボードとスクリーンリーダーのアクセシビリティ
ナビゲーションは、キーボードや支援技術を利用するユーザーにとっても使いやすく設計されていなければなりません。
W3CのWeb Accessibility Initiative（WAI）ガイドラインでは、サブメニューを持つナビゲーションメニュー項目を視覚的およびマークアップを使用して明示することが定められています。下向きの矢印アイコンで展開可能であることを伝え、適切なARIA属性でスクリーンリーダーに状態を通知します。
さらに、W3C基準では、Tabキーでメニュー内を移動する際にサブメニューが自動的に開くべきではないと規定されています。そうしないと、キーボード利用者は次のトップレベル項目へ進むために、サブメニューの全項目を通過しなければならなくなるためです。
アクセシブルな設計について詳しくは、アクセシブルなナビゲーションメニューの設計ガイド を参照してください。
図2：概念図 — テーマのヘッダー設定で選択されているメニューの確認と子項目のインデント状態の検証
トレードオフ：これ以上サブメニューを追加すべきでないケース
サブメニューは便利ですが、階層を増やしすぎるとかえって利便性を損ねます。階層が増えるたびに、顧客には探索の摩擦が生じます。
ドロップダウンが長くなりすぎると、使い勝手は急激に悪化します。ニールセン・ノーマン・グループ（NN/g）の調査でも、「スクロールを必要とする非常に長いドロップダウンは、ユーザーが一目で選択肢の全体像を把握することを不可能にする」と警告されています。ドロップダウン内でスクロールを強いられると、下部にある項目は見落とされがちです。
安易にサブメニューを増やす前に、以下の4つの選択肢を検討してください：
- 小規模コレクションの統合： 数点しか商品がないコレクションは、1つの大きなコレクションページに統合します。
- 大カテゴリ名の見直し： 曖昧なカテゴリ名を具体的に改めることで、サブメニューを探し回る手間を省きます。
- コレクションページのフィルター活用： サイズ、色、価格ごとのリンクをすべてメニューに並べるのではなく、商品一覧ページの絞り込みフィルターに任せます。
- メガメニューへの移行： 多数のサブカテゴリを扱っている場合は、リンクを列ごとに整理して一目で全体を見渡せるメガメニューへの移行が適しています。これにはテーマ側の機能か専用アプリが必要です。
標準テーマのレイアウト制限について詳しくは、Shopifyテーマメニューの制限事項 をご覧ください。
Navi+ が選ばれる理由
Shopify標準のメニュー機能は、シンプルなドロップダウンには十分です。しかし商品数が増えると、1列だけの縦長メニューでは限界を感じることが多くなります。1列の長いリストは見づらくなることがあり、テーマ標準のモバイルメニューはカタログの規模に対して単純すぎる場合があります。
標準機能以上の柔軟性を求める店舗に向けて、Navi+ は次のような機能を提供しています：
- デスクトップメガメニュー： 商品、コレクション、画像、アイコン、柔軟なレイアウトを備えたメガメニューを構築できます。サブカテゴリを柔軟なレイアウトで整理できるため、顧客はスクロールすることなく選択肢を把握できます。
- モバイルメニュー： スマートフォンでストアを閲覧しやすくするモバイルメニュー、ドロワーメニュー、ハンバーガーメニューを作成できます。
Navi+ のメニューは Navi+ アプリ内でノーコードのドラッグ＆ドロップで作成します。Shopify管理画面のメニューとは別のもので、自動的に置き換えられることはありません。
サブメニューが長くなりすぎた場合や、パソコンで複数列や画像付きのメニューを表示し、モバイルでも分かりやすいドロワーを導入したい場合は、テーマと併用できる Navi+ Tab Bar & Mega Menu をお試しください。その間も、Shopifyのメニューはそのまま残ります。
サブメニュー公開前の確認チェックリスト
新しいメニューを一般公開する前に、以下の8項目を確認してください：
- ヘッダーメニューの参照先確認： オンラインストア > テーマ > カスタマイズ > ヘッダー で、選択中のメニューが「コンテンツ > メニュー」で編集したものと一致しているか確認した。
- インデントの確認： すべての子項目が親項目の下に正しくインデント（字下げ）されていることを確認した。
- 親項目の説明ラベル：
#を設定した親項目に「カテゴリから探す」など分かりやすいラベルを付けた。 - 「すべて表示」リンクの設置： モバイル利用者のために、子リストの先頭に全体コレクションへのリンクを配置した。
- 実機モバイルテスト： スマートフォンの実機でサブメニューが開き、リンクをタップしやすいことを確認した。
- トップ項目の上限： 混雑を避けるため、メインバーの項目数を7個以下に維持した。
- 展開アイコンの表示： サブメニューを持つ項目に下向き矢印などの視覚的サインがあることを確認した。
- メニューの保存完了： メニューを保存 をクリックしてすべての変更が反映されていることを確認した。
よくある質問（FAQ）
Shopifyでナビゲーションメニューにサブメニューを追加するにはどうすればよいですか？
Shopify管理画面の コンテンツ > メニュー を開き、メインメニューを選択して メニュー項目を追加 で子項目を作成します。その後、ハンドルアイコン（⠿）を使って親項目の下かつ少し右側へドラッグしてネストし、メニューを保存 をクリックします。
Shopifyのメニューは何階層まで作成できますか？
トップレベルの項目の下に最大2階層のネストメニューを作成できるため、合計で3階層まで対応しています。ただし、ストアフロント上で3階層すべてを表示するには、テーマ側が対応している必要があります。
親メニュー項目をクリックできないようにするにはどうすればよいですか？
親項目のリンク検索欄に # を入力し、「カテゴリから探す」などの説明的なラベルを設定します。多くのテーマでは、ページ遷移リンクではなく展開ボタンとして扱われるようになります。
サブメニューがストアに表示されないのはなぜですか？
最も一般的な原因は、テーマのヘッダー設定で編集したメニューとは別のメニューが割り当てられていることです。また、項目のドラッグによるインデントが不十分だったり、テーマがその階層の表示に対応していない場合も考えられます。
モバイル端末でもサブメニューは機能しますか？
はい。スマートフォンでは、ほとんどのテーマがハンバーガーアイコンの内側にメニューを格納し、その中で子項目を開きます。スマートフォン実機で操作性をテストし、各階層に「すべて表示」リンクを用意して迷わせないようにすることをお勧めします。
出典・参考資料
- Shopify Help Center: Drop-down menus — ドロップダウンメニューの作成およびモバイル確認に関する公式手順。
- Shopify Help Center: Editing menus — ハンドル操作、変更上限、親項目削除時のルールに関する解説。
- Shopify Partners Blog: Building Nested Navigations with Shopify Link List — カタログ整理のためのリンクリストおよびネストナビゲーションの解説。
- Shopify Community: Nesting menu not showing — テーマヘッダーのメニュー割り当て確認に関するコミュニティ解決事例。
- W3C Web Accessibility Initiative (WAI): Flyout Menus Tutorial — 視覚的インジケータおよびTabキー操作に関するアクセシビリティ標準。
- Baymard Institute: Have a “View All” Option in the Main Navigation at Each Level of the Mobile Product Catalog (Only 24% Get It Right) (2022) — モバイルで「すべて表示」オプションを適切に提供できているサイトが24%に留まることを示す実態調査。
- Nielsen Norman Group: Dropdowns: Design Guidelines — スクロールを要する長すぎるドロップダウンのユーザビリティ課題に関する研究。
- Shopify App Store: Navi+ Tab Bar & Mega Menu — メガメニューとモバイルメニューのアプリ掲載ページ。
- YouTube (Shopify Academy): How to create drop-down menus Shopify Help Center — ドロップダウンメニュー作成手順を解説する公式動画チュートリアル。
- YouTube (Learn With Shopify): How to reorganize your Shopify Menu like a pro — メニュー再編と視覚的階層設計に関する公式動画チュートリアル。
トピックを見る
このガイドは各テーマの記事にリンクしています——それぞれをさらに深く学べます。