NAVIGATION - Configuring mega-menu

In addition to standard dropdown menus, all our themes comes with a mega-menu feature. A mega-menu allows to show dropdown menu in a more elaborate and visual way. While the setup is pretty much the same for all our themes, the instructions slightly differ from theme to theme.

To read the appropriate instructions, please select your theme below.

Prestige mega-menu allows you to create several columns, as well as showcasing up to two images:

1

First, you will need to define your menu structure by creating drop-down using the native Shopify menu interface. You can learn more on how to create menu and dropdown by  following the official Shopify documentation. In order to properly use mega-menu, you will need to set up a three-levels structure. You can see below an example of how the previous navigation structure looks like in Shopify:

If you were using an older theme, your structure of menus may be different. In the past, creating drop-down menus required to create many menus with matching names. However, our theme Prestige only support the new way to setup nested menus. You therefore need to make sure that the whole hierarchy of links is completely contained within your main menu, as in the above screenshot.

2

By default, the theme will display your dropdown menu in a rather traditional way. To transform them into a mega-menu, open the theme editor and and click on the "Header" section:

3

Scroll to the bottom and click on the "Add mega menu" button:

4

In the "Mega menu" setting, simply enter the name of the menu item that contains the mega-menu (this means that the name entered in "Menu item" must match the name of one of the first-level items list). For instance, in our example, the mega-menu is contained within the "Shop" link, so we simply need to enter "Shop":

You can optionally upload up to two images for each mega-menu.

5

Finally, make sure to click on "Save" button in the theme editor.

Warehouse mega-menu allows you to create several columns, as well as showcasing one image:

1

First, you will need to define your menu structure by creating drop-down using the native Shopify menu interface. You can learn more on how to create menu and dropdown by  following the official Shopify documentation. In order to properly use mega-menu, you will need to set up a three-levels structure. You can see below an example of how the previous navigation structure looks like in Shopify:

If you were using an older theme, your structure of menus may be different. In the past, creating drop-down menus required to create many menus with matching names. However, our theme Warehouse only support the new way to setup nested menus. You therefore need to make sure that the whole hierarchy of links is completely contained within your main menu, as in the above screenshot.

2

By default, the theme will display your dropdown menu in a rather traditional way. To transform them into a mega-menu, open the theme editor and and click on the "Header" section:

3

Scroll to the bottom and click on the "Add mega menu" button:

4

In the "Mega menu" setting, simply enter the name of the menu item that contains the mega-menu (this means that the name entered in "Menu item" must match the name of one of the first-level items list). For instance, in our example, the mega-menu is contained within the "Hightech & Computers" link, so we simply need to enter "Hightech & Computers":

You can optionally fill the other settings to add a featured image.

5

Finally, make sure to click on "Save" button in the theme editor.

Trademark mega-menu allows you to show second level menu items using a featured image:

Please note that when this mode is used, only one level is possible. If you need two levels, you will need to stick with the standard dropdown menus.

1

In newest version of Trademark (1.7.1 and higher), you first need to create your main menu with the desired links hierarchy. Here is what our demo store's example menu would look like:

The mega-nav in Trademark only support one level of links. Additional nested links are ignored (for instance, if you add a third level link that is the children of "Headphones", it will be ignored and not rendered).

For best results, we would recommend you to have between 3 and 5 links in the mega-nav. Also, you should need to make sure that your links within the mega-nav are only pointing to either products, collections or blog posts, because those are the only elements for which we can pull an image.

2

Next, open the Theme Settings, and click on the "Header" section:

Scroll to the bottom, and click on the button "Add mega-menu". Finally, simply enter the name of the main menu element that should have the mega-menu applied. In our example, because we want to have the mega-menu for the "Catalog" item, we simply need to enter "Catalog":

Kagami mega-menu allows you to create several columns, as well as showcasing one image:

1

First, create a dropdown menu in the Shopify menu section. You can learn more on how to create drop-down menu by following the Shopify official documentation by clicking here.

Here is an example of a menu that mimic our demo store's menu (truncated for simplicity):

For best results, we would recommend a maximum of three columns for a mega-menu.

2

Next, open the theme editor and click on the "Theme settings" tab, and select the "Navigation" section:

3

Make sure that the navigation mode is set to "Horizontal" (mega-menu is not available of the sidebar navigation):

4

Scroll down until the "Horizontal navigation" part. For the "Mega-menu" setting, enter the name of the menu that holds the mega-menu. In our example, the mega-menu is displayed after clicking the item "Store", so we simply need to enter the word Store into this setting, as shown below:

5

Save.

Focal mega-menu allows you to create several columns, as well as showcasing one image:

1

In newest version of Focal (5.1.1 and higher), you simply need to create the desired nested links hierarchy. Here is what our demo store's example menu would look like (for simplicity, one the first column is displayed):

You need to make sure that the link hierarchy you build start at the main menu (which is the menu called "Main Menu" by default - unless you have manually changed the menu to another one -). This means that the whole mega-menu structure requires one and only one menu (the main one).

As you can see, we have simply created links hierarchy that looks like our mega-nav. The second level ( Clothes in this example) is used as the columns name, while the third level links are the links of the given column.

2

Next, open the theme settings and click on the "Header" section:

Scroll down until the "Mega-navigation" sub-section. Simply enter the name of the main menu element that should have the mega-menu applied. In our example, because we want to have the mega-menu for the "Store" item, we simply need to enter "Store":