If your shop has many products, you have the extra challenge of making sure your customers can find things easily, whether they’re just browsing your inventory or trying to locate a certain product. Turbo’s “mega menu” feature can help in this regard, by offering a way to present many links clearly in the main navigation area.
Setting up the mega menu requires a few steps; we’ll walk through the process below using our Turbo - Portland demo as an example:
In This Article
- Mega menu video guide
- Step 1: Organize all your products into collections or categories
- Step 2: Menu set up
The first important step will be to organize all your products into collections or categories that make good intuitive sense.
How you organize your products is up to you. However, try to organize products into collections that will make sense to your customers; try to group similar items so that you avoid having too many separate collections with only a few products in them For more general info on how to set up collections, check out these tips from Shopify.
Next you’ll set up your shop’s navigation and make good use of the theme’s “mega menu” feature. Turbo’s mega menu supports multiple columns of submenus, which will appear when hovering over a dropdown “parent” link. In the Portland demo shop, one of these dropdown links is called “Shop”.
Part A: Add the “parent” dropdown link to your main menu
First you’ll add a link to your main menu that will serve as a parent or top-level link for the mega menu. In the demo shop example, this is the “Shop” link. In this particular case we set the Shop link itself to link to a very large Collection called “Shop”, which contains every product in the store. However this top level link doesn’t itself have to link to anything if you don’t want; you can leave it blank simply by choosing “Web Address” and entering “#” as the destination.
Part B: Create the submenu for that parent link
To create a mega-menu drop down that will appear when customers hover over the the top level link in the main menu, you’ll need to create a new menu with the exact same name as the name of the parent link in the main menu. In this example, we created a new separate menu called ‘Shop’.
The links in the Shop menu serve as the headings in the top row of the mega menu. Note that these links can themselves be clickable (linking through to a page or collection) or just serve as headings for the submenus that will appear beneath them (see next step!).
Part C: Create the submenus for the submenu links
In order for the links in this “Shop”’ submenu to each have their own submenus we have to go through the process again, creating 5 more Menus, that are each named EXACTLY like each of the links in the Shop menu (Women’s Apparel, Men’s Apparel, Yoga Mats + Towels etc). Note that it is essential that the names of these new menus match the menu items from the Shop menu.
Each of these menus can in turn have links that link to collections, pages, individual products, etc.
This process would be repeated for the other four items in the Shop menu (they all get their own menu!). It only takes a little time to build and the result is an awesome drop-down mega-menu!
To see it in action, check out our Live Demo version of the Turbo-Portland theme here: https://turbo-theme.myshopify.com/