How to Add a Menu Built in a Menu App to Your Shopify Store (Theme Embed, Placement & Troubleshooting)

メニューアプリでナビゲーションを作成したものの、ストアフロントに表示されないことがあります。アプリで作成したメニューをShopifyに追加するには、1つの基本原則を理解する必要があります。メニューデータはテーマではなくアプリ内に保存されています。テーマのアプリ埋め込み（App embed）を有効化し、アプリ内で公開設定を行い、配置を指定して初めて表示されます。

Quick answer: how to add a menu from a menu app to your Shopify store

アプリメニューはShopifyの「コンテンツ > メニュー」ではなくアプリ内に保存されるため、テーマと連携して初めて表示されます。アプリ埋め込みをオンにして保存し、アプリ内で公開し、配置を選択し、テーマ標準メニューを非表示にして、実際のストアで確認してください。

次の5つの手順で進めます。

1. Shopify管理画面でオンラインストア > テーマ > カスタマイズを開き、テーマ設定 > アプリ埋め込みで該当アプリをオンにして保存をクリックします。
2. メニューアプリの管理画面で公開をクリックし、メニューを配信します。
3. 配置を選択します（フローティングオーバーレイ、CSSセレクター（insert/replace）、またはアプリブロック）。
4. テーマ標準のヘッダーメニューを非表示または割り当て解除し、ナビゲーションの重複を防ぎます。
5. デスクトップとモバイルの表示を確認し、シークレットウィンドウで実際のストアフロントを検証します。

ナビゲーションをまだ構築していない場合は、メニュービルダーアプリの初心者向けガイドから始めましょう。

Why a menu built in an app doesn’t appear on its own

Shopifyでは、標準リンクをコンテンツ > メニューで管理し、テーマはヘッダー設定を通じてそれらを自動的に表示します。

メニューアプリは、メニューをアプリの中に保持します。Shopify開発者向けドキュメントによると、アプリ埋め込みブロックはインストール直後はデフォルトで無効化されており、テーマ側でアプリブロックが自動追加されることもありません。アプリをインストールしただけでは、ストアフロントにメニューは反映されません。「コンテンツ > メニュー」のメニューはそのまま残ります。

Shopify標準エディタでは、最上位項目ごとに最大2階層のドロップダウンメニューを作成できます。標準機能を超えるレイアウトを実現するため、マーチャントはナビゲーションメニューアプリでメニュー自体を構築します。

Shopifyの公式動画では、メニューアプリとは独立した標準メニューエディタの操作を紹介しています。

Step 1: Turn on the app embed in the theme editor

最初のステップはテーマアプリ埋め込みの有効化です。Shopifyの定義によると、アプリ埋め込みはテーマ内でフロート表示またはオーバーレイ表示されるアプリ提供の要素です。

アプリ埋め込みを有効化する手順：

1. Shopify管理画面でオンラインストア > テーマを開きます。
2. 編集するテーマのカスタマイズをクリックします。
3. サイドバーでテーマ設定 > アプリ埋め込みを開きます。
4. リストから該当のメニューアプリを探します。
5. アプリ埋め込みの横にある切り替えスイッチをオンにします。
6. 保存をクリックします。

編集前にテーマを複製しておきましょう。Shopifyヘルプセンターはテーマの複製により必要に応じて変更を破棄してやり直せると案内しており、Heliumも公開テーマをまず複製することを推奨しています。

アプリ埋め込みはVintageテーマとOnline Store 2.0テーマの双方に対応しています。埋め込みの有効化は編集中のテーマにのみ適用され、下書きテーマは公開されるまで本番ストアに反映されません。

Step 2: Publish the menu inside the app

テーマアプリ埋め込みを保存してもスクリプトが読み込まれるだけです。アプリの管理画面内でメニューを公開する作業が別途必要です。

メニューアプリは埋め込みの有効化と公開設定を明確に分けています。たとえばNavi+のドキュメントでは、Store Connector埋め込みを有効にした後も「処理はまだ完了していません」と明記されており、アプリを開いてPublish to website（または各アプリの公開ボタン）をクリックする必要があります。

公開前に、お使いのアプリが提供するターゲティングルールを確認してください（たとえばNavi+の場合）。

• Device targeting: モバイル、デスクトップ、またはその両方のビューポートで表示。
• Page group rules: すべてのページに表示するか、特定のページグループだけに表示するかを設定。
• URL keyword filtering: アドレスバーの特定キーワードに基づく表示・非表示ルール。

ルールによってページが除外されている場合、アプリ埋め込みがオンであってもメニューは表示されません。

Step 3: Choose where the menu appears (embed, CSS selector or app block)

Concept illustration: inserting an app menu below the header versus replacing the theme menu with a CSS selector.

埋め込みが有効になりメニューが公開されたら、テーマレイアウトとの接続方法を選択します。

Floating menus (tab bar, floating button, drawer)

