User Guide for Rootways 2 Mega Menu Extension 2018 Rootways Inc. All Rights Reserved. [email protected] M2 MEGA MENU USER GUIDE Version 1.0.1 Table of Contents Introduction…………………………………………………………………………………. 02 How to use and configure…………………………………………………………………… 04 2.1.1 General Settings……………………………………………………………………. 04 2.1.2 Design................................................................................................................... 05 2.2 Mega Menu Management…………………………………………………………….. 07 2.3 Types of Mega Menu………………………………………………………………… 08 1) Simple Dropdown..................................................................................................... 08 2) Dropdown with Title................................................................................................. 09 3) Half Width................................................................................................................ 11 4) Half Width – with sub category as title..................................................................... 13 5) Full Width................................................................................................................. 16 6) Full Width – with sub category as title.................................................................... 18 7) Tabbing menu........................................................................................................... 20 8) Tabbing – horizontal................................................................................................. 22 9) Products Only............................................................................................................ 24 Responsive Layout of Rootways Mega Menu........................................................................ 26
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
M2 MEGA MENU
USER GUIDE
Version 1.0.1
Table of Contents
Introduction…………………………………………………………………………………. 02
How to use and configure…………………………………………………………………… 04
2.1.1 General Settings……………………………………………………………………. 04
2.1.2 Design................................................................................................................... 05
2.2 Mega Menu Management…………………………………………………………….. 07
2.3 Types of Mega Menu………………………………………………………………… 08
1) Simple Dropdown..................................................................................................... 08
2) Dropdown with Title................................................................................................. 09
3) Half Width................................................................................................................ 11
4) Half Width – with sub category as title..................................................................... 13
5) Full Width................................................................................................................. 16
6) Full Width – with sub category as title.................................................................... 18
7) Tabbing menu........................................................................................................... 20
8) Tabbing – horizontal................................................................................................. 22
9) Products Only............................................................................................................ 24
Responsive Layout of Rootways Mega Menu........................................................................ 26
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
1. INTRODUCTION
Do you know how long customers stay on web pages? Surprisingly, it‟s only 10-20s
on average (NNGroup, 2011) even if you have a variety of products and categories to
show. To not let customers leave so soon, direct them the shortest way to what they are
looking for.
Rootways Mega Menu extension is your solution to create the best sitemap right on
the main navigation.
No technical knowledge required! You can flexibly set up your menu as per your
requirements with Content, Products, Category and everything you want to feature.
You don't need to worry about your site speed. Rootways Mega Menu doesn't affect
your site speed.
Let's take a look at its Features below:
Features:
Easily create different types of menu items by selecting mega menu types.
CMS Static block within mega menu.
Full width and half width menu.
Category icons.
Set number of columns.
Display products.
Add products to cart directly from Mega Menu.
New vertical tabbing menu with user friendly layout.
Easily manages position of content, number of columns, category image size, and
show category image.
Arranging Position of Categories.
Show and hide specific category from mega menu.
Show and hide home icon.
Contact form in menu. Form submitted using Ajax without reloading page.
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
Set Contact Form in Mega Menu and Form is submitted using Ajax without loading
page.
Responsive.
Easy to install, configure and use.
Support by Rootways - any questions we are here to help you.
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
2. HOW TO USE AND CONFIGURE
This section will guide you to configure Rootways Mega Menu Extension and how to use
different layout with different categories. It's very easy and fast!
You have to manage Mega Menu from two places, first one from Configuration setting and
second one from Category section.
2.1 General Settings:
2.1.1 Settings:
This section will show you how to manage Mega Menu from Configuration settings.
Log in to Admin Panel and then click STORES Configuration ROOTWAYS
EXTENSIONS Mega Menu. Below is the Screen shot for Mega Menu Settings.
Admin: Configuration Settings for "Mega Menu"
The detailed description of each setting is as below:
Enable: Enable/Disable Mega Menu using this setting. If it is disabled, then you can
see default Magento menu at front end side.
License key: Enter License key that was sent to you by us in the email.
Show Home link in Menu: Show/Hide Home link in Mega Menu.
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
Show Contact Form in Menu: If select “No” then contact form gets hidden from
mega menu. If select “Only Contact Form” then display contact form only without
content. If select “Form with Content” then display contact form with content.
Contact Us Menu Content: If selected “Form with Content” for above option then you
can see this option. Add content of mega menu contact form from here.
Custom Link: You can add custom links to mega menu with dropdown at specific
position.
Top Menu Alignment: Decide whether you want to display menu to left, right or
center align.
Show Top Level Categories Icon: If set to “Yes” then you can see top category icon
on mega menu.
Show View More: If you want to add “View More” link then set “Yes”, otherwise
“No”.
Add View More After: If set “Yes” for above option then this option will be visible. If
your website has 20 categories and you want to display first 10 categories only in
mega menu and display other remaining categories under View more then add here
10.
Delay Dropdown Hover: Set “Yes” if you want delay in mega menu dropdown.
Delay Second: Add delay second of dropdown.
2.1.2 Design:
From this section you can change layout, colors, font, etc of mega menu.
Admin: Configuration Design for "Mega Menu"
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
2.2 Mega Menu Management:
This section will guide you how to manage Mega Menu from category section. Go to
Admin PRODUCTS Categories. Over here you can see New “Rootways Menu” tab
is created using this extension.
Rootways Menu: This tab has options to display Menu as per your requirements. When
you first open this tab of any category, there is no option of "Mega Menu Type" selected.
Note: You must have to select 'Mega Menu Type' option with each and every main
category of your website. No need to select for sub categories of main category, e.g. in
below screen there are 12 main categories (Highlighted with arrow are main categories) and
you only need to select 'Menu Type' with these main categories.
There are more than 11 types of Mega Menu and which will cover your entire required
navigation menu. The types of Mega Menu are as follows:
1. Simple Dropdown
2. Dropdown with Title
3. Dropdown with Mega Layout
4. Half Width
5. Half Width – with sub category as title
6. Full Width
7. Full Width – with sub category as title
8. Tabbing menu.
9. Tabbing – horizontal
10. Multi-Tabbing
11. Products only
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
2.3 Types of Mega Menu:
Read about each Menu type in detail to know which type of menu matches your
requirement and how it works.
1) Simple Dropdown:
This is simple dropdown menu, with this menu you can see tree of categories with 4th
level of categories that means it expands to sub-sub-sub categories.
Below are detail descriptions on each options of this menu type.
Dropdown Position: Whether open dropdown at left side or right.
Show Category Image: Whether to show category image or not.
Mega Menu Category Image: upload the image from here if „Yes‟ is selected for the above option.
Category Image Width: Add the Category Image Width.
Category Image Height: Add the Category Image Height.
Label Color: Add a suitable color for the label as per your requirement.
Label Text: Add a suitable text for the label.
Custom Class: Add a custom class for the menu.
Admin: Menu Type= "Simple Dropdown"
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
Front side: Result of Menu Type= "Simple dropdown"
2) Dropdown with Title:
This is a dropdown menu having the functionalities same as the simple dropdown but the
only difference is in the layout. The category title will be displayed.
Below are detail descriptions on each options of this menu type.
Dropdown Position: Whether open dropdown at left side or right.
Show Category Image: Whether to show category image or not.
Mega Menu Category Image: upload the image from here if „Yes‟ is selected for the above option.
Category Image Width: Add the Category Image Width.
Category Image Height: Add the Category Image Height.
Label Color: Add a suitable color for the label as per your requirement.
Label Text: Add a suitable text for the label.
Custom Class: Add a custom class for the menu.
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
Admin: Menu options for "Dropdown with title"
Front side: Result of Menu Type= "Dropdown with Title"
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
3) Half Width:
Half Menu is for less sub categories. This dropdown displays in half width of navigation
showing the sub categories. This is suitable for those categories that have few sub
categories.
Below are detail descriptions on each options of this menu type.
Sub-category Columns: Choose the number of columns for the Sub-categories.
Dropdown Position: Whether open dropdown at left side or right.
Left Side Content Block: Add the content to be displayed on Left side Block.
Left Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the
suitable width for the Left Side Block.
Right Side Content Block: Add the content to be displayed on Right side Block.
Right Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the
suitable width for the Right Side Block.
Header Content Block: Add the content to be displayed on Header block.
Footer Content Block: Add the content to be displayed on Footer block.
Show Category Image: Whether to show category image or not.
Mega Menu Category Image: upload the image from here if „Yes‟ is selected for the above option.
Category Image Width: Add the Category Image Width.
Category Image Height: Add the Category Image Height.
Label Color: Add a suitable color for the label as per your requirement.
Label Text: Add a suitable text for the label.
Custom Class: Add a custom class for the menu.
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
Admin: Menu options for "Half Width"
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
You can show Category image (as icon) with each sub-categories of this menu type.
Front side: Result of Menu Type= "Half Menu with category image"
4) Half width – with sub- category as title:
This menu is displayed in half width with sub- categories as titles. This is suitable for
those categories only having sub categories and sub-sub categories.
Below are detail descriptions on each options of this menu type.
Sub-category Columns: Choose the number of columns for the Sub-categories.
Dropdown Position: Whether open dropdown at left side or right.
Left Side Content Block: Add the content to be displayed on Left side Block.
Left Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the
suitable width for the Left Side Block.
Right Side Content Block: Add the content to be displayed on Right side Block.
Right Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the
suitable width for the Right Side Block.
Header Content Block: Add the content to be displayed on Header block.
Footer Content Block: Add the content to be displayed on Footer block.
Show Category Image: Whether to show category image or not.
Mega Menu Category Image: upload the image from here if „Yes‟ is selected for the above option.
Category Image Width: Add the Category Image Width.
Category Image Height: Add the Category Image Height.
Label Color: Add a suitable color for the label as per your requirement.
Label Text: Add a suitable text for the label.
Custom Class: Add a custom class for the menu.
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
Admin: Menu options for "Half Width with sub- category as title"
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
Front side: Result of Menu Type= "Half Width with sub- category as title"
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
5) Full Width:
This menu is displayed in half width with sub- categories as titles. This is suitable for
those categories only having sub categories and sub-sub categories.
Below are detail descriptions on each options of this menu type.
Sub-category Columns: Choose the number of columns for the Sub-categories.
Dropdown Position: Whether open dropdown at left side or right.
Left Side Content Block: Add the content to be displayed on Left side Block.
Left Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the
suitable width for the Left Side Block.
Right Side Content Block: Add the content to be displayed on Right side Block.
Right Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the
suitable width for the Right Side Block.
Header Content Block: Add the content to be displayed on Header block.
Footer Content Block: Add the content to be displayed on Footer block.
Show Category Image: Whether to show category image or not.
Mega Menu Category Image: upload the image from here if „Yes‟ is selected for the above option.
Category Image Width: Add the Category Image Width.
Category Image Height: Add the Category Image Height.
Label Color: Add a suitable color for the label as per your requirement.
Label Text: Add a suitable text for the label.
Custom Class: Add a custom class for the menu.
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
Admin: Menu options for "Full Width"
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
Front side: Result of Menu Type= "Full width"
6) Full width – with sub- category as title:
This menu is displayed in half width with sub- categories as titles. This is suitable for
those categories only having sub categories and sub-sub categories.
Below are detail descriptions on each options of this menu type.
Sub-category Columns: Choose the number of columns for the Sub-categories.
Dropdown Position: Whether open dropdown at left side or right.
Left Side Content Block: Add the content to be displayed on Left side Block.
Left Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the
suitable width for the Left Side Block.
Right Side Content Block: Add the content to be displayed on Right side Block.
Right Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the
suitable width for the Right Side Block.
Header Content Block: Add the content to be displayed on Header block.
Footer Content Block: Add the content to be displayed on Footer block.
Show Category Image: Whether to show category image or not.
Mega Menu Category Image: upload the image from here if „Yes‟ is selected for the above option.
Category Image Width: Add the Category Image Width.
Category Image Height: Add the Category Image Height.
Label Color: Add a suitable color for the label as per your requirement.
Label Text: Add a suitable text for the label.
Custom Class: Add a custom class for the menu.
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
Admin: Menu options for "Full Width with sub- category as title"
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
Front side: Result of Menu Type= "Full Width with sub- category as title"
7) Tabbing Menu:
It displays Mega Menu feature with vertical tab of category. This is an extra ordinary
feature of Mega Menu ever used with Magento Websites.
Below are detail descriptions on each options of this menu type.
Sub-category Columns: Choose the number of columns for the Sub-categories.
Dropdown Position: Whether open dropdown at left side or right.
Left Side Content Block: Add the content to be displayed on Left side Block.
Left Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the
suitable width for the Left Side Block.
Right Side Content Block: Add the content to be displayed on Right side Block.
Right Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the
suitable width for the Right Side Block.
Header Content Block: Add the content to be displayed on Header block.
Footer Content Block: Add the content to be displayed on Footer block.
Show Category Image: Whether to show category image or not.
Mega Menu Category Image: upload the image from here if „Yes‟ is selected for the above option.
Category Image Width: Add the Category Image Width.
Category Image Height: Add the Category Image Height.
Label Color: Add a suitable color for the label as per your requirement.
Label Text: Add a suitable text for the label.
Custom Class: Add a custom class for the menu.
Note: No need to select "Show Category Image" because with this category we take category image by default. So please
add category images to every sub-sub category for better layout.
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
Admin: Menu options for "Tabbing"
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
Front side: Result of Menu Type= "Tabbing"
8) Tabbing - Horizontal:
It displays Mega Menu feature with horizontal tab of category. This is an extra ordinary
feature of Mega Menu ever used with Magento Websites.
Below are detail descriptions on each options of this menu type.
Sub-category Columns: Choose the number of columns for the Sub-categories.
Dropdown Position: Whether open dropdown at left side or right.
Left Side Content Block: Add the content to be displayed on Left side Block.
Left Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the
suitable width for the Left Side Block.
Right Side Content Block: Add the content to be displayed on Right side Block.
Right Side Block Width: If “Do Not Show Content” is selected then block will not visible or else choose the
suitable width for the Right Side Block.
Header Content Block: Add the content to be displayed on Header block.
Footer Content Block: Add the content to be displayed on Footer block.
Show Category Image: Whether to show category image or not.
Mega Menu Category Image: upload the image from here if „Yes‟ is selected for the above option.
Category Image Width: Add the Category Image Width.
Category Image Height: Add the Category Image Height.
Label Color: Add a suitable color for the label as per your requirement.
Label Text: Add a suitable text for the label.
Custom Class: Add a custom class for the menu.
Note: No need to select "Show Category Image" because with this category we take category image by default. So please
add category images to every sub-sub category for better layout.
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
Admin: Menu options for "Tabbing Horizontal"
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
Front side: Result of Menu Type= "Tabbing Horizontal"
9) Product Only:
This Mega Menu displays Products only. It can be used to feature Best selling Products,
Products with Special offer. User is redirected to Product detail page or Product can be
added to Cart directly from mega menu. (Only simple Product can be add to cart)
To display Product under 'Products only' Mega Menu just create Category with any name
(in given example we take Best Seller) then add products under this category and select
Menu Type = "Products only" and you can see all products in Mega Menu under this
category.
Below are detail descriptions on each options of this menu type.
Show Category Image: Whether to show category image or not.
Mega Menu Category Image: upload the image from here if „Yes‟ is selected for the above option.
Category Image Width: Add the Category Image Width.
Category Image Height: Add the Category Image Height.
Label Color: Add a suitable color for the label as per your requirement.
Label Text: Add a suitable text for the label.
Custom Class: Add a custom class for the menu.
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
Admin: Menu options for "Products only"
Front side: Result of Menu Type="Products Only"
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
Responsive Layout of Rootways Mega Menu
Responsive Layout of Rootways Magento 2 Mega Menu is adaptive to all screen
resolutions whether it is Mobile or Tablet.
Have a look at some of the screen shot of Responsive Magento 2 Mega Menu.
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
Tablet screen resolution.
User Guide for Rootways 2 Mega Menu Extension
2018 Rootways Inc. All Rights Reserved.
That's how easy it is to use Magento 2 Mega Menu by Rootways. Please contact us for any
queries regarding Magento and custom web-development of Ecommerce websites.
Our Website: https://rootways.com/
Our Shop: https://rootways.com/shop/
Email: [email protected]
Phone: 1-855-766-8929
Our team is working on the newer version of Rootways Mega Menu with an extra ordinary feature that you've never seen
with any extension!!!
------------------------- THANK YOU -------------------------
Related Documents
