Mega Menu

by Admin on Jan 26, 2024

1. What is a mega menu?

The Eurus Shopify Theme offers a powerful Mega Menu feature that allows you to display multiple levels of links, images, or other content and categories in a large and organized layout. This feature is a great way to organize complicated menu structures and is especially useful for large catalogs.

2. How to set up a simple 3-level menu

Steps: 

  • Before you proceed, make sure you have a nested menu in the Online Store > Navigation section of the Shopify admin area. For more information, see How to set up drop-down menus.
  • Open the Theme Editor, and click on the Header section.
  • At Menu -> click the Select menu button to choose the 3-level menu that you want to display.

     

    Note: If you want to display 4-level menus or mega menus, leave this field blank and check the section below.

    3. How to set up a mega menu?

    Eurus theme owns some unique selling propositions that make it stand out:

    • Provide 6 different types of Mega Menus
    • Support up to 4 menu levels (instead of the default Shopify maximum of 3 levels)
    • No need for an app: With Eurus Theme, you can add product and collection imagery, promotional imagery, and link badges to your menus without the need for an app.

    By default, the menu will show when the user hovers over it.

    Note: Logic of combining menu configured in header settings and menu in header blocks:

    • If you set up a menu in both the header setting and the menu blocks (under Header section): The menu setting in header setting is disabled. The level 1 menu will be the name of the menu block. Each new menu block added equals a new menu item to be displayed on the header.
    • If you only set up a menu in the header blocks: The level 1 menu will be the name of the menu block. Each new menu block added equals a new menu item to be displayed on the header.
    • If you don’t set up a menu in both the header setting and the header blocks: No menu is displayed on the header.

    The basic concept of creating a mega menu using the Eurus Theme is to create many submenus and add different menus to each block to create menu items. 

    Here are the steps:

    • Go to Theme Editor and navigate to the Header section
    • Under Header section, there are 6 types of menu blocks for merchants to select (see What are the types of mega menu? for more).
    • To create a mega menu, add different menus to each block to create menu items
    • Remember to fill in the Menu item name and click Save after setting up.

      4. What are the types of mega menu?

      • Tabbed menu: Show submenu in vertical or horizontal tabs 
      • Tree menu: Show items in classical tree menu 
      • Banner menu: Show up to 3 banners inside a menu item 
      • Product menu: Show product cards inside a menu item
      • Blog menu: Show blog posts inside a menu item
      • Simple menu: Style the block to resemble a traditional mega menu, allowing for up to three levels while still including promotions and media elements.
      • Contact menu: Show a contact form together with contact information, Google map inside a menu item

      5. How to add Images to Menu?

      There are 3 menu types that you could add additional images to the menu:

      • Tabbed menu: You could add up to 3 promotion images on the right side in the menu item.

      A promotion image is an image that is used to attract attention or advertise something on a tabbed menu. For example, you can use a promotion image to show a special offer, a discount, a new product, or a featured item on a tabbed menu.

      • Banner Menu: You could add up to 3 banner images.
      • Contact menu: You could add 1 image on the left side in the menu item.

      For details on how to set up mega menu, please refer to our video guide here.

      6. How to show the "See more" link under a menu item?

      “See more” setting in the mega menu helps store owners to link from a menu to a collection or blog. To display a "See more" link under a menu item, follow these steps:

      • First, access the settings in your mega menu under the Header section group. Choose the specific menu item you want to show the "See more" link.
      • Within the configuration options of the selected menu item, locate the fields where you can enter a label (text displayed for the link) and URL (destination link when clicked).
      • Enter an appropriate label, such as "See more" and provide the URL pointing to the desired content, such as a collection or blog page.

      Note that this feature typically only applies to specific menu types, such as Tabbed, Product, Blog, or Simple. Ensure the menu type you're using supports the "See more" link feature.