Help

Managing navigation menus

Create navigation menus, add links to products, collections, pages and policies, arrange nested menu items, and manage custom and default menus.

Updated

Use Menus to organize the links shoppers use to browse your store. Each menu has a title and an ordered set of items. An item has its own visible name and a destination, and can contain child items for a dropdown.

Open and find menus

  1. Sign in as the owner or with Themes permission. Menu management uses Themes access.
  2. Open Menus under Online Store in the sidebar.
  3. Use Search menu to find a menu by its title. Use Add filter to narrow by Created, or Sort to arrange menus by Name or Created.
  4. Open a menu row to edit its items. Use the page controls for additional results.

These are the demo store's existing menus. The list shows Name, Menu items, and Created at. Select any screenshot to enlarge it.

Create a menu

  1. Click Create menu.
  2. Enter a clear Menu title, such as Customer help.
  3. Click Save in the modal to create the menu. Its editor opens so you can add items.

This example was not saved. Saving this modal creates the menu itself; menu items are prepared in the next step.

The menu's Title field is read-only in the current editor. Choose its title carefully when creating it; this screen does not offer renaming.

Add a menu item

  1. Open the menu and click Add menu item.
  2. Enter the Name shoppers should see, such as Browse all products.
  3. Choose a Source, then select or enter its destination:
  • Collections: search for and select a collection.
  • Products: search for and select a product.
  • Pages: choose a saved custom page.
  • Policies: choose a written store policy. Entries marked Not written are unavailable until the policy has content; see Managing written policies.
  • Link: enter a store path, such as /products or /blog, or a full web address such as https://example.com/help.
  1. Review the Name after selecting a resource: the picker can fill it from the resource's title. Change it if your menu needs a shorter label.
  2. For Link, review Open in new tab. It starts checked when you choose Link; clear it if shoppers should stay in the same tab.
  3. Click Save in the item modal to add the item to the working menu.
  4. Click the page's Save action to persist the menu.

This prepared item was not saved. Changing Source clears the previous destination, so select the intended destination again before saving.

Important The item's modal Save only updates the working menu. Adding, editing, moving, or removing items must also be saved with the menu page's Save action. Review any unsaved-changes prompt before leaving.

Arrange dropdowns and item order

The Menu items block shows the current tree. Each row has a drag handle on the left and an actions menu on the right.

This is the existing Main menu; its items were not changed for the screenshot.

  1. Drag a row's handle up or down to change its order.
  2. Move it right beneath another item to nest it, or left to move it toward the top level. Follow the drop indicator.
  3. Expand or collapse a parent to review its children. Collapsing a row changes your editing view; it does not remove those links.
  4. Keep the structure within three item levels: a top-level item, child, and grandchild. Moving a group must leave room for all its descendants; an unsupported drop is refused.
  5. Click the page's Save and check the menu in your storefront.

The handles also support keyboard sorting: focus a handle, press Space to pick it up, use the arrow keys to move, then Space to drop or Escape to cancel. Follow the editor's position announcements.

Your theme controls how dropdowns appear on desktop and mobile. A supported menu tree does not guarantee the same visual layout in every theme.

Edit or remove an item

Open a row's three-dot actions menu and choose Edit to change its Name, Source, or destination. Save the item modal, then save the page.

To remove an item, choose Delete in that row's menu and review the confirmation. Removing a parent also removes its nested items from the working tree. Review the whole group before saving the page.

Removing a menu link does not delete the product, collection, page, or policy it points to. Publishing or hiding that content is a separate action. Check the destination's availability if a saved link does not open for shoppers.

Show the menu in your storefront

After saving, check the relevant navigation setting in your storefront theme and choose the menu where needed, such as a header or footer menu setting. Creating a custom menu alone does not place it in a theme section. The available placements depend on the theme.

Preview the store on desktop and mobile. Open links, expand dropdowns, and check external links' tab behavior. A manually entered Link is saved as text, so review it when its destination changes.

For old addresses that should send visitors to a new destination, use Managing URL redirects. Updating a menu item changes that menu link; it does not create a redirect for people using the old address elsewhere.

Delete a custom menu

  1. On the Menus list, select the custom menu's row. Selections apply to the current page.
  2. Click Delete in the selection controls.
  3. Check the selected menus and confirm only when ready.

Main menu, Footer menu, and Sidebar menu are protected default menus. You can edit their items, but cannot delete those menus. If you select defaults together with custom menus, only the eligible custom menus are removed.

Warning Deleting a custom menu removes its item tree and cannot be undone through the admin. Check theme settings that use it and select a replacement menu where needed. Its destination content is not deleted.

Troubleshooting

Was this guide helpful?