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.

#

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

1. Click to the Navigation page of the admin

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

#

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 link list.

#

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

#

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 link list "Catalog".

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

#

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

#

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

6. Click Save.

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

#

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

#

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

#

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 link list 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 linklist 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.