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

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

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

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

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

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

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

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

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

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

手順

デスクトップ
  1. 管理画面で [コンテンツ] > [メニュー] の順に移動します。

  2. メインメニューの名前をクリックします。

  3. ドロップダウンメニューのヘッダーとなるメインメニュー項目の1つを選択するか、新しいメニュー項目を追加します。ヘッダーを何にもリンクさせたくない場合は、ヘッダーメニュー項目の [リンクを検索または貼り付ける] フィールドに「#」と入力します。

  4. メニュー項目を追加してドロップダウンメニューに含めるには、以下を実行します。

    1. メニュー項目の追加をクリック
    2. [名前] フィールドに、メニュー項目の名前を入力します。
    3. [検索またはリンクを貼り付ける] フィールドに、メニュー項目のリンク先を入力または選択します。
  5. [追加] をクリックし、[ドラッグ] をクリックしてからメニュー項目をドラッグし、ヘッダーメニュー項目の下にネストします。

  6. メニューの保存をクリック

iPhone
  1. Shopifyアプリから、[] メニュー [] アイコンをタップします。

  2. [コンテンツ] > [メニュー] の順にタップします。

  3. メインメニューの名前をタップします。

  4. ドロップダウンメニューのヘッダーにするメインメニュー項目のいずれかを選択するか、ヘッダーにする新しいメニュー項目を追加します。ヘッダーに何もリンクしない場合は、ヘッダーのメニュー項目 [検索またはリンクを貼り付ける] フィールドに「#」を入力します。

  5. メニュー項目を追加してドロップダウンメニューに含めるには、以下を実行します。

    1. [メニュー 項目を追加する] をタップします。
    2. [名前] フィールドに、メニュー項目の名前を入力します。
    3. [検索またはリンクを貼り付ける] フィールドに、メニュー項目のリンク先を入力または選択します。
  6. [追加] をタップし、[ドラッグ] をタップしてメニュー項目をドラッグし、ヘッダーメニュー項目の下にネストします。

  7. [保存] をタップします。

Android
  1. Shopifyアプリから、[メニュー] ボタンをタップします。

  2. [コンテンツ] > [メニュー] の順にタップします。

  3. メインメニューの名前をタップします。

  4. ドロップダウンメニューのヘッダーにするメインメニュー項目のいずれかを選択するか、ヘッダーにする新しいメニュー項目を追加します。ヘッダーに何もリンクしない場合は、ヘッダーのメニュー項目 [検索またはリンクを貼り付ける] フィールドに「#」を入力します。

  5. メニュー項目を追加してドロップダウンメニューに含めるには、以下を実行します。

    1. [メニュー 項目を追加する] をタップします。
    2. [名前] フィールドに、メニュー項目の名前を入力します。
    3. [検索またはリンクを貼り付ける] フィールドに、メニュー項目のリンク先を入力または選択します。
  6. [追加] をタップし、[ドラッグ] をタップしてメニュー項目をドラッグし、ヘッダーメニュー項目の下にネストします。

  7. [✓] をタップします。

フッターメニューの統合

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

手順

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

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

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

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

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

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

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

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

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

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

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

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

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

  • モバイル メニューのリダイレクト: トップレベルのメニュー リンクをタップすると新しいページにリダイレクトされる場合は、Shopify 管理画面のメニューをチェックして、メニュー リンク フィールドが# になっていることを確認してください。

  • 表示の問題: ネストされたアイテムが表示されない場合は、それらがヘッダーアイテムの下に完全にドラッグされ、メニューインターフェイスでインデントされていることを確認します。テーマが、設定したネストレベルの数をサポートしていることを確認します。

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

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

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

お探しの情報が見つかりませんか?いつでもお気軽にお問い合わせください。