グローバルメニュー設定

Plain Jane および Plain Jane Interactive 向け

学べること

  • グローバルメニューにナビゲーションメニューを割り当てる方法

  • アイコン、カート、検索バー、色、タイポグラフィをカスタマイズする方法


⚙️ 設定手順

  1. Shopify 管理画面で、次へ移動します オンラインストア > テーマ.

  2. クリック: テキストの テーマエディタを開きます。

  3. 左側のサイドバーで、 テーマ設定 アイコン(ペイントブラシ)をクリックします。

  4. スクロールして グローバルメニュー設定.


🔍 メニューを選択

  • プライマリナビゲーションを次のメニューで割り当てます: メニューを選択 ドロップダウン。

  • メニューは次で作成または編集できます: Shopify 管理画面 > オンラインストア > ナビゲーション.


🔹 グローバルメニューのアイコン

  • 自動反転アイコンカラー:背景に応じてアイコンカラーを自動で切り替えます

  • アイコンカラー:自動反転がオフのときに固定のアイコン色を設定します

💡 ヒント:明暗の異なる背景でも読みやすさを保つために自動反転を使用してください。


🛒 グローバルメニューのカート

これを有効にするとグローバルメニュー内にミニカートアイコンを表示します:

  • グローバルメニューのカートを表示:表示/非表示を切り替えます

  • カートのテキストカラー:ラベルや合計金額の色

  • カート数の背景色:アイテム数の背後にある背景色

  • カート数の色:アイテム数のテキスト色


🔍 グローバルメニューの検索バー

メニューに検索フィールドを追加:

  • 検索バーを表示:表示/非表示を切り替えます

  • 角を丸くする:入力フィールドにボーダー半径を適用します

  • 検索の背景色

  • 検索のテキスト色


🔹 グローバルメニューの背景色

  • 背景色:メニューパネルの背景を選択します


🔎 グローバルメニューのリンクカラー

レベル別にナビゲーションリンクをスタイル設定:

  • トップレベル、セカンドレベル、サードレベルのリンクカラー

  • 矢印ドロップダウンの色:サブメニューのインジケータ用

  • ライン区切りの色:リンク間の仕切り線用

  • フォントサイズ:全てのリンクレベルのテキストサイズを調整します


👤 ログインリンク

  • ログインリンクを非表示にする:顧客アカウントリンクの表示/非表示を切り替えます

🚨 警告:ログインリンクを機能させるには、Shopify設定で顧客アカウントを有効にする必要があります。


🔧 その他の設定

  • コレクションページでグローバルメニューを非表示にする(デスクトップ):特定のテンプレートからメニューを任意で除外できます


🚪 使用する場面

グローバルメニューは以下に最適です:

  • すべてのページに表示されるコンパクトなナビゲーション

  • モバイルファーストのレイアウト

  • 次を使用するサイト: コンパクトメニュー セクション内のレイアウト


ヘルプが必要ですか?

最終更新