如何在Shopify中自定义页头菜单布局（主题设置、下拉菜单与超级菜单）

Quick Answer: How to Customize the Header Menu Layout in Shopify

Open Online Store > Themes > Customize and select the Header section. There you can change the logo position, pick which menu appears, and (in themes like Dawn) choose a menu type: Dropdown, Mega menu, or Drawer. Build the menu itself in Content > Menus.

按照以下步骤系统自定义页头菜单布局：

1. 打开主题设置：在Shopify管理后台中，前往在线商店 > 模版 > 自定义，在左侧边栏中点击页头（Header）分区。
2. 设置Logo与布局位置：调整Logo position设置，选择Logo置于链接左侧同排，或居中置于菜单正上方。（注意：不同主题的设置名称有所差异；在Dawn中为Logo position）。
3. 关联并嵌套菜单：前往内容 > 菜单构建支持最多2级嵌套的链接结构，然后在页头 > 菜单中完成分配。
4. 选择菜单类型并检查移动端：在Menu type下选择Dropdown、Mega menu或Drawer，并通过Mobile logo position核验手机端显示效果。

What “Header Menu Layout” Means in Shopify

当独立站商家谈及自定义页头菜单布局时，所涉及的通常绝非某一个孤立的配置项。在Shopify架构中，页头布局由四个相辅相成的结构层共同决定：

1. 品牌识别与对齐（Logo position）：控制品牌Logo相对于导航链接、搜索栏和购物车图标的摆放位置。
2. 关联的导航清单（展示哪组菜单）：在后台配置并具体指定挂载到页头分区的链接数据。
3. 结构层级与菜单类型（菜单深度与呈现形态）：决定子分类在桌面端如何展开——表现为狭窄的垂直下拉列表、多列宽幅面板还是隐藏式抽屉。
4. 移动端适配规则（移动端布局与抽屉行为）：横幅如何响应式适配触屏设备，包括图标定位与侧滑抽屉交互。

根据Shopify官方文档说明，大多数主题通过编辑主题页头分区中的设置来更改默认主菜单。然而，实际的链接路径、文本标签以及父子层级关系均在后台的内容 > 菜单中维护。在该界面中，顶级主导航项最多支持在其下方嵌套两级下拉菜单（整套体系最多支持三级逻辑层级）。

由于各主题对布局参数的处理各不相同，本指南以Shopify官方基准主题Dawn为例进行具体设置演示。在Dawn中，这些项属于模块化架构设置，但在其他第三方主题中名称与选项可能不同。若需进一步了解笔记本屏幕缩放与Flex换行断点机制，请参阅我们关于页头布局模型与断点工程的深度分析。

Step 1: Change the Logo and Menu Position in the Theme Editor

页头布局的第一层可见结构是品牌标志与导航链接之间的相对位置关系。在Shopify中调整步骤如下：

1. 登录Shopify管理后台。
2. 进入在线商店 > 模版。
3. 在当前模版或测试副本上，点击自定义。
4. 在左侧组件列表中，点击页头（Header）。

在Dawn主题中，您会看到名为Logo position的设置项，提供四种主要排列方式：

• Middle left：将Logo置于左侧，与主菜单项处于同一水平行。这种紧凑的单行排列能最大程度节省垂直高度。
• Top left：将Logo置于左上角，并将整行导航菜单顺延至其正下方独立成行。
• Top center：将Logo在顶部显著居中，导航菜单紧随其下居中排列。若您希望实现“Logo居中、菜单在Logo正下方”的效果，此项即为原生对应配置。
• Middle center：Logo居中，菜单位于左侧，页头图标位于右侧。

请注意，上述名称适用于Dawn；不同主题的设置名称及可选布局可能有所不同。部分第三方主题会将Logo对齐与菜单对齐拆分为单独字段，或仅提供固定模板。若您使用的主题缺乏所需选项，请参考下文关于主题选项受限时的应对决策。

Step 2: Choose the Header Menu and Build Nested Links

如果页头关联了错误的菜单列表，或者子分类未能成功嵌套，调整布局位置便毫无意义。在Shopify中，菜单需先在后台全局创建，再引入主题编辑器中。

