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




  • 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.