アプリ埋め込みはテーマ内でフロートまたはオーバーレイ表示されます。モバイル用タブバー、フローティングボタン、スライド式ドロワーの場合、埋め込みをオンにしてアプリで公開するだけで完了します。ページ上に浮動するため、ヘッダー側のアンカー要素は不要です。

Insert before, insert after or replace

デスクトップヘッダーやメガメニューの場合、アプリはテーマ要素を識別するCSSセレクターを用いて接続します。

Navi+などの一部アプリは3つのモードを提供します。

• Insert Before: 選択した要素の直上にメニューを配置します。
• Insert After: 選択した要素の直下にメニューを表示します。
• Replace: 選択した要素全体をアプリメニューで完全に置き換えます。

Navi+では接尾辞（サフィックス）を付与し、モバイル、デスクトップ、または双方を個別に指定できます。

App block inside a theme section

3つ目の方法はテーマセクション内にアプリブロックを追加することです。アプリブロックは互換性のあるテーマが必要で、Shopifyの解説ではJSONテンプレートで構成されるセクションでの利用が前提とされています。Navi+の「Menu in Section」ブロックはメガメニューおよびグリッドメニューにのみ対応し、タブバーやフローティングボタンには使用できません。

Step 4: Hide the theme’s default menu so you don’t see two

アプリメニューを追加すると、テーマ標準のヘッダーリンクが残ったままになり、メニューが2重表示されることがあります。アプリを導入してもテーマコードが自動的に隠れるわけではないため、標準メニューを非表示または置換する必要があります。

重複メニューは次の2つの方法で解消できます。

1. Use Replace mode: 対応している場合、Replaceモードにより選択したテーマ要素が自動的に置き換わります。
2. Change theme settings: テーマエディタでヘッダーを開きます。Shopifyではヘッダーセクションの設定を変更することで標準メインメニューを変更できるため、そこでメニューの割り当てを解除します。

「コンテンツ > メニュー」のリンクリストは決して削除しないでください。保持しておくことでフッターリンクが維持され、レイアウトを戻す際のバックアップになります。

Replaceモード使用時、スクリプトの初期化中に元のメニューが一瞬チラつく（flash）ことがあります。モバイルでは、アプリが独自のドロワーを提供する場合はテーマ標準のハンバーガーボタンを非表示にしてください。

Step 5: Preview on desktop and mobile, then check the live store

Shopifyのテーマカスタマイザー内でのプレビューだけでは不十分です。Heliumなどのアプリ開発会社が指摘しているように、カスタマイザー内ではメニューが正常に読み込まれない場合があるため、本番ストアフロントでの直接確認が必要です。

ナビゲーションを検証する手順：

1. 購入者と同じ視点で確認するため、本番ストアURLをシークレットウィンドウで開きます。
2. デスクトップ画面でドロップダウン、メガメニューパネル、ホバー動作を点検します。
3. スマートフォン実機でタップ領域、モバイルドロワー、画面下部タブバーのクリアランスを確認します。
4. ナビゲーションリンクをクリックし、カテゴリーや商品ページが正しく開くかテストします。

デスクトップ用とモバイル用のメニューを個別に作成した場合は、各画面サイズで専用メニューのみがトリガーされることを確認してください。複製したテーマでテストした場合は、検証後にそのテーマを公開します。

App menu not showing? A diagnostic checklist

Concept illustration: a menu that is not showing (app embed off, wrong theme, two menus) versus one correct app menu live on the store.

アプリメニューが表示されない場合は、以下の診断チェックリストを確認してください。

それでもメニューが読み込まれない場合は、メニューアプリのサポートチームに問い合わせて、アプリ固有の表示トラブルを調査してください。

When you change or update your theme

テーマを切り替えたり新バージョンにアップデートしたりすると、アプリメニューは自動的には移行されません。テーマアプリに関するShopifyヘルプセンターガイドにあるとおり、新テーマではアプリがデフォルトで有効にならないため再有効化が必要です。

テーマ変更またはアップグレード時は次の順序で進めます。

1. Re-enable app embed: 新テーマのエディタでアプリ埋め込みを開き、メニューアプリをオンにして保存をクリックします。
2. Re-add app blocks: 新テーマにはアプリブロックが自動追加されないため、セクションブロックを再度配置します。
3. Audit CSS selectors: ヘッダーのクラス名はテーマごとに異なります。セレクターを更新するか、人気ShopifyテーマのNavi+メニューを確認してください。
4. Hide default menu: メニューの重複表示を防ぐため、ヘッダー設定で標準メニューの割り当てを解除します。
5. Test on duplicate theme: 本番公開する前に、複製したテーマ上で調整内容を検証します。

Trade-offs: when the theme’s own menu is enough

サードパーティのメニューアプリは柔軟なデザイン性を提供しますが、すべてのストアに必須というわけではありません。商品点数が少ない場合、Shopify標準のコンテンツ > メニューが最も実用的な選択肢になります。標準メニューは最大2階層のドロップダウンに対応しており、絞り込んだカタログには十分な場合があります。またアプリ埋め込みに依存しないため、テーマ更新時に再設定の手間も生じません。

