How to Create Drop Down Menu in Shopify?

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.

 

Create a menu

  1. To create a new menu:

  2. From your Shopify admin, click Online Store, and then click Navigation (or press G W N). Select the Add menu button.

    Add menu button

  3. Give your navigation a title. A handle will automatically be generated from this title.

    navigation a title

  4. Add links to your menu.

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

 

Create a drop-down menu

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

  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.

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

    Click Add menu

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

    name for your navigation

    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.

    Click Add menu

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

    named the menu

    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:

    Main Menu

  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:

    drop-down menu

 

Join our Newsletter

Never miss the latest offers, voucher codes and useful articles delivered weekly in your inbox.