跳转到内容
GloboGlobo Docs
安装应用
简体中文

添加自定义菜单位置

在模板代码中添加您自己的容器，将菜单显示在您想要的确切位置。

操作指南 所有套餐 1 分钟阅读

当模板中想放菜单的位置没有菜单元素，或页眉过于定制化而无法使用其他 位置 选项时，请使用此方法。您需要在模板代码中添加一个空容器，然后让 在该 CSS 选择器上显示菜单 指向它。

添加容器并让应用指向它们

  1. 打开模板代码

    前往 在线商店 > 模板，点击模板上的 …，然后选择 编辑代码。

  2. 添加菜单容器

    在每个菜单应显示的位置粘贴一个空容器，然后点击 保存。ID 可以任意设置，以下为示例：

    <div id="GloboDesktopMenu"></div>
    <div id="GloboMobileMenu"></div>
    • 桌面端： 通常放在页眉分区文件中（例如 sections/header.liquid）导航应出现的位置。
    • 移动端： 通常放在模板的菜单抽屉文件中，或 layout/theme.liquid 中。

  3. 在应用中输入容器

    在菜单编辑器中打开 设置 选项卡，在 位置 下选择 在该 CSS 选择器上显示菜单。在 主菜单的 CSS 选择器 中输入 #GloboDesktopMenu，在 移动端菜单的 CSS 选择器 中输入 #GloboMobileMenu。

    在两个 CSS 选择器字段中输入您的容器 ID

  4. 保存、发布并检查

    点击 保存，然后发布菜单。在桌面端和移动端检查您的店面。

须知

  • 仅一种布局：只添加一个容器，另一个字段留空。
  • 现有内容会被替换：应用会填充每个容器，并替换其中的所有内容。
  • 模板原有菜单仍会保留：如果不想同时显示两者，请在代码或模板设置中隐藏或删除原有菜单。
  • 按模板生效：代码修改只适用于您编辑的模板。如果切换或更新模板，请重新添加容器。

故障排除

移动端菜单不显示

您的模板可能稍后才用 JavaScript 构建菜单抽屉。请将移动端容器移到始终存在于页面上的代码中，例如 layout/theme.liquid。

什么都不显示

确保此模板上已开启应用嵌入。在浏览器控制台中检查 document.querySelector('#GloboDesktopMenu') 能否找到您的容器。

此页面对您有帮助吗？

报告问题