设置在线商店中的下拉菜单

您可以使用下拉菜单将产品、产品系列或页面组合在一起,以便客户更轻松地浏览您的在线商店。例如,如果您有很多产品,则您可能需要将它们添加到产品系列中,然后使用主菜单中的下拉菜单来整理这些产品系列。这可以帮助客户找到他们想要的产品类型。

您还可以在下拉菜单或默认菜单中添加、删除或编辑菜单项

您可以在 Shopify 后台通过内容>菜单,查看和更改在线商店的菜单。

嵌套菜单项以开发下拉菜单

您可以通过创建或移动菜单项来创建下拉菜单,使它们嵌套在顶级项之下。顶级项显示在您在线商店的主菜单中,而嵌套菜单项显示在下拉菜单中。顶级项最多可以有两级嵌套下拉菜单。

所有模板均会将嵌套项显示为主菜单中的下拉菜单,部分模板会将嵌套项显示为其他地点中的下拉菜单。

主菜单和下拉菜单根据您的模板显示在在线商店的不同位置。有些模板会在主菜单的下拉菜单名称旁边显示一个图标,从而告知客户那里有下拉菜单。

从主菜单添加下拉菜单

您可以从主菜单中的任何菜单项添加下拉菜单

步骤:

桌面
  1. 在 Shopify 后台中,转至内容 > 菜单

  2. 点击主菜单的名称。

  3. 选择一个主菜单项作为下拉菜单的标头,或添加新的菜单项。如果您不希望标头链接到任何内容,则在标头菜单项的搜索或粘贴链接字段中输入 #

  4. 若要添加要包含在下拉菜单中的菜单项,请完成以下任务:

    1. 点击添加菜单项
    2. 名称字段中,输入菜单项的名称。
    3. 搜索或粘贴链接字段中,输入或选择菜单项的目标位置。
  5. 点击添加,然后点击拖动,拖动菜单项以将其嵌套在标头菜单项下方。

  6. 点击保存菜单

iPhone
  1. Shopify 应用中,轻触水平菜单按钮。

  2. 点击内容 > 菜单

  3. 点击主菜单的名称。

  4. 选择一个主菜单项作为下拉菜单的标头,或添加新的菜单项作为标头。如果您不希望标头链接到任何内容,则在标头菜单项的搜索或粘贴链接字段中输入 #

  5. 若要添加要包含在下拉菜单中的菜单项,请完成以下任务:

    1. 点击添加菜单项
    2. 名称字段中,输入菜单项的名称。
    3. 搜索或粘贴链接字段中,输入或选择菜单项的目标位置。
  6. 点击添加,然后点击拖动,拖动菜单项以将其嵌套在标头菜单项下方。

  7. 轻触保存

Android
  1. Shopify 应用中,轻触 菜单按钮。

  2. 点击内容 > 菜单

  3. 点击主菜单的名称。

  4. 选择一个主菜单项作为下拉菜单的标头,或添加新的菜单项作为标头。如果您不希望标头链接到任何内容,则在标头菜单项的搜索或粘贴链接字段中输入 #

  5. 若要添加要包含在下拉菜单中的菜单项,请完成以下任务:

    1. 点击添加菜单项
    2. 名称字段中,输入菜单项的名称。
    3. 搜索或粘贴链接字段中,输入或选择菜单项的目标位置。
  6. 点击添加,然后点击拖动,拖动菜单项以将其嵌套在标头菜单项下方。

  7. 轻触

页脚菜单集成

下拉菜单也可以在页脚菜单中实现。

步骤:

  1. 在 Shopify 后台中,转至内容 > 菜单
  2. 可选:遵循与主菜单相同的嵌套原则,例如通过点击拖动,将菜单项拖动到标头项下方创建一个下拉结构。
  3. 对于不应链接到页面的标头项(例如“支持”或“探索”标头),在链接字段中输入 #

模板兼容性注意事项

请查看向模板添加下拉菜单的以下注意事项:

  • 大多数模板支持最多两级嵌套下拉菜单。请查看模板文档或测试嵌套项目来确认兼容性。
  • 某些模板可能需要调整 CSS 以提高移动可用性。如果您不熟悉模板代码,请不要自定义模板。详细了解自定义模板

确定您的模板是否支持嵌套式下拉菜单

若要确定您当前的模板是否支持您想要实现的嵌套式下拉菜单最大层级数,您可以使用以下资源:

  1. 检查模板的文档:查看模板的文档,以获取有关菜单功能和支持的嵌套层级的具体信息。

  2. 测试嵌套项:使用所需的嵌套层级数创建测试菜单的结构,并验证它是否在台式电脑和移动设备上正确显示。

大多数模板支持最多两级嵌套下拉菜单。如果您遇到下拉菜单问题,请验证您的模板是否支持您试图实现的嵌套级数,因为某些模板可能需要额外的自定义来支持多层嵌套。

下拉菜单的最佳做法

请查看以下最佳做法,以创建适用于所有设备的有用菜单结构。

  • 对于带有 # 链接的顶级菜单项,请使用描述性标签,例如“按类别选购”。

  • 确保针对移动设备进行优化菜单。您可以在移动设备上测试菜单,确认下拉菜单是否按预期展开。

  • 添加的顶级菜单项不超过七个,避免过度拥挤。

  • 使用透明的描述性链接标题。例如“产品系列”和“夏装”。

常见问题故障排除

对于设置导航菜单时可能遇到的常见问题,请参考以下解决方案:

  • 移动菜单重定向:如果点击顶级菜单链接时重定向到新页面,请在 Shopify 后台中检查菜单,确认菜单链接字段是否为 #

  • 可见性问题:如果嵌套菜单项不显示,请确保将它们完全拖到标头项下方并在菜单界面中缩进。确认您的模板支持您设置的嵌套级数。

  • 模板兼容性:如果您在使用“下拉菜单”时遇到问题,请验证您的模板是否支持您尝试实现的嵌套层级数。有些模板可能需要额外的自定义功能来支持多层嵌套。

自定义下拉菜单的模板代码

对于需要更深入自定义的模板,您可以考虑自定义模板代码

没有找到您需要的答案?我们将为您提供帮助。