How To Create A Dropdown Menu on Your Shopify Page

Providing your customers with a quick and easy experience on your website is key in giving them that seamless shopping experience. One way to do this is to have an effective navigation bar on your Shopify page which helps not only you but also your customers.

We want to be able to provide our customers with quick solutions to avoid them from leaving without buying anything. By providing them with a well categorized navigation system, we help them find what they want and need and in effect, help them make a purchase in our store.

Even without investing too much budget into it, you can easily have a responsive and easy to navigate website by organizing your menu in a smart way. To further improve your navigation bar, you can opt to add a dropdown or a sub menu.

A dropdown or a submenu is created as a menu that is contained within a main menu. Usually you would have your main categories then as you hover your mouse over one, it shows a list of more items which may show a small arrow to the right to show even more items.

Example of a dropdown menu

These dropdown menus are great for organizing your products or services according to category or by collection. For example, if you have a menu saying bottoms, the dropdown menu or submenu for this would be skirts, pants, or shorts. This type of menu is most helpful when you already have a lot of products so that customers can easily find what they are looking for.

Example of a dropdown menu on a footwear brand’s Shopify store

As you can see, there is always a main menu followed by the submenu or the dropdown menu. What the main menu does is to minimize the number of clicks so your website visitors can easily reach and find lower level products.

You can organize this even without the help of a designer or developer. Just make sure that it’s organized as best as you can in a way that the customers will easily understand. If you are able to do it well, your drop down menu should be intuitive and easy to use.

Here are a few steps to create a submenu or dropdown menu from the main menu

You can view and change your online store navigation from the Navigation page in your Shopify admin.

Familiarize yourself first with the dropdown menu system on Shopify. You can add a top-level item to the navigation link in the main menu. Lower-level links for submenus are displayed via a dropdown menu. So a user would need to hover over the main link to then see the next level.

There is a technique called “nesting” where you build dropdown menus by creating or moving menu items below a top-level item. When nesting, the top-level item should be in the main menu of your store and the nested menu appears via dropdown.

In the example below, there are two nested menus under the “Products” category. The first nest is “shirts” and further on, we have “men’s” shirts and “women’s” shirts.

How this all looks on your website depends on the theme you’re using. All themes should display nested items as drop down menus from the main menu. Some themes display an icon beside the name of a drop-down menu in the main menu to help customers better visualize and understand that a drop down menu is there.

Steps to adding a drop-down menu:

1. From your Shopify admin, go to Online Store > Navigation.
2. Click the title of your main menu.
3. Choose one of the menu items to be the header for your drop-down menu, or add a new menu item to be the header. If you don't want the header to link to anything, then you can enter # in the Link field when you add the menu item.
4. Add menu items to include in the new drop-down menu. Click Add menu item, enter the name of the menu item, and enter or select a destination for the link.
5. Click and drag the menu items to nest below the header item.
6. Click the Save menu button.

To create a simple submenu with title

1. Open your created menu
2. Navigate to Theme section to click on the Customize button. Then click on the Header option on the left side of the screen.
3. Scroll down to the end of the screen, you will need to click on the Add content option, and then choose Simple submenu with title. Next, add menus in special fields by entering in the blank section of the screen the name of your main menu.

4. Click Save

Some quick tips as you’re creating your dropdown menu:

Choose the right theme

Having the right theme will help you become more efficient as there are themes that offer more support in terms of intuitiveness and multi-menus. Different themes have different styles with their own settings of how the layout of the menu will be. You may also notice that there will be limitations especially on other devices like phones and tablets. We recommend that you test out a theme first before fully committing to it.

Name your menu items properly

The names of your top-level items serve as the starting point so it actually acts as a title for a whole subset of other items. This is why it would be good to keep it a bit generic and easy to understand. Under this name, you would have several other categories. Make sure that your category names are clear and concise, and avoid duplicates because this will confuse users.

Keep the drop-down menu short

Since some browsers such as those on mobile and tablets cannot fully support dropdown menus, it is more advisable to keep it short with as few options as possible. Having too many will be confusing and overwhelming for customers. We don’t want to lose the customer right when they’re trying to navigate through your store.

We recommend to group similar items together so that you have less items on the dropdown menu and it keeps it easy to look at.

Conclusion

Since you are not physically there to guide potential customers into the right section, your navigation should be simple and as user friendly as possible. Each section should help your customers get on the right path to what they are looking for or need.

You could try to do a couple of FGD tests to see what are the pain points of customers in terms of navigation and how they try to maneuver your website. This will help you categorize your menu items properly and allow you to better develop the right menu.

If you need anymore assistance setting up your Shopify store, developing or designing it, get in touch with your Shopify experts here at Webinopoly.

Here at Webinopoly, we create solutions that can help entrepreneurs like you build and expand your online business. If you need help optimizing your Shopify pages, building or designing it, we are here to help! 

Webinopoly is an Award-Winning Digital Agency and are experts in Design, Setup, Development, and Marketing. Our services range from building your Shopify store to theme customization, website development, migration to Shopify, SEO, and marketing.

Connect with us

If you need building your Shopify website or require eCommerce solutions to be developed, you may call us at 713-805-5888, email us at [email protected], or leave us a message here.

Learn more about Webinopoly

If you’d like to learn more about what we can do or view our portfolio, please click on the links below:

• Explore our services
• See our previous work here