构建并分配菜单的步骤：

1. 在Shopify后台中，前往内容 > 菜单（参见Shopify帮助中心指南）。
2. 点击主菜单（或点击创建菜单以全新构建）。
3. 添加核心大类作为顶级菜单项。
4. 若要创建子菜单，使用鼠标将子项向右侧拖动至父项下方，直至出现缩进标记后松开。
5. 点击保存菜单。

按照Shopify的导航技术规范，顶级项目下方最多可嵌套两级下拉菜单（总层级不超过三级）。所有Shopify主题均被设计为将嵌套项目以主菜单下方的下拉菜单形式渲染呈现。

保存菜单结构后，返回在线商店 > 模版 > 自定义，进入页头分区，找到菜单卡片，点击更改并选中刚整理完毕的列表，最后点击保存。如需掌握避免拖拽错位的高效分类嵌套技巧，请参阅我们的专栏指南：如何在导航菜单中添加子菜单。

Step 3: Pick Dropdown, Mega Menu, or Drawer

将嵌套链接分配至页头后，接下来需要确定这些子分类在桌面端被鼠标悬停或点击时如何展开。在Dawn主题的页头设置中，找到Menu type选项，它提供三种模式（名称因主题而异）：

图1：概念示意图（Concept illustration）— Step 3: Pick Dropdown, Mega Menu, or Drawer

尼尔森诺曼集团（NN/g）的研究表明，超级菜单是“容纳大量导航选项的极佳设计方案”。NN/g强调，超级菜单能够一眼展示全部选项，使用户能够通过视觉直观发现分类，而不必费力去推测和记忆模糊词条下的内容。

相反，在Dawn中选择Drawer（由Dawn header.liquid 中的 section.settings.menu_type_desktop == 'drawer' 条件控制）会让桌面端的横向链接隐藏在菜单按钮之后。这样看起来简洁，但有实际的代价：NN/g 2016年的研究发现，隐藏网站主导航会使可发现性几乎减半。如果您的商店商品目录较大，请仅在移动端使用抽屉，桌面端保留展开式菜单。如需设计均衡的链接列、标题和视觉图块，请参阅我们关于 超级菜单最佳实践 的指南。

Show Menu Links Directly in the Header Instead of a Dropdown

一个常见问题（Shopify Community 上也有关于 Sense 主题的帖子）是：如何让一级链接直接显示在页头上，而不出现下拉菜单。

在Shopify底层机制中，下拉菜单并非通过主题开关控制，而是由数据层级决定。正如Shopify帮助文档明确指出的那样，所有主题都会将嵌套项目展示为主菜单的下拉菜单。如果某个项目在内容 > 菜单中包含缩进子项，主题就会自动生成下拉框。

若要将链接平铺展示在页头栏上：

1. 打开Shopify后台，进入内容 > 菜单。
2. 选择当前分配给页头的导航菜单。
3. 检查列表。如有任何项目缩进在其他项目下方，按住并向左拖拽，使其与最左侧对齐。
4. 确保每一个链接都处于根层级。
5. 点击保存菜单。

刷新商店后，主题会在水平导航栏上并排直显这些链接，不会触发任何下拉容器。

请留意屏幕宽度限制。NN/g 建议：如果网站的一级导航链接不超过4个，就应将它们显示为可见链接。一级链接很多时，这一行可能折成两行，或在较窄的笔记本屏幕上挤到Logo，因此请在多种宽度下预览。如果目录需要很多入口，请把它们归入父级标题之下（例如使用Mega Menu），不要把主导航栏塞满。

Mobile Header Menu Layout: Hamburger, Drawer, and Bottom Tab Bar

在桌面显示器上看起来均衡的页头菜单布局，到了手机上很容易走样。由于移动端屏幕空间有限，主题会用专门的响应式布局来处理移动导航。

图2：概念示意图（Concept illustration）— Mobile Header Menu Layout: Hamburger, Drawer, and Bottom Tab Bar

在Dawn主题的页头配置中，包含专门的Mobile logo position选项：

