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.


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?

Leave a comment

Comments will be approved before showing up.


Also in Shopify Theme Blog

Turbocharge your store in time for holiday sales with our newest Shopify theme
Turbocharge your store in time for holiday sales with our newest Shopify theme

by Michael P. Hill September 28, 2016

Time has flown by and the holiday season is fast approaching! What better way to skyrocket your store’s sales and performance with Out of the Sandbox’s latest premium Shopify theme, Turbo?
Read More
Farewell to out of date Out of the Sandbox themes with our new Shopify Theme Updater app
Farewell to out of date Out of the Sandbox themes with our new Shopify Theme Updater app

by Michael P. Hill September 21, 2016

If there’s one necessary evil when it comes to Shopify themes, it’s theme updates.  You can almost hear the collective moan of store owners when you say “theme update.”

Read More
Turbo most wanted: Shopify theme feature requests that came true
Turbo most wanted: Shopify theme feature requests that came true

by Michael P. Hill September 13, 2016

Every week, Out of the Sandbox gets numerous feature requests for our award-winning Shopify themes — and some of the most popular ones have been included in our brand new theme release, Turbo.

Read More
Stay on top of OOTS news!

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