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

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

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

Shopify管理画面の コンテンツ> メニュー からオンラインストアのメニューを表示および変更できます。

ドロップダウンメニューを作成するメニュー項目のネスト化

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

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

メインメニューとドロップダウンメニューは、テーマに応じてオンラインストア内の異なるロケーションに表示されます。一部のテーマでは、ドロップダウンメニューがあることを顧客管理が認識できるように、メインメニューのドロップダウンメニューの名前の横にIconが表示されます。

メインメニューからドロップダウンメニューを追加する

メインメニューのどのメニュー項目からでも、ドロップダウンメニューを追加できます。

手順

デスクトップ

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

iPhone

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

Android

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

フッターメニューの統合

ドロップダウンメニューはフッターメニューでも実装できます。

手順

管理画面で [コンテンツ] > [メニュー] の順に移動します。
オプション: メインメニューで使用されるのと同じネスト原則に従います。たとえば、メニュー項目をヘッダーアイテムの下にドラッグしてドロップダウン構造を作成するには、をクリックして項目を所定の位置にドラッグします。
ページにリンクしないヘッダーアイテム（「サポート」や「Explore」ヘッダーなど）の リンク フィールドに # と入力します。

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

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

ほとんどのテーマは、最大2レベルのネストされたドロップダウンメニューをサポートしています。テーマのドキュメントを確認するか、ネストされたアイテムをテストして互換性を確認してください。
一部のテーマでは、モバイルでの使いやすさを向上させるためにCSSの調整が必要な場合があります。テーマコードに詳しくない場合は、テーマのカスタマイズを行わないでください。テーマのカスタマイズについて詳しくはこちらをご覧ください。

テーマがネストされたドロップダウンメニューをサポートしているかどうかを確認する

現在のテーマが、実装するネストされたドロップダウンメニューレベルの最大数をサポートしているかどうかを確認するには、次のリソースを使用できます。

テーマのドキュメントを確認する：メニュー機能やサポートされているネストレベルに関する具体的な情報は、「テーマのドキュメント」をご覧ください。
ネストされたアイテムをテストします。必要な数のネストされたレベルでテストメニュー構造を作成し、それがデスクトップとモバイルデバイスの両方で正しく表示されることを確認します。

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

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

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

Label Shop# リンクのあるトップレベルのメニュー項目には、「カテゴリー別」などのわかりやすいを使用します。
メニューがモバイルデバイス上で最適化されていることを確認します。モバイルデバイスでメニューをテストして、ドロップダウンメニューが期待どおりに展開されることを確認できます。
過密状態を避けるため、トップレベルのメニュー項目を 7 個以下にします。
透明で説明的なリンクタイトルを使用してください。たとえば、「コレクション」や「サマードレス」などです。
各メニューには最大10,000アイテムまで追加でき、ストア全体では最大1,000メニューまで作成できます。

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

ナビゲーションメニューを設定するときに発生する可能性のある一般的な問題に対する次の解決策を確認してください。

モバイルメニューのリダイレクト: トップレベルのメニューリンクをタップすると新しいページにリダイレクトされる場合は、Shopify 管理画面のメニューをチェックして、メニューリンクフィールドが# になっていることを確認してください。
表示の問題: ネストされたアイテムが表示されない場合は、それらがヘッダーアイテムの下に完全にドラッグされ、メニューインターフェイスでインデントされていることを確認します。テーマが、設定したネストレベルの数をサポートしていることを確認します。
テーマの互換性: ドロップダウンメニューで問題が発生している場合は、実装しようとしているネストされたレベルの数がテーマでサポートされていることを確認してください。一部のテーマでは、複数のレベルのネストをサポートするために追加のカスタマイズが必要になる場合があります。

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

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