Create a drop-down menu on my storefront

A drop-down menu displays a drop-down list of links when your customer hovers their mouse over a link in your store's navigation menu.

Store front

Create a drop-down menu (e.g. from the Catalog button)

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

    Click Online Store then Navigation

    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 want to drop-down from. Because we want to drop-down from Catalog, we will name this new 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 menu item you've clicked to add, type in a Name, then click the 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 Link Names (they will appear to your customers), there are no naming rules like when you named the menu.

  6. Click Save menu.

  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 "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.

My drop-down menu won't work with non-English characters

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.

Are you extremely code-savvy? Do you have a designer/developer you are employing? We have a hack you can try: Can I have drop-down menus that use non-English characters?. Please read our Disclaimer before you attempt this.

Ready to put what you've learned into action?

Build an online store with Shopify. Try it free.

Experience the future of retail now.

Shopify Point of Sale. Try it free.