MAGENTO 2 Mega Menu...The Zero1 Mega Menu module for Magento 2 is a simple yet powerful extension, which enables you to create a better UX whilst providing the ability to inject powerful

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.


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





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 (%)


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


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...


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...



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


Hey presto, your widget now displays in the Sale category of the menu...


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


Documents

MAGENTO 2 Mega Menu...The Zero1 Mega Menu module for Magento 2 is a simple yet powerful extension, which enables you to create a better UX whilst providing the ability to inject powerful