公開セクション — メガメニュー & グリッド

適用対象: モバイルメガメニュー, モバイルグリッド, デスクトップメガメニュー

セクションメニューは 浮いていません — ページレイアウトの特定の位置に挿入されます。使用できる展開方法は2つあり、組み合わせて使用できます：

	方法1: 挿入/置換	方法2: アプリブロック
プラットフォーム	Shopify + Global	Shopify のみ
メカニズム	CSS セレクタ → 要素の前/後に挿入/置換	テーマエディタのアプリブロック “Navi+ on Section”
柔軟性	高 — どこにでも埋め込む	中 — Shopify セクションスキーマによって制限される
セットアップ	CSS セレクタを知っている必要があります	埋め込み ID を入力するだけで済みます

方法1: CSS セレクタで挿入/置換

推奨方法 — Shopify と Global の両方で機能します。

Shopify: テーマエディタ → アプリ埋め込み → Navi+ を有効にします。一度だけ。

Global: <head> に貼り付けます：

<script>(window._navi_setting ||= []).push({
  token: "YOUR_NAVI_TOKEN"
});</script>
<script src="https://live.naviplus.app/start.js" async></script>

トグルを有効にして、下の設定セクションを展開します。

1つの CSS セレクタを入力します。メニューは一致した要素に対して相対的に配置されます。

デバイス固有の構文：

人気のある Shopify テーマのための CSS セレクタのヒント：

メニュータイプ	目的	推奨 CSS セレクタ
デスクトップメガ	デスクトップナビゲーションを置換	`nav.header__inline-menu ul.list-menu`
デスクトップメガ	ヘッダーの下に挿入	`header`
モバイルメガ	モバイルヘッダーの下に挿入	`header`

置換を選択した後、Navi+ が読み込まれる間に元の要素を隠すための CSS を追加することを検討してください — 公開の最適化を参照してください。

スクロール中にセクションメニューをページの上部に固定するためのトグル。

使用するタイミング： テーマに組み込みのスティッキーヘッダーがない場合、これを有効にしてデスクトップメガメニューがユーザーが下にスクロールしても表示されるようにします。

はい。Shopify ユーザーは両方を有効にできます：

通常は1つの方法だけが必要です。

挿入/置換を設定した後にメニューが表示されない？

メニューが二重に表示される（重複）？ → アプリブロックと挿入/置換が同時にアクティブです。どちらか一方を無効にしてください。