Mega menu

Mega menu

Mega menu is used to give users a bird's-eye view of all the menus in your store, in rows and columns, so that your store's products can get maximum visibility. 





Benefits

  1. Enhances the quality of your visitor's site navigation
  1. Helps arrange the titles through layout, typography, and images 
  1. User-friendliness can be increased by forming logical groups and categories 
  1. Reduces scrolling as everything is visible at the same time 


  1. Go to Settings > Menus under Customize.
  2. Click New Menu. Provide a menu name and select check box Is this a Mega menu?
  3. Click OK to create a mega menu.


Rows

By default, mega menus have one row. The default row will have four columns. 



To add a new row

  1. Click Add Row at the bottom.
  2. Select the layout and click OK.


To change row layout

  1. Click the layout icon above the row name.
  2. Select the layout design. The row will automatically change to the desired layout. 


Selecting a layout with fewer columns than the current number of columns will push the Menu Items (from the columns being removed) to the end of the column that will remain after transition.

To rearrange row order

Use the arrows provided beside the layout icon to move rows up or down to rearrange as per your wishes.

To delete a row

  1. Click the Delete icon. 
  2. Confirm by clicking Delete once more.


Columns 

Add new menu items

  1. Hover over the column and click Add Item.


Add collections as a menu item

  1. Select Collections from the left panel.
  2. Provide Menu Item Name.
  3. Choose to Show as Text, Heading, or Image. 
  4. Select a collection from the drop-down list. All the available collections in your store will be listed here.
  5. Click Save.


Display images in mega menu

  1. Select Collections from the left panel.
  2. Provide Menu Item Name.
  3. Choose to Show as Image. 
  4. Click Add + icon. You can select existing images, or upload a new image or even select image library. Click Save.
  5. Select Collection from drop-down.
  6. Click Save.

Add products as a menu item

  1. Select Products from the left Panel.
  2. Provide Menu Item Name.
  3. Choose to Show as Text, Heading, or Image. 
  4. Select Product by clicking on the Add (+) icon. 
  5. A list with all products will open. The categories will be listed on the left for easier navigation. Click Add Product.
  6. The added product will be shown. Click Change Product if required.
  7. Click Save.

A menu item will be created for the product page. Clicking on this will redirect your customers to the product page of the linked product.


Add categories as a menu item

  1. Select Categories from the left Panel.
  2. Provide Menu Item Name.
  3. Choose to Show as Text, Heading, or Image. 
  4. Select a Category from the structure. 
  5. Click Save.



Add page as a menu item

  1. Select Page from the left Panel.
  2. Provide Menu Item Name.
  3. Choose to Show as Text, Heading, or Image. 
  4. Select a Page from the list.
  5. Click Save.
  1. Select External Link from the left Panel.
  2. Provide Menu Item Name.
  3. Choose to Show as Text, Heading, or Image. 
  4. Provide External Link URL.
  5. Enable Target toggle to open Page in a new tab.
  6. Click Save.

Add a file as a menu item

  1. Select File from the left Panel.
  2. Provide Menu Item Name.
  3. Use the Upload button to add new files. You can also add a New Directory.
  4. Open Image Library to use stock images.
  5. Select the required file and click Save.


Add blog category as a menu item

  1. Select Blog Category from the left Panel.
  2. Provide the Menu Item Name.
  3. Choose to Show as Text, Heading, or Image. 
  4. Select a Category from the list.
  5. Click Save.



Add text as a menu item

  1. Select Text from the left Panel.
  2. Provide Menu Item Name.
  3. Enable toggle to Show as Heading.
  4. Click Save.



Rearrange menu items between columns

Drag and drop existing menu items to a different column to move them around within different columns. 

Columns cannot be rearranged as a whole.


Edit or Delete menu items

  1. Click More Options [] beside the menu item.
  2. Click Edit to change features of the menu item.
  3. Click Save. 




Delete menu items

  1. Click More Options [] beside the menu item.
  2. Click Delete, then confirm by clicking Delete on the pop-up window.