Menu & Mega Menu

Note : After creating the mega menu, don't forget to map it in the customizer (refer to Step 3 for further details).

Creating Mega Menu

Creating a mega menu in Shopify involves several steps, including using the Shopify admin panel and possibly some custom code for advanced features

This section helps you to create a Mega Menu with dropdown menu items and Banner Images in the Header.

Mega menu consists of three level links refer to the image below to understand clearly.

Mega Menu

Follow the below steps to create a mega menu.

Step 1: In your Shopify store go to the Content > Menus

Content > Menus

Step 2: Inside the Menu, you can add a new menu or edit the Existing menu, which applies both header and footer.

Step 3: To Add new Menu Click Create Menu.

Step 4: Add a Menu Title and Select the Menu Navigation Page/Product as per your requirements.

Step 5: Add Sub Menu same as Parent Menu.

NOTE: For a clear understanding, click this link to watch the video. (https://nimb.ws/V2bNXCk)

Step 6: Drag and drop the submenu under the parent menu.

Finally, don't forget to click Save menu after adding the menu items.

Menu With Banner

If you wish to add the banner image to the Mega menu kindly follow these steps.

Step1:In your Shopify store go to Online Store > themes > customize

Step 2: In the Header section> Add Block > Menu with banner

Step 3: Add the menu name in the Map item field. To display an image in the mega menu. (Eg: If you want to display the banner image under the Home menu, then add 'Home' in the map item field.)

Row reverse: Enable or disable the toggle button to active row reverse.

Custom width for this block alone: enable the toggle button to activate it.

Custom mega menu width: You can adjust the width of the menu image using the range adjuster.

Step 4: you can add the Image and link to Display an image in the mega menu.

NOTE: After these steps, the result will be displayed like the below image. Shown in the figure below.