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. 表示設定を選択し、メニューを公開します。
ステップ1: ウェブサイトに公開ボタンをクリックします。

ステップ2: トグルをオンにします “メニューを挿入/置き換え方法で公開”.

ステップ3: 正しいCSSセレクターを選択し、置き換え/挿入方法を選択します
このガイドでは、2つの方法に焦点を当てます: ヘッダーの下にこのメニューを挿入するか、デフォルトのMega Menuを置き換えることです。この方法を使用して、他のCSSセレクターを見つけてメニューをトリガーすることもできます。
ウェブサイトのヘッダーの下にこのメニューを挿入する方法?

これを行うには、ウェブサイトのヘッダーのCSSセレクターを特定し、テキストボックスに入力します。人気のあるテーマのいくつかのCSSセレクターをすでに見つけておきましたので、以下にリストします。
- ShopifyのDawn、Sense、Savor、Horizonなどの人気のある無料テーマのCSSセレクター。
header
- このリストにない場合は、心配しないでください
- Navi+のサポーターとチャットして、CSSセレクターを見つけるための即時サポートを受けることができます—これには数分しかかかりません。
- または、次のトピックで自己支援ガイドに従うことができます(このトピックのすぐ後)。
デフォルトのMega Menuを置き換える方法は?
モバイルでは、置き換えるMega Menuがないため、この方法は通常実行可能ではありません
ウェブサイトでCSSセレクターを見つける方法は?
Navi+のサポーターとチャットして即時サポートを受けることができますが、(1) これにより基本的なアイデアを理解するのに役立ち、(2) 自分でやりたい場合は、以下の手順に従ってください。







II) 方法2: Shopifyテーマにセクション/ブロックとしてこのメニューを追加する
この方法では、Shopifyテーマにブロック/セクションを追加することでメニューを挿入します。これは従来のアプローチであるため、詳細には説明しません。この方法では、方法1のステップ1で必要なように「App EmbedsでNavi+をオンにする」必要すらありません。
このメニューの埋め込みIDをコピーし、テーマセクションの”セクションのNavi+”という名前のブロックに挿入します。追加後にタイトルを追加し、全幅を設定し、このセクションのマージンを調整できます。

Shopifyテーマにセクション/ブロックとしてこのメニューを追加するためのガイド
以下は、ShopifyテーマにNavi+メニューをセクション/ブロックとして挿入するための詳細なガイドです。この方法では、標準のShopifyサポート方式でメニューを追加できますが、Navi+が提供する他の方法ほど柔軟ではありません。
この方法はMega MenusおよびGrid Menusに適用されます。Tabbar、FAB、またはSlide Menusには適用されません。