サードパーティのメニューアプリを採用する際は、以下の点に配慮してください。

• Maintenance: テーマ変更時に埋め込みの再有効化やCSSセレクターの再検証が必要です。
• Initial page load: CSSセレクターによる置換時、スクリプト初期化中に元のメニューが一瞬チラつく場合があります。
• Platform limits: Shopify Canvasなどの環境では、テーマアプリ拡張機能がまだサポートされていません。

ストアにアプリによる高度なレイアウトが必要か、標準ナビゲーションで十分かを判断するために、適切なメニュータイプの選び方をご覧ください。

Example: putting a Navi+ menu live

実際の手順の例として、Navi+でのメニュー公開プロセスを見てみましょう。Navi+はShopifyの標準テーマアプリ拡張機能を利用して、モバイル用タブバー、スライド式モバイルメニュー、フローティングボタン、デスクトップ用メガメニューに対応しています。

モバイル用のTab Bar、Mobile Menu、またはFloating Buttonの場合：

1. Shopify管理画面でオンラインストア > テーマ > カスタマイズを開きます。
2. サイドバーでアプリ埋め込みを開き、Store Connectorをオンにして保存をクリックします。
3. Navi+で作成したメニューを開き、Publish to websiteをクリックします。
4. デバイス別、ページグループ別、またはURLキーワード別の表示ルールを設定します。

Desktop Mega Menuの場合：

1. Navi+でInsert Before、Insert After、またはReplaceを選択します。
2. ヘッダーのCSSセレクターを入力し、必要に応じてモバイルまたはデスクトップのサフィックスを追加します。
3. JSONテンプレートを備えたOnline Store 2.0テーマでは、アプリブロックのMenu in Section（メガメニューおよびグリッドメニュー用）を利用することも可能です。

アクセスのあるストアでは、安全のためにまず複製したテーマで表示を確認することをお勧めします。

Navi+の各種メニュー公開ガイドでは、スクリーンショット付きで手順を分かりやすく解説しています。Navi+のタブバー公開ガイドやNavi+のメガメニュー公開ガイドをチェックして、安心してレイアウトを公開してください。

Action checklist

アプリメニューをスムーズに本番公開するためのクイックチェックリストです。

• Duplicate your active theme for safe testing.
• In Theme settings > App embeds, toggle your app on and click Save.
• Return to your menu app dashboard and click publish.
• Verify device targeting and page group rules.
• Select placement: floating overlay, CSS selector (insert/replace), or app block.
• Hide or unassign the default menu in Header settings.
• Preview navigation across desktop and mobile screens.
• Test your live storefront in an incognito window.
• Click category and product links to verify destinations.
• Document CSS selectors to re-apply after theme updates.

FAQ

Do I need to enable an app embed?

はい、ほとんどのケースで必要です。Shopifyではアプリインストール直後にアプリ埋め込みブロックがデフォルトで無効化されるため、テーマエディタの「テーマ設定 > アプリ埋め込み」でオンにして保存する必要があります。

Why is my app menu not showing after I created it?

最も多い原因は、現在公開されている本番テーマでアプリ埋め込みが保存されていないか、アプリ管理画面でメニューが公開されていないことです。診断表で表示ルールやセレクター設定を確認してください。

Does a menu app delete my Shopify navigation menu?

いいえ。Shopify管理画面の「コンテンツ > メニュー」にある標準リンクはそのまま保持され、テーマのヘッダーセクションがどのメニューを表示するかを選択する仕組みです。

Will my app menu still work if I change themes?

新しく公開されたテーマではアプリがデフォルトで無効になっているため、新テーマでアプリ埋め込みを再有効化する必要があります。またヘッダー構造が異なる場合はCSSセレクターの更新が必要になることがあります。

Can I use a menu app on a vintage theme?

はい、アプリ埋め込みはVintageテーマとOnline Store 2.0テーマの双方でサポートされています。ただしアプリブロックはJSONテンプレートを備えた互換テーマでのみ利用可能です。

Why can’t I find the app embed in my theme?

テーマがShopify Canvasで作成または複製された場合、アプリ埋め込みやアプリブロックを含むテーマアプリ拡張機能は現時点でサポートされていません。

Sources

• Shopify Help Center: Apps and theme architecture
• Shopify Developer Documentation: Theme app extension configuration
• Shopify Help Center: Menus and links
• Shopify Help Center: Drop-down menus
• Shopify Help Center: Duplicating themes
• Shopify Developer Documentation: App blocks
• Shopify Developer Community: Meet Canvas and theme app extensions
• Shopify Community: Qikify Mega Menu for Prestige theme thread
• Helium Dev Help Center: Installing Meteor on your storefront
• Navi+ Help Center: Tab Bar publishing on Shopify
• Navi+ Help Center: Mega Menu desktop publishing on Shopify
• Navi+ Help Center: Why does Navi+ not display FAQ