• Center：将Logo置于移动端页头栏中央。
• Left：将Logo靠左对齐于移动端页头栏。

名称因主题而异。例如，在Stiletto等第三方主题中，移动菜单使用Header区块中的设置。在许多主题中，移动导航链接会收进一个点击汉堡图标才会滑出的抽屉。

不过，完全依赖隐藏的汉堡抽屉是有代价的。Nielsen Norman Group 2016年的研究发现，隐藏网站主导航会使可发现性几乎减半。

隐藏式抽屉对大型目录仍然有用，但您也可以用常驻的底部标签栏（例如 Home、Shop、Search 和 Cart）把几个关键页面放在拇指可及之处，把更深的分类留给抽屉。如需为不同屏幕配置独立的链接结构，请参阅我们关于 如何为Shopify分别创建桌面与移动端菜单 的教程。

When Your Theme Runs Out of Options: Code Edits vs a Menu App

随着业务规模扩大，几乎所有商家都会触及主题自定义工具的边界：例如超级菜单需要5列而非4列、在居中Logo两侧实现对称分裂菜单，或在移动端抽屉内嵌入营销横幅。面对这些边界，您通常需要权衡直接改写Liquid代码还是引入专业菜单应用。

Before you edit code: duplicate the theme

如果您决定直接修改模版代码（例如sections/header.liquid或相关CSS样式表），切勿直接在已发布的正式主题上操作。Shopify官方文档特别建议提前创建模版备份副本，以便在出现排版错误时随时放弃更改并重新开始。

安全备份模版的操作步骤：

1. 在Shopify后台中，进入在线商店 > 模版。
2. 找到当前主题，打开其操作菜单并选择 Duplicate。
3. 重命名该副本，标明其为代码测试专用版本。
4. 所有代码改动与预览验证均仅在此副本内进行，测试无误后再行发布。

The hidden cost of custom theme edits

直接修改代码会带来持续的维护工作。Shopify 文档警告：更新主题时，您所做的代码修改可能会在更新后的副本中被移除。如果您为调整对齐、CSS 媒体查询或抽屉动画而改写 header.liquid，请在每次主题更新后检查并重新应用这些修改。

如果您的布局需求超出了原生设置，可以考虑专为复杂导航打造的主题，或与主题并行运行的应用。

Common Header Menu Problems and Fixes

在调整页头布局过程中，细微的配置失误可能导致链接消失。可参照下表快速排查处理：

Trade-offs: When Not to Change Your Header Layout

重构页头布局并不总是明智之举。在盲目扩充菜单或改版前，请权衡以下客观现实：

• 小型目录不需要Mega Menu：如果商店只有几个简单分类，宽大的Mega Menu面板可能留出过多空白。单列下拉菜单或扁平的链接行通常就够了。
• 桌面端抽屉会降低导航可见性：在桌面端选择 Drawer 外观简洁，但NN/g 2016年的研究发现，隐藏主导航会使可发现性几乎减半。仅适用于依靠页面内容叙事来引导发现的商店。
• 自定义 Liquid 修改会带来升级工作：根据 Shopify 文档，对 header.liquid 的修改或自定义 CSS 在更新主题时可能会丢失。如果没有人能跨版本维护这些修改，请优先使用主题的标准设置或应用。
• 引入应用会增加管理维护成本：额外安装工具意味着需要维护多一套后台界面。仅在主题原生能力确实无法支撑业务架构时再行扩展。

Where Navi+ Fits

当主题自带的页头选项达到上限时，Navi+ 是在主题旁边增加导航功能的一种方式。

您在Navi+应用中创建菜单，并在主题编辑器中将其作为应用嵌入（app embed）启用。菜单在浏览器中绘制于主题自带页头旁边，因此无需编辑 header.liquid：

• Desktop Mega Menu：展示包含多列、图片和精选链接的丰富下拉菜单。
• Mobile Menu：滑入式移动菜单，无需离开页面即可展示完整导航。
• Tab Bar：移动端底部固定标签栏，让少数关键入口始终在拇指可及范围内。

