Shopifyでハンバーガーメニューを横長メニューに変更する方法

ハンバーガーメニューとは何ですか?

ハンバーガー メニューは、クリックすると展開してナビゲーション リンクを表示する 3 本の線のアイコン (☰) です。

小さな画面でスペースを節約できるため、モバイルデバイスでよく使用されます。ただし、デスクトップでは、ハンバーガーメニューはナビゲーションが完全に表示されるのではなく、折りたたまれた状態になります。

水平メニュー（拡張デスクトップナビゲーション）とは

水平メニュー (拡張デスクトップ ナビゲーションとも呼ばれます) には、すべてのメイン ナビゲーション リンクがページ上部に一列に表示されます。

例：

ホーム | ショップ | 会社概要 | お問い合わせ

このレイアウト:

• ナビゲーションをすぐに表示します
• 初めて訪れる人にとって分かりやすさを向上
• 顧客が重要なページを見逃す可能性を減らす
• デスクトップでの使いやすさが向上することが多い

ハンバーガーメニューはスペースを節約できますが、重要なカテゴリーが隠れてしまう可能性があります。訪問者がアイコンをクリックしなければ、メニュー全体が表示されない可能性があります。

ほとんどのデスクトップ ストアでは、水平ナビゲーション レイアウトが推奨されます。

ハンバーガーメニューから横長メニューに変更する方法

デスクトップ ナビゲーションを折りたたんだ状態 (ハンバーガー) から展開した状態 (水平) に切り替えるには、以下の手順に従います。

ステップ1: メニュー構造を設定する

• Shopify管理画面に移動します。
• MFAデバイスに移動する コンテンツ → メニュー.
• 店は開いています メインメニュー (またはヘッダーに割り当てられたメニュー)。

• 必要に応じてメニュー項目を追加、削除、または並べ替えます。
• ドロップダウン構造を作成するには、項目を少し右にドラッグします。
• 詳しくはこちら Save.

ステップ2: メニュータイプを水平に変更する

• に行く オンラインストア→テーマ.
• 詳しくはこちら カスタマイズ アクティブなテーマで。

• Video Cloud Studioで ヘッダ のセクションから無料でダウンロードできます。
• 動画内で メニューの種類 設定。
• 次のいずれかに変更します。

落ちます （シンプルな店舗に推奨）または

メガメニュー (カテゴリが多いストアにおすすめ)

• 詳しくはこちら Save.

ステップ3：GemPagesでShopifyヘッダーを有効にする

GemPages を使用してページを構築する場合は、Shopify テーマ ヘッダーが有効になっていることを確認する必要があります。

テーマ設定でメニュータイプをドロップダウンまたはメガメニューに正しく変更しても、GemPages で Shopify ヘッダーが非表示になっている場合はナビゲーションが表示されません。

これを確認するには:

• ページを開く GemPages エディター.
• クリック 設定 上部のツールバーの (歯車) アイコンをクリックします。

• トグルオン Shopifyテーマのヘッダーとフッターを表示.

• 保存して パブリッシュ ページ。

静的な水平メニューが、Shopify ページと GemPages ページの両方で一貫して表示されるようになります。