Mega menus allow visitors to immediately see all categories, rollover interesting ones, and then see drill-down into the appropriate data. The platform offers a great level of interactivity and imagery to help smooth the navigation process.


How to setup mega menu?


  1. Go to Storefront > Mega Menu
  2. Click on Add Menu
  3. Fill the required details in the form

    Block TitleThis is the menu name
    Is header MenuChecked if menu goes in the header
    Width % The % the block  will take up on the Home Page of the Website in the desktop, laptop and tablet versions of the site.  Mobile is rendered as lists.
    Alignment TypeSelect alignment left or right
    Display orderOrder in which it should be displayed on the site
    No. of ColumnThe number of columns the Menu is to be split into.
    LinkURL Slug for the page, where the user will land, if double clicked within the Mega Menu and no other specific link is selected. 
    HTML AttributeThis field take html attribute that you want to assign, can be left as blank
    ChannelYou can control the Channels through which user is browsing example apps, web, phone
    Header ContentHeader content goes here
    Footer ContentFooter content  goes here


  4. After submit it will be shown in the respective menu Header or Footer, example above was created as Header menu

  5. Click create navigation block, you can choose multiple type of navigation block as per your requirement

    Type of BlockDescription
    Simple LinkThis type of navigation block allows you to add simple link to any of the existing product, collections,  or any other URL that exists in the platform.

    Dynamic Category 
    This type of navigation block allows you to select existing categories in the platform
    Product Grid
    This type of navigation block gives you the liberty to add any active stock codes from the site hence you are not restricted to any specific collection or category
    ContentThis type of navigation block allows you add a specific content on the screen and direct the user where ever you want to. 
    Brand ListThis type of navigation block allows you to select existing brand list in the platform
    Dynamic CollectionThis type of navigation block allows you to select existing product collections in the platform


  6. Click Next and Provide the below details per applicable navigation block type

    Block TitleTitle of the specific block
    Width %Defined as a % of the page
    Display OrderDisplay order left to right
    No. of ColumnsNumber of columns within this specific Navigation Block
    CategoryThis enables the use of a Dynamic Category list
    BrandsWhen working on Brand list navigation block
    Stock CodesWill populate if working on the product grid navigation  block
    Content BodyWill populate if working on the content type navigation block


  7. Click Save


Let's see a dynamic collection for example - most of the fields are same just varies with type of navigation block you are working on. After creating a header menu create a navigation block as Dynamic collection

After filling out all required details can be modified anytime later


See how it looks on the site itself: