2H Media

Shopify Menus

How to create and edit menus in Shopify
Beginner Shopify
Other Guides

Introduction

What To Expect

Menus can be found in the header, the footer, or in some cases in custom elements throughout your Shopify theme. In this guide, we will walk you though creating and building menus in your online Shopify store.

Audience

This guide is intended for beginner Shopify Merchants.

Timeline

  • Prep: 10 minutes
  • Steps: 10 minutes
  • Total: 20 minutes

Tools

Results

  • Create and customize menus in your online Shopify store.

Step 1

Finding The Navigation Page

Step 2

Creating a Brand New Menu

Step 3

Adding Menu Items

Step 4

Adding A Custom Link

Step 5

Creating a Drop Down Menu

Step 6

Adding Menus to The Front-End of Shopify

Step 1

Finding The Navigation Page

From the Shopify dashboard, click Online Store in the menu along the left hand side of the screen.
Clicking on Shopify's navigation tab
Then click Navigation from the new list of links that appears below that. This will bring up a list of all of the menus that exist on your online store. By default, Shopify includes both the header and the footer menu. Although if you've been working with a developer, there may be several additional menus already present on your online store.
To edit any given menu, you can simply click on the name of that menu.

Step 2

Creating a Brand New Menu

Click the Add Menu button at the top of the screen.
Clicking on add a menu in Shopify
From the Add Menu page, enter a title for your new menu. In most cases, this isn't displayed in the front end of Shopify, but some themes do display the title as a header before the footer menu.
Typing a menu title in Shopify
Once you've entered a title for your new menu, you'll notice that the handle field on the right hand side of the screen automatically populates. This is how your menu is referenced within your stores theme files. For the most part, you can ignore the handle field unless you're a dedicated developer.

Step 3

Adding Menu Items

To continue creating your menu, click the Add menu item link in the middle of the page.
Adding a menu item in Shopify
A sidebar will appear with two fields, Link, and Name. You can fill these out in any order, but it's usually a little bit faster to enter the link first.
When you click in the link field, a number of options will appear in a drop down. From within these options you can select an individual product page or collection to act as the target for the menu link.
adding name and link to a menu item showing the drop down menu in Shopify
Once you've selected a link from the drop down, the name field will automatically update to reflect your choice.
Click the Add button and your link will be added to your menu.

Step 4

Adding A Custom Link

To add a custom link such as an external link or a link to an anchor on one of your pages, start the process in exactly the same way.
Click the Add Menu Item button to make your sidebar appear.
After typing your custom target, it will appear as an option in the drop down.
Click the option and it will be selected as the destination for your link. You'll notice that your custom target has automatically been entered as the name for this menu link.
In most cases this isn't going to be a very user friendly name. So change it to something simpler. To do so, simply click into the Name field and type a new name for the menu link.
adding an anchor link in Shopify
Next, click the Add button and your link will appear at the bottom of the menu.

Step 5

Creating a Drop Down Menu

To create a drop down menu simply click and drag any menu item below and to the right of whichever link you would like to act as the parent.
You'll notice that a new Add menu item link appears below the item you've dragged onto a parent. This allows you to add new links to your drop down menu without having to drag each link individually.
To create additional hierarchy within your menu, select any child link and drag it below and to the right of another child link within this same drop down. How this appears on the front end of Shopify will depend largely on your chosen theme. In some themes, this will automatically create a mega menu, and in others this will create flyouts from your drop down menu.
Drop down menu example in the back end of Shopify
Once you've added one or more links to your menu, a save bar will appear at the top of the screen. Click Save and your menu will be available for use in your online store.

Step 6

Adding Menus to The Front-End of Shopify

Now that you've created your menu, you need to add it to the front end of Shopify.

Click on Online Store > Theme.
Navigating to the Theme tab in Shopify
Click on the Customize button on the right hand side of the screen.
Clicking on Customize Shopify theme tab
The next part of the process can vary somewhat from theme to theme but, in general, the principle remains the same. Within the customizer, navigate to the header section, the footer section, or the custom element where you want your menu to appear.
Clicking on the Header section in Shopify
Within the settings for the chosen section, you should see a menu selector. This will likely already be displaying one of the menus in your Shopify store.
Click the Change button, and a list will appear displaying all of the available menus in your online store.
Clicking on Change in Shopify menu tab
Select the newly created menu and click the Select button at the bottom left hand side of the screen.
Click the Save button in the top right hand corner and your changes will be pushed to the front end of Shopify.

Congratulations on completing this guide.

Want to continue improving your skills?
More Guides

This guide was written for 2H Media by Sara Varasteh with contributions by Aron Murch. Based on Shopify Guide | How To Create And Edit Menus. This guide is maintained by 2H Media.