在 Shopify 上发布

步骤 2:(Shopify)在您的网站上发布菜单。

I) 方法 1:在您网站的特定位置插入(在此菜单之前或之后),或使用 CSS 选择器替换现有菜单。(RECOMMENDED)

I.1. 在应用嵌入中打开 Navi+

步骤 1:点击在线商店,然后点击主题。提示:右键点击在线商店并选择“在新标签页中打开链接”以节省时间。

步骤 2:选择您想要发布菜单的主题。

点击:自定义

  • 如果您的网站是新的且尚无用户,请随意发布菜单,无需担心——您可以随时轻松开启或关闭,而不会影响访客。
  • 如果您的网站已经有常规流量,请更加小心。最佳做法是创建一个重复主题,并首先在该版本上测试 Navi+。

步骤 3:转到应用嵌入,找到“在所有页面上使用的 Navi+”,并将其打开。

步骤 4:别忘了点击“保存”以应用更改。

完成这 4 个步骤后,Navi+ 已经安装在您的网站上并准备显示。然而,过程尚未完成。返回到 Navi+ 应用标签以实际开启发布菜单

I.2. 选择显示设置并发布菜单。

步骤 1:点击发布到网站按钮。

步骤 2:开启切换 “通过插入/替换方法发布菜单”.

步骤 3:选择正确的 CSS 选择器并替换/插入方法

在本指南中,我们将重点关注 2 种方法:在页眉下方插入此菜单或替换默认的 Mega Menu。您还可以通过查找和应用其他 CSS 选择器来创造性地使用此方法以触发菜单。

如何在网站的页眉下插入此菜单?

要做到这一点,只需识别您网站页眉的 CSS 选择器并将其输入到文本框中。我们已经为您找到了一些最流行主题的 CSS 选择器,列在下面。

  1. 一些流行的免费主题的 CSS 选择器.. 来自 Shopify 的 Dawn、Sense、Savor、Horizon..
header
  1. 不在此列表中,别担心
- 您可以与 Navi+ 支持人员聊天以获得即时帮助——这只需几分钟即可找到 CSS 选择器。

- 或者,您可以在下一个主题中遵循自助指南(在此主题之后)。
如何替换默认的 Mega Menu?

要做到这一点,只需识别您网站页眉的 CSS 选择器并将其输入到文本框中。我们已经为您找到了一些最流行主题的 CSS 选择器,列在下面。

  1. 一些流行的免费主题的 CSS 选择器.. 来自 Shopify 的 Dawn、Sense、Savor、Horizon..
.header-menu
  1. 不在此列表中,别担心
- 您可以与 Navi+ 支持人员聊天以获得即时帮助——这只需几分钟即可找到 CSS 选择器。

- 或者,您可以在下一个主题中遵循自助指南(在此主题之后)。
如何在您的网站上找到 CSS 选择器?

您可以与 Navi+ 支持人员聊天以获得即时帮助,而不是自己去做。\然而,(1)这将帮助您理解核心思想,(2)如果您想自己动手,请遵循以下说明。

I.3. 重要!优化 Mega Menu 的速度和用户体验(替换模式)

当您用一个菜单替换另一个菜单时,Navi+ 会等待旧菜单显示,然后立即用新菜单替换它。尽管这几乎是立即发生的,但仍然会有一个短暂的时刻,旧菜单会出现,这可能会让用户感到困惑。

通过此步骤,您可以完全隐藏旧菜单,并显示加载效果。这使得网站感觉更快,并改善用户体验。

Navi+ 提供了一个简单的解决方案来优化用户体验和速度,如下步骤

为什么您需要这样做?难道 Navi+ 还不够快吗?

Navi+ 非常快。它完全部署在领先的 CDN 上,延迟非常低(约 100 毫秒),可以在不减速的情况下为数百万客户提供服务。

然而,Navi+ 仍然在 Shopify 生态系统内运行。Shopify 有自己的加载规则:

  1. Shopify 优先加载自己的资源。
  2. 然后 Shopify 加载主题内容。
  3. 最后,Shopify 加载应用内容,但没有特定顺序。

这意味着如果您使用多个应用,Navi+ 有时可能会比预期加载得更晚。这就是为什么在某些情况下它可能感觉更慢。


我的解决方案是什么?

目前,Navi+ 在 Shopify 网站上的加载优先级很高。然而,仍然存在一定的延迟。我们将在这里逐一解决这些问题:

注意:

  • 如果您希望它仅适用于移动设备,请添加后缀(M)
  • 如果您希望它仅适用于桌面,请添加后缀(D)
  • 如果您希望它适用于两个平台,请不添加后缀。

II) 方法 2:将此菜单作为 Shopify 主题中的部分/区块添加

此方法通过在您的 Shopify 主题中添加一个区块/部分来插入菜单。这是一种传统的方法,因此我不会详细描述。使用此方法,您甚至不需要在方法 1 的步骤 1 中所需的“在应用嵌入中打开 Navi+”

复制此菜单的嵌入 ID,然后插入到主题部分中名为 “Navi+ 在部分中” 的区块中。您可以在添加后添加标题,设置全宽,并调整此部分的边距。

将此菜单作为 Shopify 主题中的部分/区块添加的指南

以下是将 Navi+ 菜单作为部分/区块插入到您的 Shopify 主题中的详细指南。此方法允许您以标准的、 Shopify 支持的方式添加菜单,尽管它不如 Navi+ 提供的其他方法灵活。

此方法适用于Mega MenusGrid Menus。它不适用于TabbarFABSlide Menus