Shopifyでの公開

ステップ2: (Shopify) ウェブサイトにメニューを公開します。

2.1. アプリ埋め込みでNavi+をオンにする

ステップ1: オンラインストアをクリックし、次にテーマをクリックします。ヒント: オンラインストアを右クリックして「新しいタブでリンクを開く」を選択すると、時間を節約できます。

ステップ2: メニューを公開したいテーマを選択します。  クリック: カスタマイズ

あなたのウェブサイトが新しく、まだユーザーがいない場合は、心配せずにメニューを公開してください—訪問者に影響を与えることなく、いつでも簡単にオンまたはオフにできます。
あなたのウェブサイトにすでに定期的なトラフィックがある場合は、より注意が必要です。最良の方法は、複製テーマを作成し、そのバージョンでNavi+を最初にテストすることです。

ステップ3: アプリ埋め込みに移動し、「すべてのページでNavi+」を見つけてオンにします。

ステップ4: 変更を適用するために「保存」をクリックするのを忘れないでください。

これらの4つのステップの後、Navi+はあなたのウェブサイトにインストールされ、表示の準備が整いました。しかし、プロセスはまだ完了していません。Navi+アプリタブに戻って、実際にメニューを公開をオンにしてください。

2.2. 表示設定を選択し、メニューを公開します。

ステップ1: ウェブサイトに公開ボタンをクリックします。

ステップ2: トグルをオンにします “メニューを公開（ユーザーが開いたときのみ表示）”。

ステップ3: 表示方法を選択します

方法1: 別のNavi+メニュー項目からこのメニューをopen:NaviMenuという構文を使用して開く

この方法では、ユーザーが別のNavi+メニューからメニュー項目をクリックまたはタップしたときにスライドメニューを開くことができます（例えば: タブバー、画面の隅にあるFAB、またはメガメニュー）。この方法の主な目的は:

目的1: スライドメニューでフルサイトマップを表示しながら、アクセスしやすさを維持することで、可視性とユーザー体験を向上させる。

スライドメニューは、その大きなスペースと柔軟なレイアウトのおかげで、フルサイトマップを表示するのに理想的で、製品カタログ全体、主要ページへのリンク、ブログ、サポートツールなどを表示するのに最適です。しかし、スライドメニューはデフォルトではあまり目立たないことがよくあります。発見可能性を向上させるために、別のNavi+メニュー（タブバーなど）を使用して、最も重要で認識しやすいリンクを提示し、スライドメニューをトリガーするハイライトされたメニュー項目を配置できます。これにより、スライドメニューの可視性とユーザーエンゲージメントが向上します。

目的2: 大きく柔軟なメニュー構造で無限のメニュー深度（Navi+のみ）

メニュー項目がクリックされたときに限られたスペースのポップアップを表示する代わりに、3レベルの別のスライドメニューを開くことができます。これは他のメニュー項目や同じスライドメニューに対して繰り返すことができ、Navi+メニューの深度を事実上無限に作成できます。

方法2: UI要素（#id_of_elementや.class_nameなどのCSSセレクタで定義される）がクリックまたはタップされたときに、このメニューが表示されます。

これはスライドメニューで最も一般的に使用される方法です。
このガイドでは、モバイルでのウェブサイトのデフォルトのハンバーガーメニューを置き換えることに焦点を当てます。
他のCSSセレクタを見つけてメニューをトリガーすることで、この方法を創造的に適用することもできます。

ウェブサイトのデフォルトのハンバーガーメニューをNavi+スライドメニューに置き換える方法（人気のガイド）?

ほとんどのShopifyウェブサイトでは、デフォルトのハンバーガーメニューはレスポンシブデザインを介してデスクトップバージョンから生成されます。その結果、通常は非常にシンプルで、深度が浅く、アイコン、画像、または高度なレイアウトのサポートがありません。Navi+スライドメニューに置き換えることは、Navi+の高度な機能を活用するための一般的で実用的な選択です。

これを行うには、ウェブサイトのハンバーガーメニューアイコンのCSSセレクタを特定し、それをテキストボックスに入力します。私たちはすでに、以下にリストされた人気のあるテーマのいくつかのCSSセレクタを見つけました。

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

#Details-menu-drawer-container

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

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

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

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

Navi+サポーターとチャットして即時のヘルプを受けることができますが、（1）これによりコアアイデアを理解するのに役立ち、（2）自分でやりたい場合は、以下の指示に従ってください。

2.3. 重要! スライドメニューの速度を最適化し、ローディング効果を追加し、重複メニューを防ぐ

これはすぐに修正する必要があるものではありませんが、長期的にはNavi+によって作成されたスライドメニュー体験にとって重要です。Navi+が古いスライドメニューを完全に置き換える前に、テーマの元のメニューはまだアクティブです。短い間—約半秒—ユーザーがメニューを読み込み、ハンバーガーボタンを素早くタップした場合（稀なケースですが、可能性はあります）、古いテーマメニューが表示され、視覚的なグリッチを引き起こす可能性があります。

Navi+は、ユーザー体験と速度を最適化するための簡単な解決策を提供します。

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

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

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

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

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

私の解決策は何ですか？

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

スライドメニュー: ローディング効果を追加し、トリガーセレクタをロックします。

非常に簡単です: スライドメニューに使用するCSSセレクタをNavi+アプリの埋め込みセクションに入力するだけです（下の画像を参照）。

注意:

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

更新: インスタント読み込みスケルトンプレビュー

ユーザーがNavi+まだ読み込み中にトリガーをタップするとすぐに、軽量なスケルトンドロワーが即座に表示されます — 目に見えるフィードバックなくタップを残すのではなく、アニメーション付きシマーバーを備えたプレースホルダーパネルです。Navi+の読み込みが完了した瞬間に自動的にフェードアウトし、実際のスライドメニューに引き継がれます。閉じるボタンまたは暗くなった背景をタップするとペンディング中のタップがキャンセルされるため、メニューが突然開くことはありません。

上記の(M)/(D)に使用される同じ括弧内に追加オプションを追加することで、スケルトンの外観をカスタマイズできます。|で区切ります:

.your-hamburger-selector (Device:M,D | Color:#1a1a1a | Direction:left | Width:85%)

Device — M、D、またはその両方(上のレガシーサフィックスと同じ意味)。デフォルト: 両方。
Color — スケルトンの背景用の16進数カラー。例: #1a1a1a。閉じるアイコンとシマーバーは、明色と暗色の両方で読みやすくなるように自動調整されます。デフォルト: #ffffff。
Direction — leftまたはright。スケルトンがスライドインする側。デフォルト: left。
Width — パーセンテージ(例: 85%)または固定ピクセル値(例: 320px)。デフォルト: 85%。

すべてのオプションはオプションであり、任意の順序で組み合わせることができます。スペーシングと大文字小文字は関係ありません — color:#1A1A1AとColor: #1a1a1aは同じように機能します。値が無効または入力間違いの場合、そのオプションは単にスキップされ(デフォルトにフォールバック)、同じセレクター内の他のオプションに影響を与えません。

上記で説明した単純な(M) / (D)構文は、以前とまったく同じように機能し続けます — これはただのオプションのアップグレードであり、置き換えではありません。