Menus and links

Navigation on your Shopify website is controlled by menus and links. Each menu contains links which visitors can click or tap to explore your website.

Default menus

All online Shopify stores have default main menu and footer menus that appear on every page of the website.

The menu for your main menu contains these default links:

Home Your store's home page.
Catalog Your store's Catalog page.
Blog Your store's Blog.
About Us Your store's About Us page.

The menu for your footer menu contains these default links:

Search Your store's search page.
About Us Your store's About Us page.

Adding a new menu

To add a new menu to your website, you need to:

  1. Create a new menu
  2. Make the new menu visible on your store.

Create a menu

To create a new menu:

  1. From your Shopify admin, click Online Store, and then click Navigation (or press G W N).

  2. Select the Add menu button.

    Create new link list 1
  3. Give your navigation a title. A handle will automatically be generated from this title.

    Create new link list 2
  4. Add links to your menu.

  5. Once you have added all of your links click Save.

Make a new menu visible on your website

When you create a new menu, you must add it to your storefront so that it's visible to your potential customers.

Some themes come equipped with menu options that you can easily enable to make your new menu visible.

Let's say you want to create a new sidebar menu. To do so:

  1. First, follow the steps outlined above to create your new menu. Enter the links you wish to appear in your new sidebar menu.

  2. Next, go to the Themes page in your shop admin.

  3. From the Theme page, click on the Customize theme button for the Theme you wish to add the link to.

    Create new link list 6
  4. On the right menu, click the Sidebar menu if one exists for that theme:

    Create new link list x1

