1
Mega menu PRO
Visual drag and drop mega menu builder
A product of ETS-Soft
2
Contents
I. WELCOME ............................................................................................................................. 3
II. INTRODUCTION ................................................................................................................... 3
III. INSTALLATION .................................................................................................................... 4
IV. CONFIGURATION ................................................................................................................ 4
1. Full menu and custom hook .............................................................................................. 4
2. Create menu item ............................................................................................................... 8
3. Add column for menu item ............................................................................................. 13
4. Add block for a column ................................................................................................... 14
5. Manage vertical menu ..................................................................................................... 25
6. Mega menu settings.......................................................................................................... 28
7. Import/Export .................................................................................................................. 35
V. THANK YOU........................................................................................................................ 36
3
I. WELCOME
Thank you for purchasing our product. We hope to guide you through all the aspects of
the module installation and the module setup within this document. But if you have any
questions that are beyond the scope of this documentation, please feel free to contact us.
*Note:
All instruction screenshots are taken from Prestashop 1.7, but installing and configuring
this module on Prestashop 1.6 is similar.
II. INTRODUCTION
If your site has many levels of categories, sub-categories, or you want to show many
things on the menu such as hot deals products, tutorials, google map, images, brands, etc.
it's impossible to show all of them on a default Prestashop menu module.
Due to that fact, we took a long time to research and build “Mega menu PRO” - a great
module to help you configure and display everything you like on the menu bar easily.
* “Mega menu PRO” is compatible with Prestashop 1.6.x and Prestashop 1.7.x
4
III. INSTALLATION
1. Navigate to “Modules / Modules & Services”, click on “Upload a module /
Select file”
2. Select the module file “ets_megamenu.zip” from your computer then click on
“Open” to install
Click on “Configure” button of the module you just installed to open the
module’s configuration page.
IV. CONFIGURATION
1. Full menu and custom hook
If you install Mega menu PRO on a website with default Prestashop theme (or most of
other custom Prestashop themes), the module is displayed inside default “displayTop”
hook of Prestashop which is limited in width by a HTML “div” with a class called
“container”, this causes the menu to be not full-width.
But no worries, we can quickly fix it. From the menu backend “Settings”, select
“Custom hook” for “Hook to” and save.
5
Copy the text {hook h='displayMegaMenu'} and paste to your header.tpl (inside your
theme folder) where it’s not limited in width by any container elements.
6
* Note:
You need to clear your site’s cache or disable it and force the site to recompile Smarty
files in order to the changes take effect. To clear cache, please follow instruction on the
below screenshot.
7
Now your menu should be displayed full-width like this:
8
2. Create menu item
Click on “Add menu” button to add a new menu item.
There are 2 directions available for your choice:
9
You can add an icon for each menu item by using font awesome class or upload
an icon image.
*Tip: for more menu icon font, you can find at:
https://fontawesome.com/icons?d=gallery. Click on an icon that you want to use, then
copy the icon class.
10
Submenu alignment and submenu width:
You can choose between 3 values of alignment: auto, left and right. When you select
“auto”, the sub menu will start from left to right.
11
*Note:
“Display tab with full width” option is only available for Vertical menu. It will show the
tabs of Vertical menu in full width, even when the menu doesn’t have any tab content.
Bubble alert text and background image
You can attract customer's attention with bubble alert text such as "Hot", "New", "Sale",
etc. You can customize text content, background color and text color of alert bubble.
Mega Menu PRO also allows you to upload a background image and select suitable
position for this background image.
12
13
3. Add column for menu item
Click “Add column” button under menu item to create a new column. There are 12
columns available for each menu item.
If you want to show 3 columns for a menu item, then create 3 columns with width size
for each column is 4/12.
Choose 12/12 for 1 column full width
14
Choose 6/12 for 2 same width columns
Choose 4/12 for 3 same width columns
Choose 3/12 for 4 same width columns
……
If you want to show the blocks of column in each row, you can enable “Break” option.
4. Add block for a column
Click “Add block” button under each column to add new block
There are 7 block types for your choice:
Text/Html
Image
Category
CMS page
Manufacturer
15
Supplier
Products
Text/HTML
By using this block type, you can add a text paragraph using HTML tag, add a video or
Google map using iframe.
16
*Tip:
If your site doesn’t show video or Google map, please check and make sure iframe
is enabled from General setting of your website.
Get video iframe from YouTube.
Click on “Share” button below each video > Select “Embed” > Copy the iframe code.
Get iframe from Google map
17
Click on “Share” button > Open “Embed a map” tab > Copy iframe code
Image
Image block type allows you to display any image on your mega menu.
18
Category
Category block type allows you to display category list on your mega menu.
19
*Note: If you select a category which has sub categories, all its sub categories will be
shown on the menu as well.
CMS page
CMS page block type allows you to display a list of CMS pages on your mega menu.
20
Manufacturer
Manufacturer block type allows you to display a list of manufacturers on your mega
menu.
21
If you want to show manufacturer logos, you can enable “Display manufacturer image”
option.
22
Supplier
Supplier block type allows you to display a list of suppliers on your mega menu.
23
Products
Product block type allows you to display products on your mega menu.
24
*Tips:
o You can enable countdown clock if the product has discount price and time
setting.
o If you select one of the featured product type (new, popular, special, best
sellers), Mega menu PRO will automatically get the items belong to these
categories and display them.
o For “Specific products”, you can search for a product by entering its ID,
name or reference.
25
5. Manage vertical menu
Vertical menu item
To set up vertical menu, you need to select “Vertical” direction from “Add menu”
popup form.
By enable “Remove border”, it will remove all borders (top, bottom, left, right) of the
vertical menu. This option is useful when you have background for vertical menu item so
you don’t need border anymore. If you don’t use background, just set the option as
disabled then your vertical menu item will have borders as the same other menu items.
26
Add a tab
For vertical menu, we need to add tabs before creating column for menu item.
The setting options are similar with Manage horizontal menu:
27
28
Display tab content from top
6. Mega menu settings
General setting
In this tab, you will find general setting options for mega menu.
29
Thumbnail image type: Our module supports 5 thumbnail image types to display on
mega menu. You can select the one most suitable with your current Prestashop theme.
You can also enable/disable sticky menu on mobile screen.
30
For mobile devices, Mega Menu PRO allows customers to “Click on menu text to
open its submenu”.
31
Design
You can configure the menu layout easily with design options from this tab.
*Tip: If your menu has many items and doesn’t have enough space to show all of them,
you can reduce the text font size to have more space.
* Note:
Select a menu layout type from 5 pre-defined layouts available
32
Enable cache for production website to load front end menu a lot faster.
Select Google fonts you like, the font will be automatically imported into your
website
Custom CSS can be used with available font and color codes that you defined in
the previous options.
33
Extra features
This is new feature that we have developed in this version which allows you to move
some elements from default position to mega menu bar.
Enable the element you want to display on mega menu bar and click “Save” to apply the
changes.
34
*Note: The “Search” option is applied to Default search module only.
By enable these options, it might make your menu broken by moving the search, cart,
user info module from default position to menu bar. So, just use it if you understand well
about HTML/CSS and you can make the necessary changes yourself, as these options are
out of our term for free support.
35
7. Import/Export
Click on “Import/Export” button to open the working area.
*Note:
- Only default language text is exported, other languages’ translation is not!
- A sample data package is available at
https://drive.google.com/file/d/1oGOGQi95Ue00llOmidHEDogjmsU9CmHe/view
To show the menu content the same as our demo, please set the menu in “Custom hook”
and copy the hook to the .tpl file where you want to show the menu in full width (See how
to put custom hook in the top of this document).
The categories, products, manufacturer, suppliers… on your site are not the same our
demo site, so it will be a bit different. Just set up with your real data, then you will see it
looks beautiful.
36
V. THANK YOU
Thank you again for purchasing our product and going through this documentation. We
hope this document is helpful and efficient in the complete setup of this module.
If you do have any questions for which the answer is not available in this document,
please feel free to contact us.