References

Understanding navigation

When you're setting up your online store, you should think about how you want customers to find your products and information about your business. This will help you to make decisions about your online store navigation.

Navigation helps your customers browse your online store and find important pages. Add menus to your online store to display and organize links to products, collections, webpages, blog posts, and more.

You can add, remove, change, and view your links and menus from the Navigation page in your Shopify admin. Choose where on your store's theme you want the menus to show in your Theme settings.

Before you begin, you can learn about the default menus, and compare the way that navigation looks in different themes.

Default menus

Your online store has two default menus that appear on every page: the main menu and the footer menu. You can add, remove, or edit menu items in your online store's default menus.

Main menu

The main menu appears on every page of your online store. The main menu is usually displayed as items across the width of the header, or else as a list of items in a sidebar. A customer will probably look at your main menu to find your products and information about your business, like an "About us" page.

Your main menu has two default menu items:

  • Home: the main page of your online store
  • Catalog: a page that displays all of your products

You can add a drop-down menu from any of the menu items in the main menu. A drop-down menu is a sub-menu from the main menu, and is usually displayed as a list of items connected to the main menu item. Drop-down menus are a good way of organizing similar items: groups of webpages, blog posts, store policies, products, or collections. For example, if you have a lot of products then you might want to add them to collections and then use a drop-down menu from the main menu to organize the collections. This can help a customer to find the type of products that they're looking for.

Footer menu

The footer menu is usually displayed as items across the width of the footer. A customer will probably look at your footer menu to find information about your store policies and contact information.

Other menus

Depending on your store's theme, you might be able to add a new menu by editing the settings in the theme's Header section. If your theme doesn't let you add a new menu by editing theme settings, then you can customize your theme code to add a new menu. You can also hire a Shopify Partner to make the changes for you. Learn more about hiring a Shopify Partner.

Comparing navigation in different themes

Every theme has a different design, so the navigation looks different in different themes.

For a demonstration, go to any theme in the Shopify Theme Store and click View Demo.

Add, remove, or edit menu items in your online store

You can add menu items to your online store menus to build your store's navigation. Menu items are links to products, collections, webpages, blog posts, policies, or other websites. You can also remove or edit menu items.

In most cases, you need to create an item before you can link to it. For example, you need to create a collection before you can add it to a menu.

You can view and change your online store navigation from the Navigation page in your Shopify admin.

Add a menu item

You can add menu items to link to:

  • webpages
  • collections
  • products
  • blogs or blog posts
  • store policies
  • external websites
  • email links

https://www.youtube.com/watch?v=mYCitd-c1T8

Steps:

  1. From your Shopify admin, go to Online Store > Navigation.
  2. On the Navigation page, click the title of the menu that you want to edit.
  3. Click Add menu item.
  4. Enter a name for the menu item. This name displays in the menu, and can include special characters or emoji.
  5. Click the Link field, and then enter a website address for an external website or select a link type:
    • Home - your online store's home page
    • Collections - a specific collection or all collections
    • Products - a specific product or all products
    • Pages - a webpage on your online store
    • Blogs - a blog on your online store
    • Blog posts - a blog post on your online store
    • Policies - one of your store policies To create an email link, use the format mailto:youremail@example.com.
  6. If you selected a collection or all collections, then you can filter the collection with tags to display only the products that match all of the tags that you enter.
  7. If you selected a link type, then select a specific destination. When you select Home, the destination is automatically set to your online store's home page.
  8. Click Add to save your menu item.
  9. Click Save menu.

If you delete a resource that you use in your store's navigation, then any associated menu items are also deleted. For example, if you delete a collection that you use in the On sale menu item, then both the collection and the menu item are deleted.

Edit a menu item

Note

When editing your menus, each action (add, edit, delete, move) counts as a change. After you've hit 200 changes, further actions are restricted until you Save your menu changes. Clicking the Save button resets the counter. Save your menu changes often to ensure you don't reach the change limit.

Steps:

  1. From your Shopify admin, go to Online Store > Navigation.
  2. Click the name of the menu that includes the item.
  3. In the Menu items section, click Edit beside the name of the item.
  4. Make any changes:
    • To change the name of the menu item, enter text in the Name field.
    • To change the destination of the menu item, click the x in the Link field, and then enter or select a new destination.
  5. Click Apply changes.
  6. Click Save menu.

Change the display order of menu items

You can view the display order of menu items on the Navigation page. The menu items display on your online store in the order that they are listed.

Steps:

  1. From your Shopify admin, go to Online Store > Navigation.
  2. Click the title of the menu that you want to reorder.
  3. Click and hold the handle icon (⠿) beside the menu item, and then drag the menu item to another position:
  4. Click Save menu.

Remove a menu item

You can remove a menu item to delete it from your online store navigation. When you remove a menu item that has items nested below it in a drop-down menu, the nested menu items are also removed and the drop-down menu is removed from your online store navigation.

Steps:

  1. From your Shopify admin, go to Online Store > Navigation.
  2. Click Delete beside the menu item that you want to remove.
  3. Click Remove to confirm.
  4. Click Save menu.