How-to's · Shopify · 3 min read
How to Add a Drop-Down Menu in Shopify
Short answer
Go to Content > Menus, open your main menu, add the items you want inside the drop-down, then drag them underneath a header item so they're indented. Save the menu. Shopify supports up to two levels of nesting under a top-level item, and you can enter # as the link if the header shouldn't go anywhere.
A good navigation menu helps shoppers find what they want in two clicks. Drop-down menus let you organize a larger catalog without stuffing the header with a dozen links.
Before you start
Create the destinations first. You can only link to collections, products, pages and blogs that already exist. If you plan a "Shop" drop-down with "Men," "Women" and "Accessories," make those collections before building the menu.
Steps to create a drop-down menu
- In your Shopify admin, go to Content > Menus. (Older guides mention Online Store > Navigation. Shopify moved menus under Content.)
- Click your Main menu (the one your header uses).
- Choose the item that will be the drop-down header, or click Add menu item to create one, like "Shop."
- If the header shouldn't link anywhere, type # in the "Search or paste a link" field.
- Click Add menu item again and add the first child item (e.g. "Men" linking to your Men collection).
- Drag the child item beneath the header and slightly to the right so it's nested.
- Repeat for every child item.
- Click Save menu.
Open your storefront to check. Most themes show nested items when you hover (desktop) or tap (mobile) the header.
Adding a third level
You can nest one more level: drag an item beneath a child item. For example, Shop > Women > Dresses. Shopify supports two levels of nesting under a top-level item. Some themes turn this into a mega menu with columns; others show it as a fly-out.
Designing a menu people can use
Structure matters more than the mechanics.
- Keep top-level items to seven or fewer. Shopify's own guidance suggests this, and it matches what works for shoppers.
- Name items the way customers think. "Gifts under $50" is clearer than "Curated Selection."
- Put a "Shop all" link first in each drop-down. Headers usually behave as buttons, so customers can't click "Women" itself. Shopify recommends adding the main category as the first child item.
- Don't bury best sellers. If one collection drives most revenue, give it a top-level spot.
- Use the footer menu for policies and info pages. The main menu should be about shopping.
Mobile behavior
On phones, most themes collapse the menu into a hamburger icon with expandable sections. Test:
- Can you open and close each section with your thumb?
- Does the header item open a new page instead of expanding? If so, check its link is #.
- Is the menu too long to scroll comfortably? Trim it.
Mega menus
If you have many categories, a mega menu shows several columns, often with images. Many themes include mega menu options in the header section settings, usually triggered automatically when you nest a third level. If your theme lacks one, consider whether you really need it before installing an app, since menu apps add code and can slow your store.
Troubleshooting
| Problem | Fix |
|---|---|
| Child items appear as top-level items | Drag them further right until they indent |
| Drop-down doesn't open on desktop | Check the theme's header setting for hover vs click |
| Menu changes don't appear | Confirm the header section uses the menu you edited |
| Links go to a 404 | The destination was deleted or its handle changed |
Measure the effect
After changing navigation, check your analytics for collection page views and the share of sessions that reach a product page. Better navigation usually shows up as fewer bounces from the homepage. For more on that, see how to optimize your ecommerce site for conversion, and if your theme feels limiting, how to change themes on Shopify.
Frequently asked questions
How many levels can a Shopify drop-down menu have?
A top-level item can have up to two levels of nested menus, according to Shopify's help center. Most themes display this as a drop-down or mega menu.
How do I make a menu header that isn't clickable?
Enter # in the link field for that header item.
Why don't my nested items show?
Usually the item isn't fully indented under its header. Drag it again so it sits clearly beneath and to the right of the parent.
Sources and further reading
Platform features, prices and policies change. Check the official help pages linked above before you act on a detail that matters to your store.