Add a mega menu to Shopify's Loft theme — Navi+ setup
在实时演示商店中：Slide Menu 与现有的汉堡菜单（.js-drawer-open-left）集成，隐藏原生抽屉（#NavDrawer）— 顾客看不到任何变化; Mega Menu 在标题下方干净地插入 — 此主题没有横向溢出问题（headerInsertSafe = true）。下面的选择器表和设置指南专用于此主题。
1 主题分析
archetype 不匹配2 导航结构—选择器映射
选择器在实时演示商店上确认唯一（matchCount = 1）。仅当找到时才显示角色。
| 角色 | CSS选择器 | 平台 | 用于 |
|---|---|---|---|
| Navi+ 挂载目标 | |||
| 汉堡菜单触发器 | .js-drawer-open-left |
移动版 | Navi+ 在此绑定以激活 Slide Menu |
| 页眉 | .header__section-wrapper |
移动版和桌面版 | 在 Loft 的标题下方插入 Mega Menu |
| 主菜单 | ul.site-nav |
桌面版 | Navi+ Mega Menu 替换桌面导航内容 |
| 徽标 | .header__logo |
移动版和桌面版 | 备选方案 — 没有汉堡菜单时在徽标前插入触发图标 |
| 面板触发器 | |||
| 汉堡菜单触发器 | .js-drawer-open-left |
移动版 | 点击打开原生移动版抽屉 |
| 搜索图标 | a[href*='/search'] |
移动版和桌面版 | 点击打开搜索面板/覆盖层 |
| 购物车图标 | .cart-wrapper |
移动版和桌面版 | 点击打开购物车抽屉/面板 |
向Loft Shopify主题添加Navi+选项卡栏
选项卡栏将固定导航条固定在移动设备屏幕底部—正好在拇指所在的位置。Loft购物者可以从任何页面访问您的菜单、搜索和购物车，无需滚动回页眉。
- 应用风格导航—网页的原生感受
- 一键购物车访问权限以提升移动结账率
- 位于Loft页眉下方—永远不会与主题自己的导航竞争
每个选项卡的链接字段接受普通URL、open:NaviMenu(EMBED_ID)以打开另一个Navi+菜单，或触发Loft自己面板的内置打开操作。Navi+保留主题的抽屉、搜索和购物车—选项卡只是打开它们。
.js-drawer-open-lefta[href*='/search'].cart-wrapper- 在Navi+中创建新菜单并选择选项卡栏。
- 添加您的选项卡—名称、图标、购物车计数徽章和每个选项卡的链接（例如主页、商店、搜索、购物车、菜单）。
- 要打开 Loft 的原生抽屉、搜索或购物车，请将标签页链接设置为匹配的打开操作。要改为打开 Navi+ Slide 或 Mega 菜单，请使用
open:NaviMenu(EMBED_ID)。 - 打开 Publish，启用粘性模式，并将设备过滤器设置为 Mobile。
用Navi+滑动菜单替换Loft移动抽屉
滑动菜单用更丰富的多级面板—图标、图像和自定义分组—替换Loft的默认移动抽屉，由您的购物者已使用的相同汉堡菜单打开。
- 带有图标和图像的无限多级导航
- 相同的按钮、相同的位置—购物者永远不会注意到交换
- 非常适合具有许多集合的目录在移动设备上组织
汉堡菜单触发器.js-drawer-open-left在实时Loft演示中已确认唯一，因此Navi+从购物者已在点击的确切按钮打开滑动菜单。
- 在Navi+中创建新菜单并选择滑动菜单。
- 添加您的类别，带有图标、颜色、图像和您需要的任意多个级别。
- 打开 Publish，启用菜单，然后将触发器设置为
.js-drawer-open-left—— Loft 的汉堡菜单选择器。 - 保存。滑动菜单现在从该按钮打开。附加
(M)以保持仅移动设备。
向Loft主题添加Navi+网格菜单
网格菜单将您的集合显示为图像网格—一个应用风格启动器，让购物者一键直接跳到任何集合。
- 视觉的、以图像为先—购物者在阅读名称之前看到集合
- 不需要Loft选择器来装载
- 非常适合具有许多集合供快速浏览的商店
网格菜单可以插入任何Loft页面的固定位置（指向CSS选择器），或从FAB或选项卡栏选项卡按需打开—您选择。
- 在Navi+中创建新菜单并选择网格菜单。
- 添加集合：缩略图、显示名称和链接，按您想要的网格顺序排列。
- 在 Publish 中启用 Insert/Replace 方法，输入目标 CSS 选择器，然后选择 Insert After 或 Replace。
- 更喜欢弹窗？跳过选择器并使用
open:NaviMenu(EMBED_ID)从FAB或选项卡打开它。
向Loft主题添加Navi+浮动按钮（FAB）
FAB（浮动操作按钮）是一个在滚动时保持可见的浮动按钮—到任何页面或操作的快速快捷方式。无主题选择器，在几分钟内部署。
- 永远不会与Loft的任何部分冲突
- 灵活：链接到购物车、联系页面、促销、任何URL
- 在桌面和移动设备上都适用
FAB完全独立装载—不需要来自Loft主题的CSS选择器。设置并发布而无需测试任何选择器。
- 在Navi+中创建新菜单并选择FAB。
- 选择图标、背景颜色和大小—使用内置图标或上传您自己的。
- 选择位置：右下角（最常见）、左下角或任何固定角落。
- 设置操作：链接到集合、购物车、联系或促销页面，或使用
open:NaviMenu(EMBED_ID)打开另一个菜单（网格、滑动等）。 - 打开 Publish 并启用粘性模式。FAB 在所有设备上都可用。
向Loft主题添加Navi+移动超级菜单
在移动设备上，超级菜单显示为多级面板—让购物者在手机上浏览您的整个目录，具有清晰的层次结构、图像和横幅。
- 小屏幕上带有图标和图像的多级菜单
- 在页眉下或从选项卡栏选项卡打开它
- 非常适合商店在移动设备上有许多类别要显示的情况
移动超级菜单是一个部分菜单。直接插入到Loft页眉下方，或从选项卡栏选项卡打开它—两者都可以不绑定到主题自己的菜单。
- 在Navi+中创建新菜单，选择超级菜单，并设计多级列（类别、精选图像、横幅）。
- 在 Publish 中启用 Insert/Replace 方法，输入
header(M)并选择 Insert After —— 菜单出现在移动端标题下方。 - 更喜欢从选项卡打开它？将其保留为未发布，并使用
open:NaviMenu(EMBED_ID)将选项卡栏"菜单"选项卡指向它。 - 保持设备筛选器打开移动设备。
在Loft页眉下方插入Navi+超级菜单
在页眉下方插入超级菜单—一个多列下拉菜单栏，在悬停时出现在Loft页眉正下方，零变更到主题的Liquid。
- 带有图像和精选链接的多列下拉菜单
- 保留主题自己的菜单—两个菜单共存
- 当主题支持插入时的最干净的装载方式
Loft是headerInsertSafe = true—超级菜单在页眉下方插入，无水平溢出，原生菜单保持不变。
- 在Navi+中创建新菜单，选择超级菜单，并设计下拉列（类别、精选图像、产品、横幅）。
- 在 Publish 中启用 Insert/Replace 方法。
- 输入选择器
.header__section-wrapper(D)并选择在之后插入—超级菜单栏直接出现在Loft页眉下方。 - 设备后缀
(D)保持仅桌面。
用Navi+超级菜单替换Loft桌面菜单
替换模式将原生菜单交换到页眉内完全—Navi+直接渲染到该容器中，保持Loft页眉布局完整。
- 保持菜单在页眉中的位置—未添加额外栏
- 当您不想要两行导航时最佳选择
- 适用于任何主题，即使没有
headerInsertSafe
主菜单选择器ul.site-nav已确认—Navi+在原生菜单在Loft页眉中所在的确切位置渲染超级菜单。
- 在Navi+中创建新菜单，选择超级菜单，并设计下拉列。
- 在 Publish 中启用 Insert/Replace 方法。
- 输入桌面导航选择器
ul.site-nav(D)并选择替换—Navi+渲染替换原生Loft菜单。 - 选择替换后，优化无闪烁加载—见发布指南。
在Loft徽标前插入触发器图标
在徽标前添加触发器图标—对于没有默认移动汉堡菜单的主题，或作为滑动/超级菜单的第二个入口点，在Loft徽标旁边有自定义汉堡菜单。
- 创建新触发点而无需编辑Liquid
- 自然放置—正在徽标旁边，熟悉的购物者
- 非常适合没有移动汉堡菜单的桌面优先主题
徽标选择器.header__logo在Loft上已确认，因此Navi+可以在其前面插入触发器图标。
- 高级模式—对于没有移动汉堡菜单的主题，或添加第二个入口点。
- 构建一个小单项菜单（一个单项超级/滑动菜单），其项目使用
open:NaviMenu(EMBED_ID)打开您的主滑动菜单。 - 在 Publish 中启用 Insert/Replace 方法，输入
.header__logo(M)并选择 Insert Before —— 图标出现在 Loft 徽标之前。 - 一点自定义CSS对齐它；如果您需要帮助，请与支持人员联系。
11 如何向Loft添加Navi+菜单
此页面上的每种菜单类型都遵循相同的三个步骤。启用应用一次——然后每个新菜单只需设计和发布。无需编辑 Liquid。
- 启用Navi+一次。 在 Shopify 管理后台进入 Online Store → Themes → Customize → App embeds，然后启用 Navi+。这将在您的 Loft 店面加载应用，并支持您构建的每个菜单。安装指南 →
- 在Navi+编辑器中设计菜单—项目、图标、图像、列和颜色。
- 发布它。 打开菜单的发布面板。浮动菜单（选项卡栏、FAB）只需要发布切换；滑动和部分菜单指向上表中的CSS选择器。
向任何选择器添加(M)或(D)以仅针对移动设备或仅桌面设备—例如header(D)。不确定选择器？打开yourstore.com/#navidebug-on，悬停元素并按Ctrl/Cmd + C复制它。
实时交互测试
Playwright自动点击通过实时Loft演示商店并捕获结果。
常见问题—Navi+在Loft Shopify主题上的使用
我如何向Loft Shopify主题添加Navi+菜单？
我如何向Loft Shopify主题添加选项卡栏？
.cart-wrapper）。我如何向Loft Shopify主题添加超级菜单？
.header__section-wrapper(D) 的 Insert After 方式在标题下方插入 —— 无需编辑主题代码。我如何用滑出菜单替换Loft移动菜单？
.js-drawer-open-left。滑动菜单然后从购物者已在点击的相同按钮打开，替换原生抽屉。我需要编辑Loft的主题代码来添加菜单吗？
Navi+是否适用于Loft Shopify主题？
其他archetype系列主题
向其他Shopify主题添加Navi+菜单
选择器参考
面板容器和补充选择器—用于状态检测或隐藏原生元素。
| 角色 | CSS选择器 | 平台 | 用于 |
|---|---|---|---|
| 滑动抽屉 | #NavDrawer |
移动版 | 原生抽屉 — Navi+ Slide Menu 激活时隐藏 |
| 搜索模态框 | predictive-search |
移动版和桌面版 | 搜索面板容器 — 检测打开/关闭状态 |
| 购物车抽屉 | [class*='drawer'][class*='cart'] |
移动版和桌面版 | 购物车抽屉容器 — 检测打开/关闭状态 |
| 超级菜单 | — | 桌面版 | 没有原生 Mega Menu — Navi+ 改为插入一个 |