Mega menu PRO€¦ · 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

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.