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つの方法に焦点を当てます: ヘッダーの下にこのメニューを挿入するか、デフォルトのメガメニューを置き換えることです。この方法を使用して、他のCSSセレクタを見つけて適用し、メニューをトリガーすることもできます。

ウェブサイトのヘッダーの下にこのメニューを挿入する方法?

これを行うには、ウェブサイトのヘッダーのCSSセレクタを特定し、テキストボックスに入力します。人気のあるテーマのいくつかのCSSセレクタをすでに見つけておきましたので、以下にリストします。

ShopifyのDawn、Sense、Savor、Horizonなどの人気のある無料テーマのCSSセレクタ。

header

このリストにない場合でも心配しないでください

- Navi+のサポーターとチャットして、即座に助けを得ることができます—CSSセレクタを見つけるのに数分しかかかりません。

- または、次のトピックで自己解決ガイドに従うことができます（このトピックのすぐ後）。

デフォルトのメガメニューを置き換える方法は？

ShopifyのDawn、Sense、Savor、Horizonなどの人気のある無料テーマのCSSセレクタ。

.header-menu

このリストにない場合でも心配しないでください

- Navi+のサポーターとチャットして、即座に助けを得ることができます—CSSセレクタを見つけるのに数分しかかかりません。

- または、次のトピックで自己解決ガイドに従うことができます（このトピックのすぐ後）。

ウェブサイトでCSSセレクタを見つける方法は？

Navi+のサポーターとチャットして、即座に助けを得ることができます。自分でやる代わりに。ただし、(1) これにより基本的なアイデアを理解するのに役立ち、(2) 自分でやりたい場合は、以下の手順に従ってください。

I.3. 重要! メガメニューの速度とユーザーエクスペリエンスを最適化する（置き換えモード）

1つのメニューを別のメニューに置き換えると、Navi+は古いメニューが表示されるまで待機し、その後すぐに新しいメニューに切り替えます。これはほぼ即座に行われますが、古いメニューが表示される短い瞬間があり、これがユーザーを混乱させる可能性があります。

このステップでは、古いメニューを完全に隠し、代わりにローディング効果を表示できます。これにより、ウェブサイトがより速く感じられ、ユーザーエクスペリエンスが向上します。

Navi+は、ユーザーエクスペリエンスと速度を最適化するための簡単な解決策を以下の手順で提供します

なぜこれを行う必要があるのですか？Navi+はすでに速くないですか？

Navi+は非常に速いです。非常に低いレイテンシ（約100ms）で主要なCDNに完全に展開されており、数百万の顧客に対しても遅くなることはありません。

ただし、Navi+はShopifyエコシステム内で動作しています。Shopifyには独自の読み込みルールがあります:

Shopifyは自社のリソースを最初に読み込むことを優先します。
次にShopifyはテーマコンテンツを読み込みます。
最後にShopifyはアプリコンテンツを読み込みますが、特定の順序ではありません。

これは、複数のアプリを使用している場合、Navi+が予想よりも遅れて読み込まれることがあることを意味します。これが特定のケースで遅く感じられる理由です。

私の解決策は何ですか？

現在、Navi+はShopifyウェブサイトでの読み込み時に高い優先度を持っています。ただし、まだ一定の遅延があります。これらの問題を1つずつここで対処します:

注意:

モバイル専用に適用したい場合は、接尾辞(M)を追加します。
デスクトップ専用に適用したい場合は、接尾辞(D)を追加します。
両方のプラットフォームに適用したい場合は、接尾辞を追加しません。

II) 方法2: このメニューをShopifyテーマのセクション/ブロックとして追加する

この方法では、Shopifyテーマにブロック/セクションを追加することでメニューを挿入します。これは従来のアプローチであるため、詳細には説明しません。この方法では、方法1のステップ1で必要なように「App EmbedsでNavi+をオンにする」必要すらありません。

このメニューの埋め込みIDをコピーし、テーマセクションの”Navi+ on Section”という名前のブロックに挿入します。追加後にタイトルを追加し、全幅を設定し、このセクションのマージンを調整できます。

Shopifyテーマにこのメニューをセクション/ブロックとして追加するためのガイド

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

この方法はメガメニューとグリッドメニューに適用されます。Tabbar、FAB、またはSlide Menusには適用されません。

Navi+ Help Center