How to set up your store's navigation

Clear site navigation is crucial to any online store. It serves as a road map of your site, connecting your customers with the products and information they’re looking for.

If the navigation is simple and intuitive, visitors will stick around, have a positive experience, and maybe even buy something from you. But if the navigation is murky or poorly laid out, they’ll be clicking off to your competitors faster than you can say “bounce rate."

PRO TIP: If you’re looking for some general guidance on navigational labels, categories, and organization, we highly recommend taking a gander at  these three articles. We also wrote  an article on information architecture you might find useful.

For the most part, you’ll set up and manage your store’s navigation from the Shopify admin ( Online Store>Navigation) but the actual location and appearance of these menus will depend on your store’s theme. See the documentation specific to your theme for detailed instructions.

Create a new menu

Your online store has two default menus that come with every theme: the main menu and the footer. If you want to add a different menu, do the following:

  1. From your Shopify admin, click Online Store>Navigation.
  2. On the Navigation page, click the purple Add menu button.
  3. Give your menu a Title. Anything will do, but generally, the more descriptive the better.

  4. Add some menu items. See below.

Add menu items

  1. From the Add menu page or by clicking on the name of an existing menu, click + Add menu item.
  2. Enter a title for the menu item.

  3. Click the Link field and enter a website address or select a link type. For example, if you want the menu item to link to your blog, you’d select Blogs and then News. If you want it to link to a collection, you’d select Collections and then Mother's Day or whatever.

  4. Click save, repeat as needed.

Change the order of menu items

  1. From your Shopify admin, click Online Store>Navigation
  2. Select the title of the menu you want to reorder.
  3. Click and hold the handle icon (looks like a high roll on a dice) beside the menu item you want to move, and then drag it to its new position.

  4. Click save, repeat as needed.

You can use dropdown and mega menus to group products, collections, or pages together to make it easier for customers to navigate your online store. Here’s what to do:

  1. From your Shopify admin, click Online Store>Navigation.
  2. Click the title of your main menu.

  3. Choose one of the menu items to be the top-level item for your drop-down menu, or add a new menu item to serve as the top-level item. If you don’t want the top-level item to link to anything, you can enter # in the Link field. In this example, we want to create a dropdown menu from the top-level "Sale" menu, and we don't want to link it to anything (customers will be able to choose from a list of sale collections when they click "Sale.")

  4. Add menu items to include in the new dropdown menu. Click Add menu item, enter the name of the menu item, and enter or select a destination for the link.
  5. Click and drag the new menu items to nest below the header item in the order and hierarchy you desire. Small dots will appear as you hover over different areas to indicate where your menu items will be placed. You can also add menu items directly to menus by clicking the link below the menu.

  6. Click save, repeat as needed.

Note: Shopify supports up to three tiers of nested navigation in the main menu. The way these tiers will display on your store will depend on your theme. Some themes will display an icon beside the menu item with sub-menus to indicate that more menu items are available. Others will automatically create a mega-menu navigation once a certain number of menus and sub-menus have been added. Please see the documentation for your theme for more information (you should be able to find it under Setting up your homepage>Header>Navigation).
Note 2: Although you can create nested menus for all of your menus in the Shopify admin, there are limitations to how many will actually be visible on the front end of your site. In general, the top level navigation (the main menu at the top of your store) will support three tiers no matter what theme you use. A collection sidebar will support only two. The footer and/or secondary navigation areas do not support nested navigation at this time.