オンラインストアでドロップダウンメニューを設定する

ドロップダウンメニューを使用すると、商品、コレクション、ページをグループ化して、お客様がオンラインストア内を移動しやすくなります。たとえば、商品数が多い場合は、商品をコレクションに追加し、メインメニューからドロップダウンメニューを使用してコレクションを整理するとよいでしょう。これにより、お客様が探している種類の商品を見つけやすくなります。

ドロップダウンメニューやデフォルトメニューでメニュー項目を追加、削除、編集することもできます。

Shopify 管理画面で、[コンテンツ] > [メニュー] の順に移動して、オンラインストアのメニューを表示および変更できます。

このページの内容

メニュー項目を作成または移動して、最上位の項目の下にネストすることで、ドロップダウンメニューを構築できます。最上位の項目はオンラインストアのメインメニューに表示され、ネストされたメニュー項目はドロップダウンメニューに表示されます。最上位の項目には、最大2階層のネストされたドロップダウンメニューを設定できます。

すべてのテーマで、ネストされた項目がメインメニューのドロップダウンメニューとして表示されます。また、一部のテーマでは、他のロケーションでもネストされた項目がドロップダウンメニューとして表示されます。

メインメニューとドロップダウンメニューは、テーマによってオンラインストアの異なるロケーションに表示されます。一部のテーマでは、メインメニューのドロップダウンメニュー名の横にアイコンが表示され、お客様がドロップダウンメニューの存在を認識しやすくなっています。

メインメニューのいずれかのメニュー項目からドロップダウンメニューを追加することができます。

手順:

デスクトップ

Shopify 管理画面で、[コンテンツ] > [メニュー] の順に移動します。
メインメニューの名前をクリックします。
メインメニュー項目のいずれかを選択してドロップダウンメニューのヘッダーにするか、新しいメニュー項目を追加します。ヘッダーをどこにもリンクさせたくない場合は、ヘッダーメニュー項目の [リンクを検索または貼り付け] フィールドに # を入力します。
ドロップダウンメニューに含めるメニュー項目を追加するには、以下の手順を実行します。
1. [メニュー項目を追加] をクリックします。
2. [名前] フィールドに、メニュー項目の名前を入力します。
3. [リンクを検索または貼り付け] フィールドに、メニュー項目のリンク先を入力または選択します。
[追加] をクリックした後、アイコンをクリックしてメニュー項目をドラッグし、ヘッダーメニュー項目の下にネストします。
[メニューを保存] をクリックします。

モバイル

Shopify アプリから、アイコンをタップします。
[コンテンツ] メニューで、アイコンをタップし、次に [メニュー] をタップします。
メインメニューの名前をタップします。
メインメニュー項目のいずれかを選択してドロップダウンメニューのヘッダーにするか、ヘッダーとして新しいメニュー項目を追加します。ヘッダーをどこにもリンクさせたくない場合は、ヘッダーメニュー項目の [リンクを検索または貼り付け] フィールドに「#」を入力します。
ドロップダウンメニューに含めるメニュー項目を追加するには、以下の手順を実行します。
1. [メニュー項目を追加] をタップします。
2. [名前] フィールドに、メニュー項目の名前を入力します。
3. [リンクを検索または貼り付け] フィールドに、メニュー項目のリンク先を入力または選択します。
[追加] をタップし、次にを使ってメニュー項目をドラッグして、ヘッダーメニュー項目の下にネストします。
[保存] または [✓] をタップします。

ドロップダウンメニューは、フッターメニューにも設定できます。

手順:

Shopify 管理画面で、[コンテンツ] > [メニュー] の順に移動します。
任意：メインメニューと同じネストの原則に従います。たとえば、をクリックして項目を所定の場所にドラッグし、メニュー項目をヘッダー項目の下に移動させることで、ドロップダウン構造を作成します。
ページにリンクしないヘッダー項目 (たとえば、「サポート」や「探索」のヘッダー) の場合、[リンク] フィールドに「#」と入力します。

テーマの互換性に関する考慮事項

テーマにドロップダウンメニューを追加する際は、以下の考慮事項を確認してください。

ほとんどのテーマでは、最大 2 階層のサブメニューがサポートされています。互換性を確認するには、テーマのドキュメントを確認するか、ネストされた項目をテストしてください。
テーマによっては、モバイルでのユーザビリティを向上させるために CSS の調整が必要になる場合があります。テーマコードに精通していない場合は、テーマをカスタマイズしないでください。テーマのカスタマイズについて、詳しくはこちらをご覧ください。

