グローバルメニュー設定

Plain Jane および Plain Jane Interactive 向け

あなたが学ぶこと

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

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


⚙️ 設定手順

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

  2. クリック カスタマイズ テーマエディターを開きます。

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

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


🔍 メニューを選択

  • 次を使用してメインナビゲーションを割り当てます メニューを選択 ドロップダウン。

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


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

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

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

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


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

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

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

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

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

  • カート数の色:アイテム数の文字色


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

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

  • 検索バーを表示:表示の切り替え

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

  • 検索背景色

  • 検索テキストカラー


🔹 グローバルメニューバックグラウンドカラー

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


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

レベルごとにナビゲーションリンクのスタイル:

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

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

  • 区切り線の色:リンク間の区切り線の色

  • フォントサイズ:すべてのリンクレベルの文字サイズを調整


👤 ログインリンク

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

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


🔧 その他の設定

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


🚪 使用タイミング

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

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

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

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


ヘルプが必要ですか?

  • 💬 Discord のコミュニティに参加してください: https://discord.gg/hcc2GvgZc6

  • 📧 メールでお問い合わせ: [email protected]

  • 💻 ライブチャット: 月〜金、現地時間(EST)10:00〜18:00 に当社ウェブサイトで直接利用可能

最終更新