Supported Versions
The details shared here apply to the most recent version of Turbo. To keep your theme up to date, check out this helpful document.
In This Article
Setting up the Mega Menu
Turbo comes with the ability to create up to five advanced mega menu layouts. Each of these mega menus can have up to five columns of content. Within each column, you will have the ability to configure 'Top content,' 'Navigation,' and 'Bottom content' which includes:
- An optional block of text at the top and/or bottom of the column
- An optional image of your choice with optional link and caption at the top and/or bottom of the column
- Up to four separate menus of your choice
The Mega Menu is primarily configured in the Theme Editor, however, to get started, you'll need to create a menu (or menus) in the Navigation area of your storefront from your Shopify Admin:
In your Theme Editor you can then enable the mega menu/menus by going into Customize > Theme Settings > Mega Menus > here you can enable 1 - 5 mega menus.
Once you have enabled 1 or more mega menus, you will then have access to the 'Mega Menu' tab under Sections:
For each mega menu you've enabled, enter a 'Link title' that matches the link in the main menu that you want the mega menu to appear under.
For example, if you want your mega menu to appear under the 'Our Shop' menu item, the 'Link title' will need to be named 'Our Shop' as well! You can then add columns to your mega menu by clicking the 'Add column' button.
Important: the 'Link title' must match the wording of the main menu link exactly!
Note: Only up to 5 mega menus can be enabled. If you would like more than 5, it will require additional development work to achieve! For additional development inquiries, we have a list of Shopify Experts who can help!
Mega Menu Settings
The content settings in are for configuring each column in the Mega Menu. In each column, you can configure 'Top Content,' 'Navigation,' and 'Bottom Content'. All of these are optional!
Top Content
The 'Top Content' area includes a 'text area,' 'image,' 'image caption,' and 'image link':
Navigation
The 'Navigation' area includes the option to add up to four menus! For each menu, you can add a link to the title of the menu as well:
Bottom Content
The 'Bottom Content' area is similar to the 'Top Content' except that it will appear at the bottom of the column. It includes 'image,' 'image caption,' 'image link,' and 'text area' options:
Examples
-
Demo Shop Examples
Here's how we set up the 'Mega Menu' in each of our demo shops for Turbo!
-
Portland
Settings
Column 1Top Content:
Image
Image caption
Image link
Columns 2, 3 & 4Navigation:
Menu 1 & Menu 1 link
Menu 2 & Menu 2 link
Column 5Top Content:
Image
Image caption
Image link
-
Seoul
Settings
All 4 ColumnsTop Content:
Image
Image caption
Image link
Settings
Column 1Navigation:
Menu 1
Columns 2 - 5Top Content:
Image
Image caption
Image link
-
Florence
Setting
Column 1Bottom Content:
Text area
Columns 2 - 4Top Content:
Image
Image caption
Image link
Column 5Image
Settings
Column 1Bottom Content:
Text area
Columns 2 - 4Top Content:
Image
Image caption
Image link
Column 5Navigation:
Menu 1
-
Chicago
Settings
Column 1Top Content:
Image
Column 2Navigation:
Menu 1 & Menu 1 link
Column 3Navigation:
Menu 1 & Menu 1 link
Menu 2 & Menu 2 link
Column 4 & 5Top Content:
Image
Image caption
Image link
-
Dubai
Settings
Column 1Top Content:
Image
Image caption
Image link
Column 2 - 5Navigation:
Menu 1 & Menu 1 link
-
Tennessee
Settings
Column 1Top Content:
Image
Image link
Column 2Navigation:
Menu 1 & Menu 1 link
Column 3Top Content:
Image
Image link
Column 4
Navigation:
Menu 1 & Menu 1 link
-
-
Additional Examples
Example 1
Settings
Column 1 & 2Navigation:
Menu 1
Column 3Bottom content:
Image
Image caption
Example 2
Settings
Column 1 & 2Top content:
Image
Image caption
Image link
Mobile Layout
When viewed on a mobile device, the columns in the 'Mega menu' will stack vertically. All of the menus added to the 'Mega menu' will display as drop-down menus:
