Supported Versions
The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.
In This Article
Using the Mega Menu in the Flex Theme
Flex includes a highly customizable 'Mega Menu' feature to enhance your shop's Navigation! Up to 10 Mega Menus can be enabled within the theme's built-in settings. Each of these mega menus can have up to 6 columns which get added as content blocks through the Theme Editor. The available content block options are: menu, image, mixed, featured product, featured promotion, and empty column.
Mega Menus can be added to any of the Header layout options.
More information about the Flex theme's Header options
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(s) by going into Customize > Theme Settings > Mega Menus > here you can enable 1 - 6 mega menus. Once you have enabled 1 or more mega menus, you will then have access to a '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 'Catalog' menu item, the 'Link title' will need to be named Catalog' 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!
Mega Menu Settings and Configuration
-
Section Settings
The section settings determine the look and layout of the Mega Menu. These settings are divided into three areas: 'mega menu', 'bottom bar' and 'advanced.'
Mega Menu
As mentioned above, you will need to enter a 'link title' that matches the link in the main menu that you want the mega menu to appear under. The 'link title' must match the wording of the main menu link exactly!
If you'd like your columns in the mega menu to have a border as a divider, you can enable the 'show borders' setting. The border color setting is a universal setting found under Theme Settings > Colors > Borders.
You can select the colors for the mega menu background and text within these settings. The 'background' and 'text' settings will apply to all mega menu content blocks except for the 'Featured Promotions,' which will have its own color settings within the content block options.
Bottom Bar
The 'Mega Menu' includes an option to enable a 'Bottom Bar' which is a great place to add promotional text, discount codes, or announcements for your customers to see!
In order to enable the 'bottom bar' you will need to check off the 'show bottom bar' setting.
You can add an 'icon' to your bottom bar that will display to the left of your text. To add an 'icon,' view our Flex Icon List and enter that name in this setting. You can choose between two icon styles within the theme: solid and outline. The icon style can be chosen under Theme Settings > Elements > Icon style.
With the 'text' field, you can add in any promotional text or important announcements for your customers to see!
You can choose to add a 'link' for the bottom bar as well which can be either an internal page or external URL.
The 'base size' setting lets you choose the font size for your text in the bottom bar. The options include 'small,' 'regular' and 'large.' Whichever option you choose will also affect the height of the bottom bar.
You can select the colors for the bottom bar background and text within these settings.
Advanced
The 'Mega Menu' includes an option to add in your own CSS class and Custom CSS.
More information about using the Advanced CSS feature.
In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
-
Content Block Settings
The content block settings are where you configure the columns of your 'Mega Menu' by choosing which content blocks to add! The available content block options are: menu, image, mixed, featured product, featured promotion, and empty column.
Menu
You can add a 'menu' content block which is a great and organized way to display links to your collections in the 'Mega Menu'. You can also add a 'Menu heading link as well if you'd like the heading to lead to its own page. Note: This menu won't show drop-down items.
Image
If you're looking to add just an image, or an image with some text. You can add the 'image' content block. You can fill in the 'image link' field if you'd like the image to be linked, and you can fill in the 'text' area as well which will display below the image. We recommend using a 600 x 600px image size.
Mixed
The 'Mixed' content block lets you add a number of sections into one column. You can enable a top and/or bottom image, text fields and image links, as well as up to 4 additional menus.
Featured Product
If you have a new or special product that you'd like to highlight in the Mega Menu, you can make use of the 'Featured Product' content block. With the 'Featured Product' content block, the featured product image, product title, and price will display. There is a 'Text' field as well where you can enter any additional text.
Featured Promotion
The 'Featured Promotion' content block is a great way to catch your customer's attention, and direct it towards specific content in your shop that you’d like them to see or explore further. In the 'Featured Promotion' content block, you can add an image, text, choose background and text colors, add a button link and label, and choose between your 'primary' and 'secondary' button styles (which are configured under Theme Settings > Buttons).
Empty Column
The final content block option is the 'Empty Column' which is helps to achieve certain layouts and if you're looking for your columns to be more spaced out! Like any of the content blocks, you can drag and re-order within the Theme Editor.
Examples
Example 1
Column 1
- Mixed (2 menus)
Column 2
- Menu
Column 3
- Mixed (Heading/Image/Text)
Column 4 & 5
- Mixed (2 Images/Text)
Example 2
Settings:
- Show bottom bar - enabled
- Icon - heart
- Base size - regular
- Custom CSS added for menu link bottom-border
Column 1
- Featured Promotion
Column 2
- Mixed (2 Menus)
Column 3 & 4
- Image (image link and text added)
Example 3
Settings
- Show borders - enabled
- Show bottom bar - enabled
- Icon - bag
- Base size - regular
Column 1 & 2
- Menu
Column 3 - 5
- Image (image link and text added)
Mobile layout
When viewed on mobile, the columns in the mega menu will display 2 per row. If you have the bottom bar enabled, it will remain at the bottom!