Navi+ 菜单同样最多支持三级。如需判断哪种菜单类型适合您的目录，请参阅 如何为Shopify选择适宜的菜单类型。

If your theme’s Header section stops at a basic dropdown, Navi+ lets you add a Desktop Mega Menu, a Mobile Menu, or a bottom Tab Bar alongside your theme — try it on a duplicate theme first and keep what works.

Action Checklist

使用这份包含8个步骤的实操清单，对Shopify页头菜单布局进行规划、配置与审计：

• 创建主题备份副本：在调整关键布局前，务必在在线商店 > 模版中先复制主题。
• 配置Logo对齐方式：在自定义 > 页头中选定合适的Logo position（如Dawn中的Top center或Middle left；不同主题设置名称有所差异）。
• 梳理菜单层级架构：在内容 > 菜单中规范拖拽嵌套（顶级项目下方最多保留2层子菜单）。
• 完成页头菜单绑定：在页头 > 菜单中确认分区已正确指定目标导航列表。
• 确定桌面端菜单呈现形态：依据类目规模在Dropdown、Mega menu或Drawer间做出选择。
• 校准移动端显示对齐：在真实手机视口中检查页头，调整Mobile logo position（Center或Left）。
• 检验移动端交互工效：实际上手操作侧滑抽屉，评估是否需要接入底部标签栏以保证核心入口长显。
• 进行全端断点排查：在台式机、笔记本与平板屏幕上滑动，确保链接不会异常换行或遮挡Logo。

FAQ

How many levels can a Shopify header menu have?

Shopify菜单中的顶级项目下方最多可嵌套两级下拉菜单，从而构成最多三层的整体层级结构。

How do I make a dropdown in the Shopify header?

在Shopify管理后台进入“内容 > 菜单”，打开目标菜单，用鼠标将子菜单项向右拖动至父项下方呈现缩进状态，然后点击保存。

How do I put the logo in the center with the menu below?

在Dawn主题编辑器中点击“页头”分区，将“Logo position”设置为“Top center”。该选项会将Logo居中置顶，并将菜单居中排布在其正下方。（其他主题中名称可能有所不同）。

Can I show menu links in the header instead of a dropdown?

可以。Shopify主题默认会将包含子项的项目渲染为下拉菜单。若想在页头上平铺展示横向链接，只需在“内容 > 菜单”中将所有项目调整至最高的一级根层级即可。

Can I change the menu layout only on mobile?

可以。Dawn主题在页头分区内提供了专用的“Mobile logo position”（Center或Left）选项。移动端通常在侧滑抽屉内复用桌面菜单数据，但部分主题在页头内设有独立的移动端布局配置。

Should I edit header.liquid?

只有在创建了主题的备份副本之后，才应编辑 header.liquid。请注意，更新到较新的主题版本时，您的代码修改可能会被移除。

Sources

• Shopify Help Center: Drop-down menus — 关于菜单嵌套限制、页头关联及内容 > 菜单后台配置的官方文档。
• Shopify Help Center: Duplicating themes — 在改动模版前建立安全备份副本的官方指导规范。
• Shopify Help Center: Editing theme code — 关于主题升级时自定义代码将被自动清除的官方技术说明。
• Shopify Dawn GitHub Repository: en.default.schema.json — 定义Logo position、Menu type及Mobile logo position的原生Schema文件。
• Shopify Dawn GitHub Repository: sections/header.liquid — 实现桌面端菜单形态及侧滑抽屉条件渲染的底层模板代码。
• Nielsen Norman Group: Mega Menus Work Well Anywhere Navigation Needs to Go — 关于多列超级菜单容纳复杂选项及辅助视觉记忆的可用性研究。
• Nielsen Norman Group: Hamburger Menus and Hidden Navigation Hurt Metrics (2016) — 证实隐藏主导航会导致其可发现性几乎减半的权威实验报告。
• Fluorescent Theme Documentation: Stiletto Header — 商业第三方主题关于桌面与移动端页头独立参数配置的参考文档。
• Shopify Community: How to change header-menu layout Sense theme — 商家关于在页头上平铺展示横向链接而非下拉菜单的社区实操讨论。