Dropdowns, which are sometimes referred to as flyout or multi-level menus, are a way to provide quick access to dig down multiple levels of navigation from the same navigation bar.
They’re one of the most requested features for online shops, but they’re also one of the trickier things for a developer to build into a Shopify theme.
This is because dropdown menus aren’t natively supported in Shopify, similar to how there’s no way to designate certain collections as “children” or sub-collections of another.
However, Shopify does offer the very useful and flexible link list navigation tool, which is used, in a sort of roundabout way, to create dropdowns on Shopify themes.
Many Shopify themes come pre-built with dropdown menus built in, including all of the themes from Out of the Sandbox. When you select a Shopify theme with dropdown menus already encoded, you’re saving a significant amount of time and frustration.
When considering which Shopify theme to purchase, it’s important to carefully review how the dropdown menus included in it look and function because they can often be tricky to customize or you may have a preference for a particular style over another (e.g. single column vs. double, popout on hover vs. visible and indented, etc.).
It’s not uncommon to find less expensive but lower quality Shopify themes than the ones featured in the official Shopify theme store that take shortcuts in the code that will make its dropdowns much less flexible and easy to manage. Unfortunately, these types of issues are tough to spot from just a preview of the theme, so buying from a reputable theme publisher that Shopify has verified is important.
You’ll also want to take a look at how the dropdown menus appear and behave on mobile devices. Here again, using a theme from an established and reliable publisher can make a huge difference in ensuring your store uses best practices when it comes to mobile navigation.
Dropdown menus are extremely powerful and can make your store easy to use and increase sales, but only if used properly. Here are some things to consider when creating your navigation using dropdowns.
Name that link
When creating a dropdown menu in your store, it’s important to keep in mind that users won’t see the sub-navigation links without hovering over a main one, so titling that one is very important. The name you use should be broad enough to encompass everything underneath it, but not so broad that users can’t determine where to get started to locate what they are looking for.
Keep in mind that many online shoppers are looking for very specific items, so it’s vital that each level of your navigation serves as a sort of signpost to continue “pointing” them in the right direction.
Another thing to keep in mind is that some shoppers may not be familiar with industry-specific terminology that you, as the store owner, probably use every day. As such, it’s important to avoid using those types of terms in navigation when possible, especially at the top level.
Also remember that some categories have crossover — for example, some shoppers might think (correctly or incorrectly) that clothing for a 13-year-old male is under ‘Teens’, while another might think it should be placed under ‘Kids’, and yet another will look for it under ‘Boys’.
Repeating links
To help avoid some confusion and ambiguity created by overlapping collections, it’s always worth considering having the same link in more than one dropdown — in other words, each place a shopper might be inclined to look.
Be careful, however, not to overdo it. Dropdowns that become very, very long have a tendency to look cluttered and overwhelming and may actually do more harm than good. In general, it’s best to edit down the number of links in your sub-menus to a manageable number that still makes it easy for users to locate what they’re searching for.
Speaking of search, it’s also good to keep in mind that users looking for highly specific items may be more likely to use your search tool rather than the navigation menu, either right off the bat or after trying the menus first. Because of this, you’ll want to optimize your product tags to make sure the search results are accurate.
Don’t overdo it
It’s worth repeating: try to keep the number of items in each menu to a reasonable number. If not, you also run the risk of your dropdown menu becoming longer than the height of the browser window, which then requires the user to scroll just to see all of it.
It’s also easier, the farther the user has to move the mouse from the initial navigation element, for the the main menu to “disappear,” which can also cause user frustration.
In some premium Shopify themes, including several from Out of the Sandbox, the links in the dropdown menus can be arranged into two or more columns, which makes them much easier to navigate and scan. This advanced feature is key to avoiding having menus that are too long.
Nested dropdowns
It’s also worth considering whether you will need (and whether your theme supports) only one or multiple tiers of dropdowns; how many layers deep can you reasonably expect users to search for products? Two levels usually suffice, so if you find yourself creating a “staircase” of nested dropdowns, then perhaps re-visit your link groupings to see if you can consolidate some of them.
To implement a nested dropdown in your Out of the Sandbox Shopify theme, you'll need to set up multiple link lists in your Navigation section, and the key thing to remember is to make sure that the name of the nested menu (the 'child') has the exact same name as the 'parent'.
For example, say you had "Home," "Shop" and "Contact Us" in your main menu link list. If you wanted "Shop" to have a dropdown then you'd make a new separate link list called ‘Shop’ and it would have its own links on it, like "Men", "Women", "Kids", etc. Then if you wanted to have another nested menu under “Women”, you'd need another link list called "Women" and that would in turn have its own links on it, like “Dresses”, “Jeans”, “Shoes”, etc.
You can read more on creating dropdowns here.