If you don't see a Sidebar button, your sidebar logos may actually be part of the following sections:

  • Right Column
  • Home
  • Homepage.

       5. This menu gives you the option to enable your new menu. If using Radiance or a similar theme, check the box next to Show menu 1? (or a higher number if this is not the first extra menu you've added to your storefront).

Create new link list x2

       6. From the Use list drop-down menu, select the new sidebar menu you have created.

       7. Click the Save Changes.

Note

If your theme does not let you enable your new menu by editing your Customize theme page, you will have to edit your store's liquid files to include it. If you're not comfortable with this, you can hire a Shopify Expert to make the changes for you.

Create a drop-down menu

A drop-down menu displays a list of links when your customer hovers their mouse over it.

Store front

  1. From your Shopify admin, click Online Store, and then click Navigation (or press G W N).

    The navigation page of most new stores has both a Main Menu menu and a Footer menu. You can make drop-down menus on your storefront from any link in the Main Menu.

    Drop down 1

    This means you can drop-down from an existing link, or add a new link to the main menu first, to use as the head of your drop-down menu before proceeding.

    This walkthrough will show you how to make a drop-down from the existing Catalog link.

  2. Click Add menu.

    Add link list btn

  3. Type in the name for your navigation. The handle will be automatically generated for you (do not edit it):

    Link list name

    For this walkthrough to work, the name you enter MUST be the same as the name of the link in your Main Menu that you wish to drop-down from. Because we want to drop-down from Catalog, we will name our menu "Catalog".

  4. Click Add menu item one time for each link you want to include in your drop-down menu.

    Add a link

  5. For each link you've clicked to add, type in a Name, then click Link drop-down box and choose your destinations for these links (e.g. you can link to specific collections, all products, or pages etc.)

    For each link

    You can set anything you like for these Names (they will appear to your customers), there are no naming rules like when we named the menu.

  6. Click Save.

  7. To check your work, click back into the Navigation page of your admin. You should have a new menu with the same name as one of the Main Menu links, like this:

    Drop down relationship

  8. You can check your work in your storefront by clicking the "View your website" button:

    View your website

  9. Hover over the Catalog button to view the drop-down menu:

    Store front

I don't want to drop down from Catalog – can I drop down from another button?

Yes, you can do this for any button in the main menu, not just for Catalog. The key things to remember are:

  • If you want a drop-down menu from a button other than Home, Catalog, Blog, or About us, you must first add the link to your main menu.

  • When you name your new menu in Step 3, the name you enter MUST be the same as the name of the link in your Main Menu that you wish to drop-down from.

Non-English menu names

If the name of your menu uses characters from Arabic, Hebrew or Cyrillic alphabet, or is in Chinese or Japanese, chances are (unless you are using the New Standard theme), that your drop-down menu will not work.

  1. From your Shopify admin, go to the Navigation page.

  2. On the menu you want to edit, click Edit menu.

    Add link list to main menu
  3. Click on the Add another link button.

    Add link to main menu 1
  4. Two new fields will appear. In the first text field, enter the name of the link you want to add (e.g. Contact Us, About, Collection name etc).

  5. From the drop-down menu beside the link name, select where this new link will point to:

    Add link to main menu 2
    • Home page: links to the store's homepage.
    • Collection: links to a collection.
    • All collections: links to an index of all your collections.
    • Product: links to a product.
    • All products: links to all products.
    • Page: links to a page.
    • Blog: links to a blog.
    • Search page: links to a search function.
    • Web Address: links to a web URL outside of your store.
  6. When you select one of the these options, a dropdown field will appear. Using this dropdown menu you can select the specific name of the page/product/blog/collection you wish to add to the navigation.

    • If you select Collections in addition to the dropdown menu you will have the option to filter the selected collection with tags. These tags let you further specify which products to display from the selected collection.
    Add link to main menu 4
    • If you select Web address from the dropdown menu a new field will appear instead of the additional dropdown. In this field you can enter the URL of the web page you want to link to. You might want to make your external links open in a new browser tab.
      Add link to main menu 5
  7. Once your link is set, click Save.

  8. Your new link should now appear in the main menu of your online store:

Add link to main menu 3

Open external links in a new browser tab

You might want your customers to go to links outside of your store, but have those links open in a new tab. This is possible with a small customization to your theme.

Did you know?

According to most usability experts, opening links in a new browser tab is considered bad practice.

If you would still like to open external links in a new window:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Under the Layouts folder, click on theme.liquid to open it in the online code editor.

  4. Scroll through the code and locate the closing body tag.

  5. Paste the following code above the closing body tag:

<script>
jQuery('a[href^="http"]').not('a[href^="{{ shop.url }}"]').attr('target', '_blank');
</script>
  1. Save your changes.

By default, your main navigation menu comes with the following links: Home, Catalog, Blog, About Us. But the main menu, as well as your footer menu, is completely customizable. You can add links, remove links, or change the name of your links.

  1. From your Shopify admin, click Online Store, and then click Navigation (or press G W N).

  2. Click Edit menu beside the menu containing the link you want to edit. A menu details page opens.

  3. Scroll down to the Menu items section.

  4. Under the "Name" header, you will find the link you wish to edit. Make your changes.

    Edit link name 1
  5. Click Save menu.

If you want to change the order in which your menu links appear, you can use the handle tool to reorder your links. You can do this either directly on the Navigation page, or from the Edit menu page.

Reorder a link on the Navigation page

  1. From your Shopify admin, click Online Store, and then click Navigation (or press G W N).

  2. Next to the link that you would like to reorder there is a handle icon

    Link handle 1
  3. Click and drag the link to the order you would like it in.

    Link handle 2

The link order will save automatically.

  1. From your Shopify admin, click Online Store, and then click Navigation (or press G W N).

  2. On the menu of your choice, click Edit menu

    Link handle 5
  3. Scroll down to the Menu items section

  4. Next to the link that you would like to reorder there is a handle icon

    Link handle 3
  5. Click and drag the link to the order you would like it in

    Link handle 4
  6. Click Save.

To delete a link from a menu (menu):

  1. From your Shopify admin, click Online Store, and then click Navigation (or press G W N).

  2. Click Edit menu beside the name of the navigation you would like to remove a link from.

  3. Scroll down to the Menu items section.

  4. Click the trash can icon next to the link you want to delete.

    Delete link 1
  5. Click Save.

Ready to start selling online with Shopify?

Try it free