Mega menus allow visitors to immediately see all categories, rollover interesting ones, and further drill-down into the appropriate data. The platform offers a great level of interactivity and imagery to help smoothen 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 for e.g. : apps, web, phone
    Header ContentHeader content goes here
    Footer ContentFooter content goes here


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

  5. Create navigation block : System allows you to choose multiple types 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 wherever you want. 
    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 below details as 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.

Fill up all required details. System allows to modify these details as per the requirement later as well.


See how it looks on the site itself: