Shopifyでの公開
ステップ2: (Shopify) ウェブサイトにメニューを公開します。
I) 方法1: このメニューをウェブサイトの特定の場所に挿入（前または後）するか、既存のメニューをCSSセレクターを使用して置き換えます。 (RECOMMENDED)
I.1. アプリ埋め込みでNavi+をオンにする
ステップ1: オンラインストアをクリックし、次にテーマをクリックします。ヒント: オンラインストアを右クリックして、”新しいタブでリンクを開く”を選択すると、時間を節約できます。
ステップ2: メニューを公開したいテーマを選択します。クリック: カスタマイズ
- ウェブサイトが新しく、まだユーザーがいない場合は、心配せずにメニューを公開できます—訪問者に影響を与えることなく、いつでも簡単にオンまたはオフにできます。
- ウェブサイトにすでに定期的なトラフィックがある場合は、より注意が必要です。最良の方法は、複製テーマを作成し、そのバージョンでNavi+を最初にテストすることです。
ステップ3: アプリ埋め込みに移動し、”すべてのページでNavi+”を見つけてオンにします。
ステップ4: 変更を適用するために”保存”をクリックするのを忘れないでください。
これらの4つのステップの後、Navi+はウェブサイトにインストールされ、表示の準備が整いました。ただし、プロセスはまだ完了していません。Navi+アプリタブに戻って、実際にメニューを公開をオンにします。
I.2. CSSセレクターの理解
CSSセレクターは、ウェブページ上の特定のHTML要素をターゲットにする方法です。Navi+は、メニューを正確にどこに配置するかを知るためにこれを使用します—要素の前または後に挿入するか、既存のものを完全に置き換えるかです。
ウェブサイトに適切なCSSセレクターを見つけるには、次の方法を使用できます:
- デバッグモード — Navi+の組み込みツール: 任意の要素にカーソルを合わせて、そのセレクターを瞬時にコピー
- ブラウザDevTools — ブラウザのインスペクターを使用した手動方法
ブラウザDevToolsを使用してCSSセレクターを見つける方法
Navi+のサポーターとチャットして、自己解決する代わりに即座に助けを得ることができます。ただし、自分でやりたい場合は、以下のスクリーンショットに従ってください。
I.3. 3つの公開オプション
ステップ1: ウェブサイトに公開ボタンをクリックします。
ステップ2: トグル”挿入/置換方法でメニューを公開”をオンにします。
ステップ3: CSSセレクターを入力し、以下の3つの公開オプションのいずれかを選択します。
オプション1: 前に挿入（グリッドメニューに最も一般的）
Navi+メニューを選択した要素の前に即座に挿入します。
例: CSSセレクター main → グリッドメニューがページのメインコンテンツエリアの上に表示されます。
Shopifyテーマ（Dawn、Sense、Savor、Horizon）用の一般的なCSSセレクター:
main— ほとんどのShopifyテーマ#MainContent— Shopify Dawnテーマ
このリストにないですか？Navi+のサポーターとチャットするか、デバッグモードまたはブラウザDevToolsを使用してください。
オプション2: 後に挿入
Navi+メニューを選択した要素の後に即座に挿入します。
例: CSSセレクター header → グリッドメニューがヘッダーのすぐ下に表示されます。
Shopifyテーマ（Dawn、Sense、Savor、Horizon）用の一般的なCSSセレクター:
header— ほとんどのShopifyテーマ.header-wrapper— 一部のテーマ
このリストにないですか？Navi+のサポーターとチャットするか、デバッグモードまたはブラウザDevToolsを使用してください。
オプション3: 置換
ほとんどのShopifyストアには置き換えるための組み込みのグリッドメニュー要素がありません。前に挿入 main が推奨されるアプローチです。
テーマに置き換えたいグリッドスタイルの要素がある場合は、デバッグモードまたはブラウザDevToolsを使用してそのセレクターを見つけてください。
I.4. デバイス特有のターゲティング
CSSセレクターがモバイル、デスクトップ、または両方に適用されるかを制御するには、サフィックスを追加します:
| サフィックス | 適用対象 |
|---|---|
(M) |
モバイルのみ |
(D) |
デスクトップのみ |
| (なし) | モバイルとデスクトップの両方 |
例: main(D) — デスクトップのみ · main(M) — モバイルのみ · main — 両方のプラットフォーム。
II) 方法2: このメニューをShopifyテーマのセクション/ブロックとして追加する
この方法では、Shopifyテーマにブロック/セクションを追加することでメニューを挿入します。これは従来のアプローチなので、詳細には説明しません。この方法では、ステップ1で必要なように“アプリ埋め込みでNavi+をオンにする”さえ必要ありません。
このメニューの埋め込みIDをコピーし、テーマセクションの”セクションにNavi+”という名前のブロックに挿入します。追加後にタイトルを追加し、全幅を設定し、このセクションのマージンを調整できます。
Shopifyテーマにこのメニューをセクション/ブロックとして追加するためのガイド
以下は、ShopifyテーマにNavi+メニューをセクション/ブロックとして挿入するための詳細なガイドです。この方法では、標準的でShopifyがサポートする方法でメニューを追加できますが、Navi+が提供する他の方法ほど柔軟ではありません。
この方法はメガメニューとグリッドメニューに適用されます。タブバー、FAB、またはスライドメニューには適用されません。
