How to Add a Menu Built in a Menu App to Your Shopify Store (Theme Embed, Placement & Troubleshooting)
你在菜单应用中制作了导航结构，但在店铺前台却看不到它。要将菜单应用中的菜单添加到Shopify店铺，核心规则只有一条：应用菜单保存在应用本身，而非你的主题中。只有开启主题应用嵌入（App embed）、在应用内发布菜单并设置好展示位置后，它才会显示出来。
Quick answer: how to add a menu from a menu app to your Shopify store
应用菜单保存在应用中，而非Shopify的“内容 > 菜单”，只有在与主题连接后才会展示。开启应用嵌入并保存，在应用内发布菜单，选择展示位置，隐藏主题默认菜单，并在实际店铺中验证效果。
请遵循以下五个步骤：
- 在Shopify后台打开在线商店 > 模版 > 自定义，进入模版设置 > 应用嵌入，开启对应菜单应用并点击保存。
- 在菜单应用的后台面板中，点击发布以生效你的菜单。
- 选择放置方式：浮动覆盖（floating overlay）、CSS选择器（insert/replace）或应用块（app block）。
- 隐藏或取消分配主题默认的标头菜单，以避免导航重复出现。
- 预览桌面端与移动端布局，并在无痕浏览窗口中检查上线后的前台效果。
如果你尚未构建导航结构，请先阅读我们的菜单制作应用新手操作指南。
Why a menu built in an app doesn’t appear on its own
在Shopify中，原生链接通过内容 > 菜单进行管理，主题会自动通过标头（Header）设置来读取并展示它们。
菜单应用会把你的菜单保存在应用内部。根据Shopify开发者文档，应用安装后应用嵌入块默认处于禁用状态，主题也不会自动引入应用块。单纯安装应用并不能直接将菜单呈现在前台。“内容 > 菜单”中的菜单会保持原样。
Shopify原生编辑器仅支持顶级菜单项包含最多两层嵌套下拉子菜单。为了实现超越原生限制的丰富版式，商家通常会选择在专门的导航菜单应用中直接设计菜单。
Shopify官方视频展示了原生菜单编辑器的操作方法，该工具与第三方菜单应用是完全独立的。
Step 1: Turn on the app embed in the theme editor
第一步是启用主题应用嵌入。根据Shopify的定义，应用嵌入是由应用提供的脚本组件，在主题中以悬浮或覆盖层形式呈现。
启用应用嵌入的操作步骤：
- 在Shopify后台打开在线商店 > 模版。
- 在要编辑的主题上点击自定义。
- 在左侧边栏中打开模版设置 > 应用嵌入。
- 在列表中找到你的菜单应用。
- 点击应用嵌入旁边的开关将其开启。
- 点击右上角的保存。
在修改之前，请先复制主题。Shopify帮助中心指出复制主题能让你在需要时放弃更改并重来，Helium也建议先复制当前正在使用的主题以确保安全。
应用嵌入在复古模版和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)
应用嵌入在主题中以浮动或层叠形式出现。对于移动端底栏Tab Bar、悬浮按钮或抽屉菜单，只需开启嵌入并在应用内发布即可。由于元素直接浮动于页面上方，无需在标头寻找锚点元素。
Insert before, insert after or replace
对于桌面端标头或超级菜单，应用通过CSS选择器挂载到主题元素上。
部分应用（如Navi+）提供三种挂载模式：
- Insert Before: 将菜单直接插入到目标元素上方。
- Insert After: 将菜单直接渲染在目标元素下方。
- Replace: 用应用菜单完全替换掉所选的目标元素。
Navi+支持添加后缀标识，以便选择器分别针对移动端、桌面端或双端精准生效。
App block inside a theme section
第三种方式是在主题分区中添加应用块。应用块需要模版兼容支持，Shopify说明中强调应用块适用于属于JSON模版的分区。在Navi+中，“Menu in Section”应用块仅支持超级菜单和网格菜单，不适用于Tab Bar或悬浮按钮。
| Method | Best for | Watch out for |
|---|---|---|
| Floating overlay (App embed) | 移动端Tab Bar、悬浮按钮、抽屉式菜单 | 须在应用内发布且显示规则相吻合 |
| CSS selector (Insert/Replace) | 桌面端标头、替换主题原生链接的超级菜单 | 主题间代码结构有别；标头Class类名各异 |
| App block (In-section block) | 页面内网格菜单、商品分类专区展示 | 须使用基于JSON模版的兼容Online Store 2.0主题 |
Step 4: Hide the theme’s default menu so you don’t see two
如果主题原生标头链接仍然保留，添加应用菜单可能会导致出现两组重复的导航栏。由于安装应用并不会自动抹去主题代码，你必须隐藏或替换掉原生菜单。
你可以通过两种途径消除重复菜单：
- Use Replace mode: 在支持的场景下，Replace模式会自动替换所选的主题元素。
- Change theme settings: 在模版编辑器中进入Header分区。Shopify说明指出多数主题可通过修改Header分区的设置来变更默认主菜单，因此可以在此取消分配关联菜单。
切勿直接删除“内容 > 菜单”中的链接列表；保留它们可确保页脚导航正常并作为回退备份。
采用Replace替换模式时，在脚本加载初始化期间可能会出现原生菜单的短暂闪烁。在移动端上，如果应用自带抽屉导航，需在主题设置中隐藏原生的汉堡菜单按钮。
Step 5: Preview on desktop and mobile, then check the live store
仅在Shopify模版自定义面板中预览是不够的。Helium等开发商文档指出，菜单在自定义预览器中不一定能完整呈现，因此必须在前台实际测试。
验证导航表现的步骤：
- 在私密无痕窗口中打开店铺实际网址，以便以真实顾客视角查看页面。
- 在桌面端屏幕上测试下拉菜单、超级菜单面板及悬停交互效果。
- 在智能手机真机上测试点击区域、移动端抽屉以及底部Tab Bar的留白间距。
- 点击各级导航链接，确保能正确跳转至对应集合与商品详情页。
如果你配置了独立的桌面端与移动端专属菜单，请确保各视口尺寸仅触发其对应的专用菜单。若在复制的主题上测试无误，确认后即可正式发布该主题。
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.
若应用菜单未能正常展示，请对照以下排查清单：
| Symptom | Likely cause | What to check |
|---|---|---|
| No app menu on store | Embed inactive or unsaved | 在模版设置 > 应用嵌入中开启应用并点击保存。 |
| Embed on, live unchanged | Saved on draft theme | 在模版列表中将嵌入应用保存到上线模版或发布草稿。 |
| Embed saved, menu absent | Not published in app | 在菜单应用管理面板中点击Publish to website。 |
| Missing on mobile or desktop | Viewport rules active | 检查应用内设备投放设置，确认双端视口均已允许展示。 |
| Missing on specific pages | Page or URL rules active | 检查展示规则，确认目标页面或URL没有被排除。 |
| Two menus showing | Selector mismatch | 审查标头源码确认CSS选择器无误，或改用Replace模式。 |
| App block unavailable | Incompatible template | 确认模版属于Online Store 2.0且分区基于.json模版。 |
| Embed or block missing | Created in Canvas | Canvas不支持应用扩展；详见Shopify Canvas对应用嵌入的影响。 |
| Shows in editor, not live | Draft theme or cache | 核对上线模版，复查展示规则，并在无痕窗口中强制刷新。 |
如果菜单依然无法加载，请联系菜单应用的支持团队，针对应用特有的展示问题作进一步定位排查。
When you change or update your theme
当你更换主题或升级版本时，应用菜单不会自动迁移。正如Shopify帮助中心的主题应用指引所述，新发布的主题默认不会激活第三方应用，需要重新手动启用。
更换或升级主题时请按如下顺序操作：
- Re-enable app embed: 在新主题的自定义编辑器中打开应用嵌入，开启菜单应用并点击保存。
- Re-add app blocks: 重新添加分区应用块，因为新主题不会自动包含原有的应用块。
- Audit CSS selectors: 不同主题的标头HTML类名各异；请更新选择器，或参考Navi+在热门Shopify主题中的配置。
- Hide default menu: 在标头设置中取消默认菜单关联，杜绝双菜单并存。
- Test on duplicate theme: 在复制的副本主题上完成所有调整与测试后再正式上线。
Trade-offs: when the theme’s own menu is enough
第三方菜单应用虽然能提供更自由的版式，但并非每家店铺都必不可少。如果你的产品目录相对简单，Shopify自带的内容 > 菜单往往是最高效务实的选择。原生菜单支持多达两层的嵌套下拉，对精简型目录来说可能已经够用。原生菜单还不依赖应用嵌入，主题升级时无需额外配置。
引入第三方菜单应用时，需要综合权衡以下因素：
- Maintenance: 主题更新或变动时需要重新开启应用嵌入并重新审查CSS选择器。
- Initial page load: 采用CSS选择器替换模式时，页面加载初始化瞬间可能会偶发原生菜单的微小闪烁。
- Platform limits: 像Shopify Canvas等新兴设计环境目前暂未支持主题应用扩展组件。
欢迎参考我们的Shopify菜单选型深度指南，评估你的网店究竟需要应用驱动的复杂布局还是原生导航即可。
Example: putting a Navi+ menu live
为了直观理解上述全套流程，我们以Navi+菜单应用的实际上线过程为例。Navi+基于Shopify标准主题应用扩展体系，全面支持移动端底栏Tab Bar、移动端侧滑抽屉菜单、悬浮按钮以及桌面端超级菜单。
针对移动端Tab Bar、Mobile Menu或Floating Button：
- 在Shopify后台打开在线商店 > 模版 > 自定义。
- 在左侧面板打开应用嵌入，开启Store Connector开关并点击保存。
- 在Navi+应用后台中打开菜单并点击Publish to website。
- 按设备类型、页面归属或URL关键词设置展示条件。
针对Desktop Mega Menu（桌面端超级菜单）：
- 在Navi+中选择挂载模式：Insert Before、Insert After或Replace。
- 填入标头容器的CSS选择器，必要时添加移动端或桌面端专用后缀。
- 在具备JSON模版的Online Store 2.0主题中，还可以使用Menu in Section应用块（适用于超级菜单和网格菜单）。
若店铺处于正常营业状态，建议先在副本主题中进行配置验证，确保安全无误。
Navi+为每种菜单形态都提供了配备完整图文界面的发布指南。深入查阅Navi+ Tab Bar底栏发布指引或Navi+ Mega Menu桌面端超级菜单发布指南，从容上线你的店铺导航。
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?
可以，应用嵌入在复古主题与Online Store 2.0主题中均受支持，不过应用块（app block）仅能在带有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
探索更多主题
本指南链接到一系列专题文章——逐一深入了解。