Description
Live edit
With the front-end editor, creating a menu has never been such easier.
3 ways to put the menu to the header
- Transplant the menu to the "displayEasyMenu" hook to have a full width menu.
- If you have a header built with the native PrestaShop way, then you can transplant the menu to the hooks in the main header section to show the menu with other elements.
- If the header of your site was built with the Easybuilder module, then you can use the "Menu module" widget to display the menu there, check #6 in the documenation for more info.
Use almost all widgets in the menu
The easymenu builder comes with several widgets to show categories, products, brands, custom links in the menu, that's already enough to build a menu. But what the Easymenu can do is far beyond that, you can use almost all widgets of the easybuilder module in the menu.
Adjustable submenu width
3 Predefined width: "Fullwidth", "Container width" and "Narrow", you can adjust the width to any number.
Creative ways of using shadow
Set a large shadown to overlay other content to highlight the current menu.
Submenu animation
Fade out / Show out / Slide up / Slide down.
Two ways of opening submenu
"Click" and "Hover"
Add icons & images to the menu
Menu item layout
Horizontal / Vertical
Menu item position
Left / Center / Right / With the same width
Pull some menu items to the other side.
Add header modules to the menu.
Check #5 in the documenation for more info.
Badge
Adding a badget to a menu item is a nice way to hightlight it out.
Main menu items on the each side of the logo
This way of displaying menu is a trick, the logo is acturally a menu item.
Multi level menu
A neat and clean way to display cateogries.
Display categories in column layout
Besides displaying categories in grid layout, if the number of your sub categories vary, then using column layout to display categories would be better.
Display category cover images / category menu thumbnails
Display products in the menu
Using the "Product list" widget to display basic infomation of products in the menu. If you need to show full information out, the use the "Product slider" widget.
Several ways of getting products.
- Featured products
- New products
- Top sellers
- Special products
- By category
- By brand
- Viewed products
- Manual selection
Display brands in the menu
Using the "Brand list" widget to display brands in the menu.
Display custom links in the menu
Fullwidth tabbed menu
The tab header can be on the top/left/right. It supprts nested tabs.
Dropdown tabbed menu
Mobile menu
Side-in mobile menu. Display the same data as the desktop menu on mobile or create some menu items specially for mobile.
Requirements.
- Prestashop1.7.5+
- Transformer theme v4 (v4.5.4+) and Panda theme v2 (v2.6.4+). Doesn't work on any other themes.
- PHP7+
- In the PHP configuration (php.ini file) set memory_limit to "256M"
Documentation & FAQ.
Currently, it works on the Transformer v4 and Panda theme v2 only. We will make it to be able to work on all themes in the future.
Yes, this menu module is a plugin of the Easybuilder, it uses it's drag & drop interface. If you don't have the easybuilder module, click here to buy the easybuilder module.
By setting the "Position" setting to "On the other side" to put menu items to the right. If you need to put more than one menu item, then you just need to set the "position" setting to the first menu item only, sort other menu items after it, otherwise, there would be large spaces between each item.
Submenus may flicker when the way of opening submenu is "Hover" and the animation of showing submenu is "Slide down", the solution is that using the "Slide down" animation only when the way of opening submenu is "Click".
Two ways to add modules like "Shopping cart", "Search box" to the menu. One is using the "Modules in the menu" section under the "Style" tab of the "Easymenu" panel. Another way is to use the "Menu module" widget, putting the menu on one side, using the "Header modules" widget to put other modules on the other side.
The way of calculating the way of submenus is different. 1) If the width is set to "Container width", then the submenu will be the same width as the column where's placed. 2) The "Fullwith" option may not work correctly if you put the widget to a column that is not in the center. Two solutions: 1, Set a fixed with to submenu items. 2, Transplanting the easymenu to a hook to use the PrestaShop native way to display it.
Set its section's "Columns Gap" to "No gap" to remove white borders.
Use the "Sidebar and mobile header bar" to add the easymenu to the mobile header.
Set "Columns Gap" to "No gap" for thire parent sections.
Set the "Width" of columns to 100 for iPad.
If you use the "Menu weidget" to show the menu out, then you need to remove the Easymenu module from the "displayEasyMenu" hook to avoid having two menus, which can be done on the "BO>Modules>Positions" page.
How to install and upgrade.
How to install?
Use the "Upload a module" button on the "BO > Modules" page to install this menu module.
How to upgrade?
Use the "Upload a module" button on the "BO > Modules" page to upload the new version to your site, it's the same as how to install, don't worry all your data will be safe, PrestaShop will just upload updated files to your site, it won't do a reinstallation. Reload the "Modules" page to check if there is an "Upgrade" button, click on it if there's one.
How to get support.
If you have any questions with this module, post them out on the Transfromer theme forum or Panda theme forum, we are there to help.
