0

Your Cart is Empty

by Michael P. Hill October 26, 2015

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.

Michael P. Hill
Michael P. Hill

Michael P. Hill is a Shopify, Shopify theme, content marketing, digital marketing and product management expert based in Chicago. Follow him on Twitter at @michaelphill or connect on LinkedIn.

Need Support?

Please don't post support questions or issues as a comment on this thread, as we may not be able to process it in a timely manner. Instead, please visit our Support Center to browse frequently asked questions or submit a support request directly to our team.


1 Response

Stacey
Stacey

July 05, 2016

This article was very helpful when I was creating my drop down menu… I am just having a problem moving products into the drop down collections… any advice or tips on how to do that?


Also in Shopify Theme Blog

Shopify theme shopping advice to ensure you get the design and functionality you need
Shopify theme shopping advice to ensure you get the design and functionality you need

by Michael P. Hill January 16, 2017 0 Comments

Searching for and buying a Shopify theme is exciting — but it also can be confusing and challenging to ensure you get everything you need from your theme investment.
Read More
Section by section: How the newest Shopify theme feature brings flexibility to your theme
Section by section: How the newest Shopify theme feature brings flexibility to your theme

by Michael P. Hill January 04, 2017 0 Comments

Sections are the newest feature of the Shopify theme ecosystem. So, what are sections and how can you use them to create an awesome Shopify store?

Read More
How to turn your passion into a content marketing plan for your Shopify store
How to turn your passion into a content marketing plan for your Shopify store

by Michael P. Hill December 28, 2016 0 Comments

Creating a quality content marketing plan for your Shopify store may seem like a daunting challenge, but it’s actually easy to do if you funnel your passion for your products into your content brainstorming.
Read More
Stay on top of OOTS news!

Subscribe to our mailing list to be notified of theme updates, new releases and more.