Embed Size (px)
Citation preview
Last update: 2019/12/26 13:09
Guide for Mega Menu for Magento 2
Apply dynamic and flexible navigation menu to your webstore with Magento 2 Mega Menu extension.Add various types of content right to the menu bar to attract customers’ attention and enhance theirshopping experience.
Adjust your menu display using different layoutsAdd dynamic blocks, videos, images and external linksApply various catchy labelsConfigure the menu without any technical skillsMake your menu mobile friendly
Configuration
To set the general settings of the extension, go to Stores → Configuration → Amasty Extensions→ Mega Menu.
Visual content is available for desktops only, but in mobile version the general submenu dropdownsand color schemes are also displayed.
2019/12/26 13:09 Guide for Mega Menu for Magento 2
Expand the General tab.
Last update: 2019/12/26 13:09
Enabled - set to Yes to activate Mega Menu.
Enabled Sticky Menu - enable to display sticky menu navigation during vertical page scrolling.
Enable Hamburger Menu For Categories - enable this option if you want to hide the categoriesinto a separate menu type.
How does it work?
Three lines at the top left corner will appear.
When you click it, all the categories will drop down.
2019/12/26 13:09 Guide for Mega Menu for Magento 2
So all the categories are nested under the 3 lines. It is useful if you would like to have additionalspace for custom tabs in the top menu bar.
In the Color Settings tab you can customize menu style to match your website design.
Last update: 2019/12/26 13:09
Color Scheme Template - select one of the ready-made templates or choose Custom to adjustcolors manually.
With a handy color-picker tool it is possible to configure the colors for:
Menu Background/Text;Submenu Background/Text;Menu Item Hover;Hamburger Button.
You can also set a custom submenu background image if needed.
Submenu background image sample:
2019/12/26 13:09 Guide for Mega Menu for Magento 2
Menu Items Settings
To adjust the display of default menu items, please go to Catalog → Categories and click thecategory you need.
Last update: 2019/12/26 13:09
Expand the Mega Menu tab.
General Settings
2019/12/26 13:09 Guide for Mega Menu for Magento 2
Submenu Width - set the width of the dropdown tab that will fit your website style.
Full Width - submenu will have the same width as the general menu bar.
Last update: 2019/12/26 13:09
Auto - the width will be set automatically according to the content options.
Custom - this option allows to set the width manually (in pixels).
2019/12/26 13:09 Guide for Mega Menu for Magento 2
Menu Label Text - specify the text of the label to attract customers’ attention to the necessary blockof the menu.
Text/Background color - customize label’s style using color picker tool.
Content
In this tab you can adjust submenu content. The extension allows to add images, videos, CMS blocks,banners, widgets and products. You can arrange elements the way you need using WYSIWYG editor.Also, the extension is fully compatible with Page Builder.
Page Builder Functionality
Page Builder allows to create rich in content pages just in few clicks via handy drag-and-drop function.
Last update: 2019/12/26 13:09
This tool includes various layouts, content and media elements. With the preview mode you can checkthe result and make edits if needed. Each element has its own settings so that you can configure itaccording to your website style and business needs.
Here you can see all available elements:
Check Page Builder User Guide to learn more about the elements and see the variants of Page Builder
2019/12/26 13:09 Guide for Mega Menu for Magento 2
usage.
WYSIWYG Editor
If Page Builder is not installed, it is possible to customize menu bar via WYSIWYG editor.
For example, to make columns you need to insert the table and specify the necessary number ofcolumns, rows and adjust additional settings. You may use the {child_categories_content} variable
Last update: 2019/12/26 13:09
for showing child categories and so on.
For more information, see this WYSIWYG User Guide.Employ Magento 2 Advanced Product Reviews extension to show product reviews right on thenavigation menu and engage customers on their first step of the interaction with your store website.
Amasty MegaMenu Products Widget
Add a special MegaMenu widget to the drop-downs to promote your new, featured or best-sellingproducts right in the menu.
Click Insert Widget in the editor.
Adjust Widget Options according to your business needs.
2019/12/26 13:09 Guide for Mega Menu for Magento 2
Last update: 2019/12/26 13:09
Widget Type - choose Amasty MegaMenu Products widget type.
Title - specify the title of the block that will be displayed to customers.
Block Layout - select the layout for the block: Grid or Slider.
Number of Visible Items - if Slider layout is chosen, set the number of items that will be shown atonce.
Slider Width(px) - adjust the width of the slider to match your Mega Menu configuration.
Slider Autoplay - if Yes, the products will be switched automatically. If No, customers will have toswitch manually.
Slider Autoplay Speed(ms) - set the particular switching speed if needed.
Show Product Options & 'Add to Cart' Button - if Yes, the customers will see product options andwill be able to add a product to cart right from the drop-down.
Number of Products to Display - specify the general number of products you want to be shown ina grid/slider.
Template - Amasty Products Grid Template is chosen by default.
Conditions - set flexible conditions to show the products you need.
To avoid common mistakes while setting the conditions, check this post.
Cache Lifetime (Seconds) - specify the time between the widget updates in seconds. If not set,equals to 86400 seconds (24 hours). To update widget instantly, go to Cache Management and clearBlocks HTML Output cache. Widget will not show products that begin to match the specifiedconditions until cache is refreshed.
You can add the widget to any category or custom menu item.
2019/12/26 13:09 Guide for Mega Menu for Magento 2
Custom Menu Items Grid
With the Mega Menu extension, you can add custom items to the menu bar. To see all additionalitems on a separate grid, go to Content → Amasty Mega Menu → Custom Menu Items.
Last update: 2019/12/26 13:09
Here you can check the items' Title, URL Key, active Status and Sort Order.
Edit or Delete items in the Action column or perform mass actions via Actions dropdown menu.
To create a new menu item, click Add New Custom Item.
New Custom Item
Specify the General Settings and the Content of a new menu tab.
2019/12/26 13:09 Guide for Mega Menu for Magento 2
Last update: 2019/12/26 13:09
Title - fill in the title that will be displayed in the navigation menu.
URL Key - set the URL to redirect customers after clicking the menu item: Custom URL or CMS Page.
CMS Page - select the page to direct customers to. If Custom URL is specified in the option above,set the particular URL.
Status - enable an item for mobile devices, desktops or for both. Disable an item if needed.
Adjust Submenu Width and Menu Label if needed.
Hit the Save button.
Menu Builder
With the extension, you can easily customize the menu items order.
Navigate to Admin Panel → Content → Menu Builder.
Adjust the position of each menu item (both top categories and custom menu items) using handydrag-and-drop functionality.
Frontend Examples
Enrich your site menu bar with unique content.
2019/12/26 13:09 Guide for Mega Menu for Magento 2
Adjust submenu dropdown style according to your website design. Add catchy labels to any item ofthe menu.
Last update: 2019/12/26 13:09
Increase the number of purchases by show reviews in menu with Amasty Advanced ProductReviews for Magento 2.
2019/12/26 13:09 Guide for Mega Menu for Magento 2
Add Magento 2 Improved Layered Navigation to equip your website with a highly flexible verticaland horizontal navigation menu.
Find out how to install the Mega Menu for Magento 2 via Composer.
Rate the user guide from 1 votes (Details)
Rate 0 visitor votes 0 visitor votes 0 visitor votes 0 visitor votes 1 visitor votes
