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?
- Go to Storefront > Mega Menu
- Click on Add Menu
- Fill the required details in the form
Block Title This is the menu name Is header Menu Checked 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 Type Select alignment left or right Display order Order in which it should be displayed on the site No. of Column The number of columns the Menu is to be split into. Link URL Slug for the page, where the user will land, if double clicked within the Mega Menu and no other specific link is selected. HTML Attribute This field take html attribute that you want to assign, can be left as blank Channel You can control the Channels through which user is browsing for e.g. : apps, web, phone Header Content Header content goes here Footer Content Footer content goes here
- After submitting it will be shown in the respective menu Header or Footer, example shared above was created as Header menu
- Create navigation block : System allows you to choose multiple types of navigation block as per your requirement.
Type of Block Description Simple Link This 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.
This type of navigation block allows you to select existing categories in the platform Product GridThis 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 Content This type of navigation block allows you add a specific content on the screen and direct the user wherever you want. Brand List This type of navigation block allows you to select existing brand list in the platform Dynamic Collection This type of navigation block allows you to select existing product collections in the platform
Click Next and provide below details as per applicable navigation block type
Block Title Title of the specific block Width % Defined as a % of the page Display Order Display order left to right No. of Columns Number of columns within this specific Navigation Block Category This enables the use of a Dynamic Category list Brands When working on Brand list navigation block Stock Codes Will populate if working on the product grid navigation block Content Body Will populate if working on the content type navigation block
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: