Flex Guide: Mega Menu

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.

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!

Section Settings
Content Block Settings

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

Link title
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!

Show borders
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.

Background/Text
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!

Show bottom bar
In order to enable the 'bottom bar' you will need to check off the 'show bottom bar' setting.

Icon
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.

Text
With the 'text' field, you can add in any promotional text or important announcements for your customers to see!

Link
You can choose to add a 'link' for the bottom bar as well which can be either an internal page or external URL.

Base size
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.

Background/Text
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.

CSS Class/Custom CSS
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.