Add a mega menu to Shopify's Retina theme — Navi+ setup
ライブデモストア上：Slide Menuは既存のハンバーガーメニュー（.mobile-header-controls__menu）にフックして、ネイティブドロワー（nav[class*='mobile']）を非表示にします。ショッパーには見た目の変化はありません。; Mega Menuはヘッダーの下にクリーンに挿入されます。このテーマは水平スクロールの問題がありません（headerInsertSafe = true）。以下のセレクターテーブルとセットアップガイドは、このテーマに固有のものです。
1 テーマ分析
generic 不一致2 ナビゲーション構造・セレクターマップ
セレクターは、ライブデモストアで一意であることが確認されています（matchCount = 1）。ロールが見つかった場合のみ表示されます。
| ロール | CSSセレクター | プラットフォーム | 用途 |
|---|---|---|---|
| Navi+マウントターゲット | |||
| ハンバーガーメニュートリガー | .mobile-header-controls__menu |
モバイル | Navi+がここにバインドしてSlide Menuをアクティベートします |
| ヘッダー | .shopify-section-group-header-group |
モバイル + デスクトップ | Retinaのヘッダーの下にMega Menuを挿入します |
| メインメニュー | header nav |
デスクトップ | Navi+ Mega Menuがデスクトップナビゲーションコンテンツを置き換えます |
| ロゴ | .site-header__wrapper--logo-center |
モバイル + デスクトップ | フォールバック。ハンバーガーメニューがない場合、ロゴの前にトリガーアイコンを挿入します |
| パネルトリガー | |||
| ハンバーガーメニュートリガー | .mobile-header-controls__menu |
モバイル | タップしてネイティブモバイルドロワーを開く |
| 検索アイコン | button[aria-label*='search' i] |
モバイル + デスクトップ | タップして検索パネル/オーバーレイを開く |
| カートアイコン | a[href$='/cart'] |
モバイル + デスクトップ | タップしてカートドロワー/パネルを開く |
Retina Shopifyテーマにnavi+タブバーを追加
タブバーは、画面下部にナビゲーションストリップを固定します。モバイルでは、親指が休む場所に配置されます。Retinaのショッパーは、任意のページからメニュー、検索、カートにアクセスでき、ヘッダーまでスクロールして戻る必要がありません。
- アプリ風ナビゲーション・モバイルウェブのネイティブな操作感
- ワンタップでカートアクセス可能。モバイルチェックアウト率を向上させる
- Retinaヘッダーの下に配置。テーマ自体のナビゲーションと競合しない
各タブのリンクフィールドは、通常のURL、open:NaviMenu(EMBED_ID)で別のNavi+メニューを開く、またはRetina自体のパネルを起動する組み込みアクションを受け入れます。Navi+はテーマのドロワー、検索、カートを保持し、タブはそれらを開くだけです。
.mobile-header-controls__menubutton[aria-label*='search' i]a[href$='/cart']- Navi+で新しいメニューを作成して、タブバーを選択します。
- タブを追加します。名前、アイコン、カートカウントバッジを設定し、各タブにリンクをつけます（例：ホーム、ショップ、検索、カート、メニュー）。
- Retinaのネイティブドロワーまたは検索・カート機能を開くには、タブリンクを対応するオープンアクションに設定してください。代わりにNavi+ SlideまたはMega menuを開く場合は、
open:NaviMenu(EMBED_ID)を使用してください。 - Publishを開き、スティッキーモードを有効にして、デバイスフィルターをMobileに設定してください。
RetinaモバイルドロワーをNavi+スライドメニューで置換
スライドメニューは、Retinaのデフォルトモバイルドロワーを、より充実したマルチレベルパネルで置き換えます。アイコン、画像、カスタムグループ化が可能で、ショッパーが既に使用しているハンバーガーボタンで開きます。
- アイコンと画像を使用した無制限のマルチレベルナビゲーション
- 同じボタン、同じ位置。ショッパーは変更に気付きません
- 多くのコレクションを持つカタログをモバイルで整理するのに最適
ハンバーガートリガー.mobile-header-controls__menuはライブRetinaデモで一意であることが確認されたため、Navi+はショッパーが既にタップしているボタンからスライドメニューを開きます。
- Navi+で新しいメニューを作成して、スライドメニューを選択します。
- カテゴリをアイコン、色、画像、必要なレベル数で追加します。
- Publishを開き、メニューを有効にして、トリガーを
.mobile-header-controls__menu（Retinaのハンバーガーセレクター）に設定してください。 - 保存してください。スライドメニューがそのボタンから開きます。
(M)を追加してモバイルのみに保つことができます。
RetinaテーマにNavi+グリッドメニューを追加
グリッドメニューは、コレクションを画像のグリッドとして表示します。アプリ風のランチャーで、ショッパーが任意のコレクションに1タップでジャンプできます。
- ビジュアル重視・画像優先。ショッパーはコレクション名を読む前に画像を見ます
- Retinaセレクターは不要
- 多くのコレクションを素早く閲覧できるストアに最適
グリッドメニューは、Retinaの任意のページに固定された場所に挿入できます（CSSセレクターを指定）。または、FABまたはタブバーのタブからオンデマンドで開くことができます。
- Navi+で新しいメニューを作成して、グリッドメニューを選択します。
- コレクションを追加します：サムネイル画像、表示名、リンク、グリッドに表示したい順序で配置します。
- Publishで「Insert/Replace method」を有効にし、ターゲットCSSセレクターを入力して、「Insert After」または「Replace」を選択してください。
- ポップアップを好みますか？セレクターをスキップして、
open:NaviMenu(EMBED_ID)でFABまたはタブから開きます。
RetinaテーマにNavi+フローティングボタン（FAB）を追加
FAB（フローティングアクションボタン）は、スクロール中も表示されるフローティングボタンです。任意のページやアクションへの高速ショートカット。テーマセレクターは不要で、数分でデプロイできます。
- Retinaのどの部分とも競合しない
- 柔軟性が高い。カート、お問い合わせページ、プロモーション、任意のURLにリンク可能
- デスクトップとモバイルの両方で動作
FABは完全に独立してマウントされます。RetinaテーマからのCSSセレクターは不要です。セットアップして公開するだけで、セレクターをテストする必要はありません。
- Navi+で新しいメニューを作成して、FABを選択します。
- アイコン、背景色、サイズを選択します。組み込みアイコンを使用するか、独自のアイコンをアップロードします。
- 位置を選択：右下（最も一般的）、左下、またはその他の固定コーナー。
- アクション設定：コレクション、カート、お問い合わせ、プロモーションページにリンクするか、
open:NaviMenu(EMBED_ID)で別のメニュー（グリッド、スライドなど）を開きます。 - Publishを開き、スティッキーモードを有効にしてください。FABはすべてのデバイスで動作します。
RetinaテーマにNavi+モバイルメガメニューを追加
モバイルではメガメニューはマルチレベルパネルとして表示されます。ショッパーが清潔な階層、画像、バナー付きの電話でカタログ全体を閲覧できます。
- 小さな画面でのマルチレベルメニュー・アイコンと画像付き
- ヘッダーの下、またはタブバータブから開く
- ストアが多くのカテゴリをモバイルでサーフェスしたい場合に最適
モバイルメガメニューはセクションメニューです。Retinaヘッダーの直下に挿入するか、タブバータブから開きます。どちらもテーマ自体のメニューにバインドする必要なく動作します。
- Navi+で新しいメニューを作成し、メガメニューを選択して、マルチレベルカラム（カテゴリ、注目画像、バナー）をデザインします。
- Publishで「Insert/Replace method」を有効にし、
header(M)を入力して「Insert After」を選択します。モバイルヘッダーの下にドロップします。 - タブから開くことを好みますか？ここで公開せず、タブバー「メニュー」タブを
open:NaviMenu(EMBED_ID)でポイントします。 - デバイスフィルターをモバイルに設定したままにします。
Retinaヘッダーの下にNavi+メガメニューを挿入
ヘッダーの下にメガメニューを挿入。Retinaヘッダーのすぐ下に表示されるマルチカラムドロップダウンバー。テーマのLiquidに変更は不要です。
- 画像と注目リンク付きのマルチカラムドロップダウン
- テーマ自体のメニューは変更されない。両方のメニューが共存できます
- テーマが挿入をサポートしている場合、最も優れたマウント方法
RetinaはheaderInsertSafe = trueです。メガメニューはヘッダーの下に挿入でき、水平オーバーフローはなく、ネイティブメニューはそのままです。
- Navi+で新しいメニューを作成し、メガメニューを選択して、ドロップダウンカラム（カテゴリ、注目画像、商品、バナー）をデザインします。
- Publishで「Insert/Replace method」を有効にしてください。
- セレクター
.shopify-section-group-header-group(D)を入力して、後に挿入を選択します。メガバーはRetinaヘッダーのすぐ下に表示されます。 - デバイス接尾辞
(D)はデスクトップのみに保ちます。
RetinaデスクトップメニューをNavi+メガメニューで置換
置換モードはネイティブメニューをヘッダー内全体と交換します。Navi+は直接そのコンテナーにレンダリングされ、Retinaヘッダーレイアウトは変わりません。
- メニューの位置をヘッダーに保持。余分なバーは追加されない
- ナビゲーションの2行が必要ない場合に最適
headerInsertSafeがなくても、どのテーマでも動作
メインメニューセレクターheader navが確認されました。Navi+はRetinaヘッダーのネイティブメニューが配置されている場所にメガメニューをレンダリングします。
- Navi+で新しいメニューを作成し、メガメニューを選択して、ドロップダウンカラムをデザインします。
- Publishで「Insert/Replace method」を有効にしてください。
- デスクトップナビセレクター
header nav(D)を入力して、置換を選択します。Navi+はRetinaネイティブメニューの代わりにレンダリングされます。 - 置換を選択した後、フラッシュなしロード用に最適化します。公開ガイドを参照してください。
Retinaロゴの前にトリガーアイコンを挿入
ロゴの前にトリガーアイコンを追加。Retinaロゴの横のカスタムハンバーガー。デフォルトのモバイルハンバーガーがないテーマ、またはスライド/メガメニューへの2番目のエントリーポイントとして機能します。
- Liquidを編集せずに新しいトリガーポイントを作成
- 自然な配置。ロゴのすぐ隣。ショッパーに馴染み深い
- モバイルハンバーガーがないデスクトップ優先テーマに最適
ロゴセレクター.site-header__wrapper--logo-centerがRetinaで確認されたため、Navi+はその直前にトリガーアイコンを挿入できます。
- 高度なパターン。モバイルハンバーガーがないテーマ、または2番目のエントリーポイントを追加する場合に使用します。
- 小さなシングルアイテムメニュー（1アイテムメガ/スライド）を構築します。そのアイテムが
open:NaviMenu(EMBED_ID)でメインスライドメニューを開きます。 - Publishで「Insert/Replace method」を有効にし、
.site-header__wrapper--logo-center(M)を入力して「Insert Before」を選択します。アイコンがRetinaロゴの前に表示されます。 - 小さなカスタムCSSがアイテムを調整します。サポートまでお気軽にお問い合わせください。
11 RetinaにNavi+メニューを追加する方法
このページのすべてのメニュータイプは、同じ3つのステップに従います。アプリを1回有効にするだけで、その後のメニューはデザインと公開だけです。Liquid編集は必要ありません。
- Navi+を1回有効にします。 Shopify管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」→「App embeds」に進み、Navi+をオンにしてください。これでアプリがRetinaストアフロントに読み込まれ、作成したすべてのメニューがカバーされます。インストールガイド →
- Navi+エディターでメニューをデザインします。アイテム、アイコン、画像、列、色を設定します。
- 公開します。 メニューの公開パネルを開きます。フローティングメニュー（タブバー、FAB）は公開トグルだけで済みます。スライドメニューとセクションメニューは、上の表のCSSセレクターを指定します。
任意のセレクター(M)または(D)を追加して、モバイルのみまたはデスクトップのみをターゲットにします（例：header(D)）。セレクターが不確実ですか？yourstore.com/#navidebug-onを開いて、要素にマウスオーバーしてCtrl/Cmd + Cを押してコピーします。
ライブインタラクションテスト
PlaywrightがライブRetinaデモストアを自動的にクリックして、結果をキャプチャします。
よくある質問 - Navi+ on Retina Shopifyテーマ
Retina Shopifyテーマにどのようにしてnavi+メニューを追加しますか？
Retina Shopifyテーマにタブバーを追加するにはどうすればよいですか？
a[href$='/cart']）。Retina Shopifyテーマにメガメニューを追加するにはどうすればよいですか？
.shopify-section-group-header-group(D)を使用して「Insert After」でヘッダーの下に挿入します。テーマコード編集は不要です。Retinaモバイルメニューをスライドアウトメニューで置き換えるにはどうすればよいですか？
.mobile-header-controls__menuに設定します。スライドメニューはショッパーが既にタップしているボタンから開き、ネイティブドロワーを置き換えます。Retinaテーマコードを編集してメニューを追加する必要がありますか？
Navi+はRetina Shopifyテーマで動作しますか？
genericファミリーの他のテーマ
他のShopifyテーマにNavi+メニューを追加
セレクターリファレンス
パネルコンテナと補助セレクター。状態検出またはネイティブ要素の非表示に使用されます。
| ロール | CSSセレクター | プラットフォーム | 用途 |
|---|---|---|---|
| スライドドロワー | nav[class*='mobile'] |
モバイル | ネイティブドロワー。Navi+ Slide Menuがアクティブな場合は非表示になります |
| 検索モーダル | — | モバイル + デスクトップ | 検索パネルコンテナ。開く/閉じる状態を検出します |
| カートドロワー | [class*='cart-drawer'] |
モバイル + デスクトップ | カートドロワーコンテナ。開く/閉じる状態を検出します |
| メガメニュー | — | デスクトップ | ネイティブメガメニューなし。Navi+が代わりに挿入します |