How to setup Mega Menu - ArenaThemes

To install Navigation with Mega Menu for website. You must first initialize the Main Menu. After logging in to Shopify's Shop Dashboard you can go to the Online Store> Navigation > Add menu. 

Refer to the instructions at https://help.shopify.com/manual/sell-online/online-store/menus-and-links.

For example, on the product demo, we created three navigation menus: Features (Mega Menu 1), Perfume (Mega Menu 2), Blog (Mega Menu 3). Each of this navigation will be used for each mega menu in the next section

Demo: https://perfomy-theme.myshopify.com/

Step 1. Creat Main Menu

• Add 3 Drop-down Menu: Features, Perfume, Blog. More detail about Add drop-down menu could found here: https://help.shopify.com/manual/sell-online/online-store/menus-and-links#create-a-drop-down-menu
  Sub-menu: Mega Menu 1, Mega Menu 2, Mega Menu 3 will not display when you enable Mega Menu so you could link it to anywhere you want (May be Homepage)

• Go to Online Store > Theme > Customize Theme.  At  General Setting > Header Go to NAVIGATION - MENU select Main menu for your website

Step 2. Creat Mega Menu Navigation

• Create new Navigation use the same name as Mega Navigation 1:  Features; Mega Navigation 2:  Perfume; Mega Navigation 3: Blog.
  The configuration in the form as follows:

• Go to Customize Theme > General settings > Mega Menu to enable Mega Menu option
• You have 3 Mega Menus: Mega Menu #1, Mega Menu #2 & Mega Menu #3 (May vary depending on the theme you purchase)

Step 3. Add Mega Menu (Navigation) Content

Follow the steps below to setup Mega Menu :

• Go to Mega Menu #1 (or Mega Menu #2, #3) > Menu item and select the Mega Menu Navigation which you created in Step 2

• Each Megamenu will consist of 2 blocks (2 rows). Each block will have a width divided into 12 grid columns. 
• The content of Block 1 supports splitting up to 4 columns supporting the display of link menus (menu item, multiple menu items refer https://help.shopify.com/manual/sell-online/online-store/menus-and-link), Product items link, or image with a link. 
• The content of Block 2 supports up to 2 columns, supports image display with link Depending on the mega menu structure you want to set, you can customize the width of the columns to your liking (3/12, 4/12, 6/12, etc ...).

• Setting Content
  • For each Mega Menu, you can have up to 4 columns 
  • Each column, you can choose the Content Components and input the width for this column. The Content Components are
    • Menu item
    • Multiple menu items
    • Product item
    • Image
    • None.

• IF Content Components is Menu item
  • Step 1: Go to Navigation > click Add menu to create a menu which you want to set is Mega Menu
  • Step 2: If you choose the Content Components is Menu item, please input a title in the Title field and choose a menu item in the Menu item field.

• IF Content Components is Multiple menu items
  • If you choose the Content Components is Multiple menu items, you need to create an intermediate menu. With intermediate menu, you can use a lot of menus in a column. For example, you want to display 2 menu items: "Page Templates" and "Collection Templates" in a column
    • Step 1: Go to Navigation > click Add menu to create 2 Menus with names are Page Templates and Collection Templates

• Step 2: Go to Navigation > click Add menu to create the intermediate menu with a name such as  Megamenu-Col4. It contains 2 menus: Pages Templates, Collection Templates

• IF Content Components is Product item
  • If you choose the Content Components is Product item, please input title in the Title field and choose a product item in the Product item field.

IF Content Components is Image

• If you choose the Content Components is Image, please input a title in the Title field, an image in the Image item field and link in the Image link field.