Shopifyでの公開
ステップ2: (Shopify) ウェブサイトにメニューを公開します。
I) 方法1: このメニューをウェブサイトの特定の場所に挿入（前または後）するか、既存のメニューをCSSセレクタを使用して置き換えます。 (RECOMMENDED)
I.1. App EmbedsでNavi+をオンにする
ステップ1: オンラインストアをクリックし、次にテーマをクリックします。ヒント: オンラインストアを右クリックして「新しいタブでリンクを開く」を選択すると、時間を節約できます。
ステップ2: メニューを公開したいテーマを選択します。 クリック: カスタマイズ
- あなたのウェブサイトが新しく、まだユーザーがいない場合は、心配せずにメニューを公開してください—訪問者に影響を与えることなく、いつでも簡単にオンまたはオフにできます。
- あなたのウェブサイトにすでに定期的なトラフィックがある場合は、より注意が必要です。最良の方法は、複製テーマを作成し、そのバージョンでNavi+を最初にテストすることです。
ステップ3: App embedsに移動し、「すべてのページでNavi+」を見つけてオンにします。
ステップ4: 変更を適用するために「保存」をクリックするのを忘れないでください。
これらの4つのステップの後、Navi+はあなたのウェブサイトにインストールされ、表示の準備が整いました。しかし、プロセスはまだ完了していません。Navi+アプリタブに戻って、実際にメニューを公開をオンにしてください。
I.2. CSSセレクタの理解
CSSセレクタは、ウェブページ上の特定のHTML要素をターゲットにする方法です。Navi+は、メニューを正確にどこに配置するかを知るためにこれを使用します—要素の前または後に挿入するか、既存のものを完全に置き換えるかです。
あなたのウェブサイトに適したCSSセレクタを見つけるには、次の方法を使用できます:
- デバッグモード — Navi+の組み込みツール: 任意の要素にカーソルを合わせて、そのセレクタを瞬時にコピー
- ブラウザDevTools — ブラウザのインスペクタを使用した手動方法
ブラウザDevToolsを使用してCSSセレクタを見つける方法
Navi+のサポーターとチャットして、自己解決する代わりに即座に助けを得ることができます。しかし、自分でやりたい場合は、以下のスクリーンショットに従ってください。
I.3. 三つの公開オプション
ステップ1: ウェブサイトに公開ボタンをクリックします。
ステップ2: トグルをオンにします “Insert/Replace methodでメニューを公開”。
ステップ3: CSSセレクタを入力し、以下の三つの公開オプションのいずれかを選択します。
オプション1: 前に挿入
Navi+メニューを選択した要素の前に即座に挿入します。
例: CSSセレクタ main → メニューはページのメインコンテンツエリアの上に表示されます。
Shopifyテーマ（Dawn、Sense、Savor、Horizon）用の一般的なCSSセレクタ:
main— ほとんどのShopifyテーマ#MainContent— Shopify Dawnテーマ
このリストにないですか？Navi+のサポーターとチャットするか、デバッグモードまたはブラウザDevToolsを使用してください。
オプション2: 後に挿入（デスクトップのMega Menuに最も一般的）
Navi+メニューを選択した要素の後に即座に挿入します。
例: CSSセレクタ header → メニューはヘッダーのすぐ下に表示されます。
Shopifyテーマ（Dawn、Sense、Savor、Horizon）用の一般的なCSSセレクタ:
header— ほとんどのShopifyテーマ.header-wrapper— 一部のテーマ.announcement-bar— メニューをアナウンスバーのすぐ下に配置します
このリストにないですか？Navi+のサポーターとチャットするか、デバッグモードまたはブラウザDevToolsを使用してください。
オプション3: 置き換え
選択した要素をNavi+メニューで完全に置き換えます。元の要素は隠され、Navi+がその場所を取ります。
例: CSSセレクタ .header-menu → テーマのデフォルトナビゲーションがあなたのNavi+ Mega Menuに置き換えられます。
Shopifyテーマ（Dawn、Sense、Savor、Horizon）用の一般的なCSSセレクタ:
.header-menu— Shopify Dawnテーマ.header__menu— 一部のテーマ
注意: Navi+が読み込まれる間、元のメニューが一瞬表示されることがあります。これを防ぐためにI.5を参照してください。
このリストにないですか？Navi+のサポーターとチャットするか、デバッグモードまたはブラウザDevToolsを使用してください。
I.4. デバイス特有のターゲティング
CSSセレクタがモバイル、デスクトップ、または両方に適用されるかを制御するには、サフィックスを追加します:
| サフィックス | 適用対象 |
|---|---|
(M) |
モバイルのみ |
(D) |
デスクトップのみ |
| (なし) | モバイルとデスクトップの両方 |
例: header(D) — デスクトップのみ · header(M) — モバイルのみ · header — 両方のプラットフォーム。
I.5. 重要! Mega Menuの速度とユーザー体験を最適化する（置き換えモード）
一つのメニューを別のメニューに置き換えると、Navi+は古いメニューが表示されるまで待機し、その後すぐに新しいメニューと交換します。これはほぼ即座に行われますが、古いメニューが表示される一瞬の間があり、ユーザーを混乱させる可能性があります。
このステップでは、古いメニューを完全に隠し、代わりにローディング効果を表示できます。これにより、ウェブサイトがより速く感じられ、ユーザー体験が向上します。
Navi+はユーザー体験と速度を最適化するための簡単な解決策を以下のステップで提供します
なぜこれをする必要がありますか？Navi+はすでに速くないですか？
Navi+は非常に速いです。非常に低いレイテンシ（約100ms）で主要なCDNに完全に展開されており、数百万の顧客に対しても遅くなりません。
しかし、Navi+はShopifyエコシステム内で動作しています。Shopifyには独自の読み込みルールがあります:
- Shopifyは自社のリソースの読み込みを最優先します。
- 次にShopifyはテーマコンテンツを読み込みます。
- 最後にShopifyはアプリコンテンツを読み込みますが、特定の順序ではありません。
これは、複数のアプリを使用している場合、Navi+が予想よりも遅れて読み込まれることがあることを意味します。だからこそ、特定のケースでは遅く感じることがあります。
私の解決策は何ですか？
現在、Navi+はShopifyウェブサイトでの読み込み時に高い優先度を持っています。しかし、まだ一定の遅延があります。ここでこれらの問題を一つずつ解決していきます:
注意:
- モバイルのみに適用したい場合は、サフィックス(M)を追加してください。
- デスクトップのみに適用したい場合は、サフィックス(D)を追加してください。
- 両方のプラットフォームに適用したい場合は、サフィックスを残さないでください。
II) 方法2: このメニューをShopifyテーマのセクション/ブロックとして追加する
この方法では、Shopifyテーマにブロック/セクションを追加することでメニューを挿入します。これは従来のアプローチなので、詳細には説明しません。この方法では、方法1のステップ1で必要なように「App EmbedsでNavi+をオンにする」必要すらありません。
このメニューの埋め込みIDをコピーし、テーマセクションの”Navi+ on Section”という名前のブロックに挿入します。追加後にタイトルを追加し、全幅を設定し、このセクションのマージンを調整できます。
Shopifyテーマにこのメニューをセクション/ブロックとして追加するためのガイド
以下は、ShopifyテーマにNavi+メニューをセクション/ブロックとして挿入するための詳細なガイドです。この方法では、標準のShopifyサポート方式でメニューを追加できますが、Navi+が提供する他の方法ほど柔軟ではありません。
この方法はMega MenusおよびGrid Menusに適用されます。Tabbar、FAB、またはSlide Menusには適用されません。
