The mega menu: easy navigation for your shop

by Kristof Maletzke, 16.11.15



With the help of a mega menu, visitors to your shop can find what they are looking for quickly and easily – even if your shop includes lots of categories and sub-pages.

The various ePages shops operated by our merchants could not be more different. While some merchants sell just a single product, others have shops containing a massive selection of product categories and sub-pages. If customers need to work their way through all kinds of sub-sections when navigating the site, it can be a complicated and confusing process. Especially for merchants with such complex shop structures, we therefore offer the “mega menu” option within the ePages software.

How does the mega menu work within the shop?

At first glance, the menu doesn’t look any different from a conventional navigation bar:

megamenu_EN_1

If, however, the visitor moves the mouse pointer over a menu item that includes sub-items, the mega menu will open. The sub-items (pages and categories) are then shown in a hierarchical list inside a horizontal box:

megamenu_EN_2

What are the benefits of a mega menu?

  • If your shop includes a large number of sub-items, the mega menu will make it easier to navigate and create a neat and orderly impression.
  • The additional menu items can all be seen within one view.
  • In contrast to a conventional dropdown menu, the visitor doesn’t need to move the mouse pointer to view more levels within the site.
  • The different levels of the various menu items are clearly visible.
  • Depending on the number of menu items, the visitor will have less need to scroll up and down.

What is the significance of the menu levels?

To understand the way the mega menu works, having some prior knowledge of your shop’s various menu levels can be very useful.

You can assign the pages and categories of your shop to different levels.

The first menu level includes the basic categories and pages. If you sell clothes in your shop, for example, “Men” and “Women” would be appropriate first-level categories.

If, in turn, one of the categories or pages on your first menu levels has a sub-item associated with it, that will be found on the second menu level. For instance, the Men category might contain the sub-categories “Shirts”, “Trousers” and “Footwear”.

As for the third menu level, this might then include two further sub-categories such as “Business” and “Leisure” within the “Shirts” category.

Because this categorisation system contains so many layers, it would be difficult to represent within a normal menu.

How do I incorporate a mega menu within my shop?

1. Certain ePages themes already include the mega menu as standard. To add in a new mega menu, however, you should go to your administration area and select Design and then Quick design.

megamenu_EN_3

2. You can now see a preview of your shop. Within the area of the page in which you want to include the mega menu, click on the plus symbol. You can add the menu in the “Header 2” and “Top” page areas.

megamenu_EN_4

3. Select Mega menu.

megamenu_EN_5

4. Select Insert.

megamenu_EN_6

5. You can now adjust the design settings for your mega menu. Select one of the colour fields in order to specify the relevant colour. You can also specify the font size you want. In the preview area above you can see how the changes affect the menu at any time.

megamenu_EN_7

6. Select Apply to insert the menu.

megamenu_EN_8

7. If necessary, remove the old menu by moving your mouse pointer above it and clicking on the delete symbol.

megamenu_EN_9

The mega menu is now incorporated into your shop.

How do I specify the categories and pages that should be shown in my mega menu?

1. In your shop’s administration area, select Content / Categories and then Content preview.

megamenu_EN_10

2. In the page tree on the left you can now see all of categories and sub-pages of your shop. Select the category or page that you want to edit.

megamenu_EN_11_small

3. Click on Visibility and specify whether this category/page should be visible at all and whether it should be visible in the menu.

megamenu_EN_12

4. Select Apply.

megamenu_EN_14

5. In the multifunction bar, use the arrow symbols under Move page to move the category/page up or down. Use the symbols with the left and right arrows to move the category/page to a higher or lower menu level.

megamenu_EN_13

6. Save your changes.

megamenu_EN_15

7. Select See your site to view and check your new menu as it actually appears in your shop.

megamenu_EN_16

About the author


is Communications Manager at ePages.

Similar posts


Comments


No comments available

Share your opinion


*mandatory

Leave a Reply

Your email address will not be published. Required fields are marked *