How to Create a Drop Down Menu in Shopify



Creating a drop-down menu in Shopify gives you the ability to structure pages in an organized manner, and is best suited to categories, collections, resource pages, and blogs.

Having a well-structured menu will ensure that your customers navigate to the pages that are most important to you and your business. There is nothing more excruciating than having to filter through a poorly designed site.

"UX is critical to ecommerce because it ensures your customers can easily navigate your website, find what they need, buy it, and move on. And when you make it easy for people to buy from you, they’ll buy more frequently." - Source: WebFX

If you focus on UI/UX from day one, you’ll reap the benefits in the future.

It’s also important to note that no code is required. We’re often asked the question: “can we have the shopify drop-down menu code”, but simply put, there is no code. Shopify has provided all we need in the editor itself.

Whilst the examples below are created using the debut theme, most Shopify themes share the same core structure, so creating and adding a menu will be the same process.

Before we begin, please duplicate your Shopify theme. Whether the changes below will impact your theme or not, it's important to get into the pattern of backing up your theme on every change.

Related blog posts:

We're covering the process of adding a new main menu, that includes creating a drop-down menu item. This will ultimately replace the current main menu on the store front, this giving you the ability to see an end-to-end solution.

Steps to Create a Drop-Down Menu in Shopify

Login

Navigate to your admin login page and log in.

Shopify Login


Online Store

Locate and and click "Online Store"

Shopify click online store


Navigation

After clicking online store, locate and click "navigation".

Shopify click navigation


Add Menu

On the navigation page, you'll see existing menu's, and an option to a add menu. Click "Add Menu"

Shopify click add menu


Add Menu Item

Here you'll want to name your new menu. In this example we're eventually going to replace the main menu on the UI with a new menu that includes a drop-down. Once you've named your menu, click "Add menu item"

Shopify click add menu item


Name Your Menu Item

After clicking add menu item, you'll see an option to name the menu item, and where the menu item points to. I.E a link to the page. For the benefit of this example, name it "Home" and it point it to the home page.

Shopify Name and link the menu item


Drop-down Base Menu Item

Now that you've added the first menu item, we'll begin the process of adding a drop-down menu item.

It's important to note that in this example we'll be adding products to a drop-down menu, but this can be blog posts, collections, and custom pages. Essentially anything that is deemed as a viewable resource can be added as a menu item.

In the image below, we're naming the menu item as "Popular Products", and it's going to point to "All collections", but this can be any collection, potentially a custom collection that contains popular products, the choice is yours.

Shopify stating the process of adding a drop-down menu item


Product Menu Item

Now add a new menu item, but this time choose a product.

Shopify add product menu item


Creating the drop-down

So, at this point you've added a base menu item "Popular Products" and a "product" menu item. Drag your new product menu item just below the popular product menu item.

You should have similar results to the image below.

Shopify drag menu item


Add More

Repeat the process until you are happy with the results and click save!

Shopify add more drop-down menu items and click save


That's it! you've created a menu with a drop-down, but wait! you’ll obviously need to add it to the UI.

It’s important to note that the main menu component in a theme can be replaced with the new drop-down menu just created, but ideally, we want to add the new drop-down to the existing main menu, or completely replace it.

In the following section, we'll cover how to replace the main menu with the new drop-down menu.

Steps to Change the Shopify Main Menu

Online Store > Themes

Click online store and then themes.

Shopify Click online store and then themes


Customize

Locate and click customize.

Shopify locate and click customize


Header

Click the header button, and ensure the header element is highlighted.

Shopify edit header


Main Menu Section

With the header element selected, you should now see an option to change the main menu - click it.

Shopify change main menu button


Main Menu Options

You'll now see two options, Change menu, and Remove menu. Click change menu.

Shopify change main menu options


Change Main Menu

After clicking change menu, you should now be presented with a selection of all menus - including the recently created menu. Select the new menu, click add, and then click save.

Shopify select the new menu and click save


Theme View

At this point your changes will live sync to the theme view.

Shopify theme view


Confirm

As always, we encourage the process of confirming changes are working as expected. Go to your store front, and confirm all changes are now live.

Shopify confirm theme edit changes


It's worth noting, that you could edit the current live main menu to include a drop-down menu item without the need to create a whole new main menu. The purpose of this guide is to demonstrate an end-to-end solution.

The Takeaway

Focus on the simple things to make a huge impact. Adding a drop-down menu in Shopify is easy, but always factor in the user journey. I.E how easy is it to get from “A” to “B”?

Always ensure you’ve followed best practices to maximize your chances of securing that all-important sale. Every tweak you make to your store needs to be validated.

To summarize we've briefly covered:

  • How to create a drop-down menu in Shopify
  • How to replace the main menu in Shopify

What next:

Shopify retailers also searched for:

  • add drop-down menu from main menu Shopify
  • how to add products to drop down menu in Shopify
  • how to add drop down menu shopify debut theme
  • how to make a drop down menu in shopify




Author

avatar author

Terry Wingfield

A techy at heart, with over 10+ years of software engineering skills, and 5+ years experience in ecommerce, retention, and personalization.