公開スティッキー — Tabbar & FAB
適用対象: Tabbar, モバイルヘッダー, FAB / サポートバー
スティッキーメニューは浮遊しており — 常に画面に表示され、固定されたDOM位置に付随しません。埋め込み方法は最も簡単で、単一のスクリプトでサイト全体を有効にします。
Shopify — 3ステップ
ステップ1: テーマエディタでアプリ埋め込みを有効にする
テーマエディタ → アプリ埋め込みに移動し、Navi+トグルを有効にします。
- これはテーマレイアウトを変更しませんで、ストアに影響を与えることなくいつでもオフにできます。
- ストアごとに1回だけ行う必要があります — 以降のメニューではこのステップをスキップします。
ステップ2: “このメニューをスティッキーモードで公開する”を有効にする
公開モーダルのステップ2カードにあるトグル。有効 = メニューがライブ、無効 = ウェブサイトから非表示。
ステップ3（オプション）: デバイスとページの可視性を設定する
詳細については公開フィルターを参照してください。
グローバル（WordPress、Wix、Webflow…） — 3ステップ
ステップ1: <head> に埋め込みコードを貼り付ける
コードはコピーボタン付きのモーダルに表示されます。あなたのウェブサイトの<head>に貼り付けます：
<script>(window._navi_setting ||= []).push({
token: "YOUR_NAVI_TOKEN"
});</script>
<script src="https://live.naviplus.app/start.js" async></script>
tokenはあなたのストアを識別します — 各ストアにはユニークなトークンがあります。start.jsは非同期で読み込まれ、ページのレンダリングをブロックしません。
ステップ2: “このメニューをスティッキーモードで公開する”を有効にする
Shopifyと同様 — トグルを有効にします。
ステップ3（オプション）: デバイスとページの可視性を設定する
詳細については公開フィルターを参照してください。
メニュータイプ別の注意事項
| メニュー | 制限 |
|---|---|
| モバイルヘッダー | デスクトップトグル無効 — モバイルのみ |
| FAB / サポートバー | 位置セレクタなし（FABは設定タブで独自の位置決めを持っています） |
| Tabbar | フルモバイル + デスクトップオプションが利用可能 |
トラブルシューティング
トグルを有効にした後、メニューが表示されない？
- アプリ埋め込みが有効になっているか確認してください（Shopify）または埋め込みコードが正しく貼り付けられているか確認してください（グローバル）。
- デバイス設定を確認してください — モバイルでメニューを表示またはデスクトップでメニューを表示がオンである必要があります。
- URLフィルターを確認してください — 現在のページをフィルタリングしている可能性があります。
- ブラウザをハードリフレッシュ（Ctrl+Shift+R）してキャッシュをクリアします。