Mega Menu
USER GUIDE
(Version 1.0.1)
MAGENTO 2
S77217
Confidential Information NoticeCopyright 2017 All Rights Reserved. Any unauthorized reproduction of this document is prohibited.This document and the information it contains constitute a trade secret of ZERO-1and may notbe reproduced or disclosed to non-authorized users without the prior written permission fromZERO-1. Permitted reproductions, in whole or in part, shall bear this notice.
Table of contents
INTRODUCTION
SETUP i - Maximum Visible Menu Depth ii - Column Count iii - Custom Block Width (%)
ADDING CUSTOM CONTENT i - Getting The Category ID ii - Injecting Custom Content Into The Mega Menu iii - Custom Block Width (%) Configuration
USING MAGENTO FEATURES
ZERO-1 Mega Menu | Magento 2 | Version 1.0.1
IntroductionThe Zero1 Mega Menu module for Magento 2 is a simple yet powerful extension, which enablesyou to create a better UX whilst providing the ability to inject powerful marketing material intoyour menu.
Unlike other modules, the Zero1 Mega Menu doesn’t require you to change your categorysetup or promotional material; it simply gives you the flexibility to add content into your menuto attract your users to make that all important sale.
As this module uses default Magento functionality at its core, you’re not restricted to whichfeatures or marketing material you decide to inject into your navigation (examples are givenfurther in this document).
It’s fully responsive and east to setup and maintain.
ZERO-1 Mega Menu | Magento 2 | Version 1.0.1
SetupOnce you have installed the module, go to your admin panel and navigate to...Stores > Settings > Configuration > Catalog > Catalog
Maximum Visible Menu Depth allows you to choose how many levels of categories youwant to display. We recommend 2 for UX reasons; however, you have the option ofshowing 1, 2 or 3 as shown in the following images.
Maximum Visible Menu Depth
Visible Menu Depth = 3
ZERO-1 Mega Menu | Magento 2 | Version 1.0.1
Visible Menu Depth = 2
ZERO-1 Mega Menu | Magento 2 | Version 1.0.1
Visible Menu Depth = 1
Column Count = 4
The column count is simply how many columns you would like the categories to split into.You have the option of 2, 3, 4 or 5. Examples are shown in the following images.
Column Count
Please read the next section on adding custom content before changingthis setting. Once done, please continue to the ‘Custom Block Width (%) Configuration’ section.
Custom Block Width (%)
ZERO-1 Mega Menu | Magento 2 | Version 1.0.1
Column Count = 3
Adding Custom ContentAdding custom content inside the mega menu is simple. Here we use default Magento CMSstatic blocks alongside the ID of the category you would like to inject the custom content into.
First off, choose the category you would like your custom block to show in. In this example,we want to display a banner in the Men’s category of the menu...
To get the ID of the category, you can either hover over the selected category in your adminpanel, or inspect the element on the frontend as shown in the following examples
You can see the category ID for men’s is 11
Select the category andhover over it. You’ll seethe URL at the bottom ofthe page contains the ID
ZERO-1 Mega Menu | Magento 2 | Version 1.0.1
Getting The Category ID
Injecting Custom Content Into The Mega Menu
Once we have our category ID, we can now create the static block to inject the content insidethe menu.
Navigate to Content > Elements > Blocks
Add a new block. Give it a name and assign it to the relevant store view.
The block identifier name must follow these rules...
mega_menu_custom_[category_ID]_[position]
POSITION OPTIONS:top, right, bottom
In this example, we want to display a banner in the men’s category of the mega menu so thename for our block is...
mega_menu_custom_11_bottom
Add your desired contents inside the block and you will see this on the frontend as shown here...
ZERO-1 Mega Menu | Magento 2 | Version 1.0.1
Custom Block Width (%) Configuration
You can create upto 3 blocks per category; top, right and bottom as shown here...
This setting comes into play when you’re adding custom blocks that are positioned to the right.In the following example, you see there is a custom block inside the custom menu(Shop Sale Products banner), which is positioned to the right.
The width of this block is defined using the Custom Width Block (%) setting in admin.In the above example, the ‘Custom Block Width (%)’ is set to 30, meaning the bannertakes up 30% of the menu space and the categories will automatically take up the remaining 70%.
In the following example, we set it to 50...
ZERO-1 Mega Menu | Magento 2 | Version 1.0.1
ZERO-1 Mega Menu | Magento 2 | Version 1.0.1
Using Magento FeaturesNow we’re able to add custom blocks into the mega menu, we have the ability to injectwhatever we like into these blocks, including Magento’s powerful out-of-the-box features.
In this example we will inject a widget for a list of featured products into the sale categoryof our menu.
To do this we simply create our block and inject the widget...
Configure the widget to your requirements...
Insert a widget
ZERO-1 Mega Menu | Magento 2 | Version 1.0.1
Hey presto, your widget now displays in the Sale category of the menu...
ZERO-1 Mega Menu | Magento 2 | Version 1.0.1
Summary
UK OFFICE CANADA OFFICE
Talk To Us...
Magento has a lot of powerful out-of-the-box features, which can be used inline with thisMega Menu module with the use of blocks. If you can’t find the feature you’re looking for,or want something more tailored your requirements, please don’t hesitate to contact us...
If you require support for our Extensions please visit support.zero1.co.uk
West Road House,Buxton,DerbyshireSK17 [email protected] 867 6391
Canada Office:20 Camden St,Toronto,Ontario,M5V [email protected]+1(647) 945 9060
ZERO-1 Mega Menu | Magento 2 | Version 1.0.1