テーマがサブメニューをサポートしているかどうかを判断する

現在のテーマで、実装したいサブメニューの最大階層数がサポートされているかどうかを判断するには、以下のリソースを利用できます。

テーマのドキュメントを確認する：メニューの機能とサポートされているネストの階層に関する具体的な情報については、テーマのドキュメントを確認してください。
ネストされた項目をテストする：希望するネスト階層数でテスト用のメニュー構造を作成し、デスクトップとモバイルの両方のデバイスで正しく表示されることを確認します。

ほとんどのテーマでは、最大 2 階層のサブメニューがサポートされています。ドロップダウンメニューで問題が発生している場合は、実装しようとしているネスト階層数をテーマがサポートしているか確認してください。テーマによっては、複数のネスト階層をサポートするために追加のカスタマイズが必要になる場合があるためです。

ドロップダウンメニューのベストプラクティス

すべてのデバイスで適切に機能する便利なメニュー構造を作成するために、以下のベストプラクティスを確認してください。

# リンクを持つ最上位のメニュー項目には、「カテゴリー別に表示」などの分かりやすいラベルを使用します。
メニューがモバイルデバイス向けに最適化されていることを確認してください。モバイルデバイスでメニューをテストして、ドロップダウンメニューが期待どおりに展開されることを確認できます。
メニューが混み合わないように、最上位のメニュー項目は 7 件以下に設定してください。
明確で分かりやすいリンクタイトルを使用してください (例：「コレクション」、「サマードレス」)。
各メニューには最大 10,000 件の項目を設定でき、ストア全体では最大 1,000 個のメニューを設定できます。ドロップダウンメニューにサブアイテムがあるメニュー項目は、この上限に対して個別のメニューとしてカウントされます。

ドロップダウンメニューのアクセシビリティ

ほとんどのテーマでは、ドロップダウンメニューのヘッダーは、クリック可能なリンクではなくボタンとして実装されています。これは、支援技術を使用するお客様がメニュー構造を理解しやすくなるように意図されたアクセシビリティデザインです。

最上位のメニュー項目でドロップダウンサブメニューを制御する場合、その項目は新しいページへのリンクとしてではなく、メニューを展開するボタンとして機能します。このアプローチにより、スクリーンリーダーなどの支援デバイスを使用するお客様は、ストアのメニューシステムを適切に操作できます。

お客様がメインカテゴリーページ (「すべての商品」や「すべてのコレクション」など) にアクセスできるようにしたい場合は、ヘッダーをクリック可能にするのではなく、ドロップダウンメニュー自体の最初の項目としてこのページを追加してください。

一般的な問題のトラブルシューティング

メニューを設定する際に発生する可能性のある一般的な問題については、以下の解決策を確認してください。

モバイルメニューのリダイレクト：最上位のメニューリンクをタップしたときに新しいページにリダイレクトされる場合は、管理画面でメニューを確認し、メニューリンクのフィールドが「#」になっていることを確かめてください。
表示に関する問題：ネストされた項目が表示されない場合は、それらの項目がヘッダー項目の真下にドラッグされ、メニューのインターフェイスでインデントされていることを確認してください。設定したネスト階層数をテーマがサポートしていることも確認してください。
テーマの互換性：ドロップダウンメニューで問題が発生している場合は、実装しようとしているネスト階層数をテーマがサポートしているか確認してください。テーマによっては、複数のネスト階層をサポートするために追加のカスタマイズが必要になる場合があります。
サブメニューの作成がブロックされる：「メニューにサブメニューを含めることはできません。これを使用するには、ネストされたメニュー機能をオプトインしてください」というエラーが表示された場合、ストアでサブメニュー機能を有効にする必要がある場合があります。これは通常、2018年より前に作成されたストアに影響します。このエラーが発生した場合は、Shopify サポートにお問い合わせください。
誤ったメニューが表示される：同じページ (ホームページなど) を指すナビゲーションリンクが複数ある場合、テーマで誤ったサブメニューが表示されることがあります。混乱を避けるため、各メニューセクションが固有のページにリンクするようにしてください。
メニュー項目が消える：メニューリンクを削除していないのに消えてしまう場合は、メニュー項目がリンクしていた商品、コレクション、またはページを削除したかどうかを確認してください。リンク先のリソースを削除すると、メニュー項目も削除されます。

ドロップダウンメニューのテーマコードをカスタマイズする

より高度なカスタマイズが必要なテーマの場合は、テーマコードをカスタマイズすることを検討できます。