Shopifyでカスタムナビゲーションを作成する

Shopifyカスタムナビゲーションについて

明確で直感的な ウェブサイトのナビゲーションメニュー 顧客が必要なものをより早く見つけられるようになり、閲覧エクスペリエンスが向上し、コンバージョンが向上します。

Shopifyでは、ナビゲーションバー（多くの場合、ストアの タイトルバーまたはヘッダー）は、管理画面で作成したメニューから構築されます。複数のメニュー項目を追加し、ストアの構造に合わせて整理することができます。

ヘッダードロップダウンを作成するには、親項目の下に1つ以上のメニュー項目をネストするだけです。テーマがマルチレベルナビゲーションをサポートしている限り、Shopifyはネストされた項目をヘッダーのドロップダウンとして自動的に表示します。

これにより、関連するコレクション、製品、またはページを明確なカテゴリにグループ化して、よりスムーズに閲覧できるようになります。

Shopifyでメニュー項目を作成する

• あなたに行く Shopify管理者 > コンテンツ > メニュー > メインメニュー.

• 名前ボックスにメニュー名を入力します（例：「テストメインメニュー」）
• ヒット メニュー項目を追加する に選出しました。 メニュー項目 ナビゲーション メニューに表示される項目を追加するボックス。

• アイテムのラベルを入力し、ドロップダウンから移動先ページを選択します。 リンク ボックス。

• 横にある「チェックマーク」アイコンをクリックします リンク ボックスをクリックしてアイテムを保存し、他のアイテムの追加を続けます。 
• 終わったら、 Save ボタンをクリックして変更を保存します。

既存のアイテムを編集するには、アイテムの上にマウスを移動してクリックします。 編集 アイテムの横にある をクリックするか、ゴミ箱アイコンをタップして削除します。また、 ⠿ハンドルアイコン をクリックして、各項目の位置を変更します。

ヘッダードロップダウンメニューを作成するには、Shopify管理画面で親メニュー項目の下に1つ以上の項目をネストします。この構造により、Shopifyはヘッダーにドロップダウンメニューを表示します。

テーマがサポートしている場合は、ドロップダウンが自動的に表示されます。

店頭にメニューを表示する

ライブストアにメニューを表示するには、テーマのヘッダーまたはフッターに割り当てます。

• に行く オンラインストア > 部門 >クリック カスタマイズ アクティブなテーマ.

• テーマエディタで、 ヘッダ or フッター のセクションから無料でダウンロードできます。
• メニュー設定を見つけて、ドロップダウンから目的のメニューを選択します。

• 詳しくはこちら Save 右上隅インチ

GemPages を使用してナビゲーション メニューを作成できますか?

GemPagesは現在、エディター内で完全なナビゲーションメニューを直接作成することはできません。テキストとボタン要素は、同じページ内のセクションにのみスクロールでき、ストア内の他のページにリンクすることはできません。

ただし、Shopify ヘッダーが有効になっている限り、GemPages で構築されたどのページにも Shopify ナビゲーション メニュー (ドロップダウンを含む) を表示できます。

GemPages ページにナビゲーション バーを表示するには、次の手順に従います。

• Shopify の GemPages アプリにアクセスし、GemPages エディターでページを開きます。
• 上部バーの右上隅にある [設定] タブをクリックします。

• Shopifyテーマのヘッダーとフッターを表示するオプションをオンにして、 設定を適用.

• ページを保存して公開します。

ナビゲーションのカスタマイズに関するベストプラクティス

• 混乱を避けるために、最上位レベルの項目を 5 ～ 7 個に制限します。
• ドロップダウンを使用して、関連するコンテンツ (製品カテゴリなど) をグループ化します。
• すべてのリンクが機能し、アクティブなページにつながることを再確認してください。
• 「すべての商品を見る」、「会社概要」、「注文を追跡」などのシンプルで明確なラベルを使用します。

Shopifyのカスタムナビゲーションに関するよくある質問

Shopify のタイトルバーにドロップダウンメニューを追加するにはどうすればよいですか?

Shopify 管理画面でネストされたメニュー項目を作成します。テーマが複数レベルのナビゲーションをサポートしている場合、Shopify はネストされた項目を自動的にヘッダーのドロップダウンに変換します。

ナビゲーション内のメニュー項目を並べ替えることはできますか?

はい。Shopify管理画面で、 ⠿ ハンドルを使用して順序を並べ替えます。

ドロップダウン メニューが表示されないのはなぜですか?

テーマがドロップダウンをサポートしているかどうかを確認し、Shopify テーマまたは GemPages 設定でヘッダーが有効になっていることを確認してください。

GemPages を使用してドロップダウン付きのナビゲーション メニューを作成できますか?

直接ではありません。GemPagesは、ヘッダーが有効になっている場合、Shopifyテーマのナビゲーションバーを表示します。まずShopify管理画面でメニューを作成する必要があります。

ヘッダーナビゲーションとフッターナビゲーションの違いは何ですか?

ヘッダーナビゲーションは通常、サイト上部のタイトルバーに表示され、フッターナビゲーションは下部にリンクを表示します。どちらもShopify管理画面で管理できます。

Shopify ヘッダー ドロップダウンが GemPages ページに表示されないのはなぜですか?

GemPagesはヘッダーの表示にShopifyテーマを使用しています。GemPagesエディタでShopifyヘッダーが無効になっている場合、ドロップダウンメニューは表示されません。「Shopifyのヘッダーとフッターを表示」がオンになります。