在 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 选择器，您可以使用：
如何使用浏览器开发工具找到 CSS 选择器
您可以与 Navi+ 支持人员聊天以获得即时帮助，而无需自己操作。然而，如果您想自己操作，请按照下面的截图进行。
I.3. 三种发布选项
步骤 1：点击 发布到网站 按钮。
步骤 2：打开切换 “通过插入/替换方法发布菜单”。
步骤 3：输入您的 CSS 选择器并选择以下三种发布选项之一。
选项 1：插入之前（最常见于网格菜单）
在所选元素之前立即插入 Navi+ 菜单。
示例： CSS 选择器 main → 网格菜单出现在页面的主要内容区域上方。
适用于 Shopify 主题的常见 CSS 选择器（Dawn、Sense、Savor、Horizon）：
main— 大多数 Shopify 主题#MainContent— Shopify Dawn 主题
选项 2：插入之后
在所选元素之后立即插入 Navi+ 菜单。
示例： CSS 选择器 header → 网格菜单出现在标题下方。
适用于 Shopify 主题的常见 CSS 选择器（Dawn、Sense、Savor、Horizon）：
header— 大多数 Shopify 主题.header-wrapper— 一些主题
选项 3：替换
在大多数 Shopify 商店中，没有内置的网格菜单元素可以替换。推荐的方法是插入之前 main。
I.4. 设备特定定位
您可以通过添加后缀来控制 CSS 选择器是否适用于移动设备、桌面或两者：
| 后缀 | 适用对象 |
|---|---|
(M) |
仅移动 |
(D) |
仅桌面 |
| (无) | 移动和桌面均适用 |
示例： main(D) — 仅桌面 · main(M) — 仅移动 · main — 两个平台均适用。
II) 方法 2：将此菜单作为 Shopify 主题中的部分/区块添加
此方法通过在您的 Shopify 主题中添加区块/部分来插入菜单。这是一种传统方法，因此我不会详细描述。使用此方法，您甚至不需要 “在应用嵌入中打开 Navi+”，如方法 1 的步骤 1 中所要求的。
复制此菜单的嵌入 ID，然后插入到主题部分中名为 “Navi+ 在部分” 的区块中。您可以在添加后为此部分添加标题、设置全宽并调整边距。
在 Shopify 主题中将此菜单作为部分/区块添加的指南
以下是将 Navi+ 菜单作为部分/区块插入到您的 Shopify 主题中的详细指南。此方法允许您以标准的、Shopify 支持的方式添加菜单，尽管它不如 Navi+ 提供的其他方法灵活。
此方法适用于 Mega Menus 和 Grid Menus。它 不适用于 Tabbar、FAB 或 Slide Menus。
