The Ultimate Guide to PrestaShop Advanced Top Menu v1.7.8: Features, Benefits and Tips
PrestaShop Advanced Top Menu v1.7.8: A Comprehensive Guide
If you are looking for a way to create a very customized, modular and responsive top menu for your PrestaShop store, you might want to check out PrestaShop Advanced Top Menu v1.7.8. This module allows you to easily build any type of horizontal navigation bar, from simple drop-down menus to mega menus with columns, images, products, banners and more. In this article, we will show you how to install, configure and use this module to create the best top menu for your site.
PrestaShop Advanced Top Menu v1.7.8
What is PrestaShop Advanced Top Menu?
PrestaShop Advanced Top Menu is a PrestaShop module developed by Presta-Module, a company specialized in creating high-quality PrestaShop addons. This module is compatible with PrestaShop versions from 1.7.4.x to 8.0.x and has been downloaded by more than 5000 customers.
PrestaShop Advanced Top Menu allows you to create a top menu that is:
Customized: You can add any content type you want to the menu, such as text, images, products, categories, manufacturers, suppliers, CMS pages and more. You can also customize the layout, animation and style of the menu according to your preferences.
Modular: You can use the drag and drop interface to easily create and organize the menu items and sub-items. You can also create multiple menus for different pages or customer groups.
Responsive: You can make sure that your menu looks great on any device and screen size by using the responsive design options. You can also choose how the menu behaves on mobile devices, such as collapsing or expanding.
PrestaShop Advanced Top Menu also helps you to optimize the performance and SEO of your menu by enabling caching and compression, using semantic HTML tags and schema.org markup.
How to install and configure PrestaShop Advanced Top Menu
To install PrestaShop Advanced Top Menu, you need to follow these steps:
Download the module from PrestaShop Addons or Presta-Module.
Go to your PrestaShop back office and navigate to Modules > Module Manager.
Click on Upload a module and select the zip file of the module.
Wait for the installation process to finish and then click on Configure.
You will see the configuration page of the module where you can set up some general settings, such as enabling or disabling the module, choosing the hook position of the menu, selecting the default menu for all pages, etc.
You can also access the documentation and support links from this page.
How to create a customized and responsive top menu with PrestaShop Advanced Top Menu
To create a top menu with PrestaShop Advanced Top Menu, you need to follow these steps:
How to use the drag and drop interface
The drag and drop interface is where you can create and manage your menus and menu items. To access it, you need to go to Modules > Module Manager > Advanced Top Menu > Configure > Menus Management.
You will see a list of existing menus that you can edit or delete. You can also create a new menu by clicking on Add new menu.
When you create or edit a menu, you will see two panels: one for adding content types to the menu (left) and one for arranging them in a tree structure (right).
To add a content type to the menu, you need to drag it from the left panel and drop it on the right panel. You can then edit its properties by clicking on it.
To arrange the content types in a tree structure, you need to drag them up or down or indent them left or right. You can also delete them by clicking on the trash icon.
You can preview your menu by clicking on Preview at the top right corner of the page. You can also save your menu by clicking on Save at the bottom right corner of the page.
How to add different content types to the menu
PrestaShop Advanced Top Menu allows you to add various content types to your menu, such as text, images, products, categories, manufacturers, suppliers, CMS pages and more. Here are some examples of how to add them:
Text
To add text to your menu, you need to drag Text from the left panel and drop it on the right panel. You can then edit its properties by clicking on it.
You can enter any text you want in the Label field. You can also enter a URL in the Link field if you want your text to be clickable.
You can also choose whether you want your text to be displayed as plain text or HTML code in the Display mode field.
Images
To add images to your menu, you need to drag Image from the left panel and drop it on the right panel. You can then edit its properties by clicking on it.
You can upload an image from your computer or enter an image URL in the Image field. You can also enter an alternative text for SEO purposes in the Alt field.
You can also enter a URL in the Link field if you want your image to be clickable.
Products
To add products to your menu, you need to drag Product from the left panel and drop it on the right panel. You can then edit its properties by clicking on it.
You can select a product from your catalog by clicking on Select product in the Product field. You can also enter a custom label for your product in the Label field.
You can also choose whether you want your product to be displayed as an image only or an image with text in the Display mode field.
Categories
To add categories to your menu, you need to drag Category from the left panel and drop it on the right panel. You can then edit its properties by clicking on it.
You can select a category from your catalog by clicking on Select category in the Category field. You can also enter a custom label for your category in the Label field.
You can also choose whether you want your category to be displayed as a simple link, a drop-down list, or a mega menu with columns in the Display mode field. You can also choose how many sub-categories to display per column, and whether to show category images, in the Options field.
Manufacturers
To add manufacturers to your menu, you need to drag Manufacturer from the left panel and drop it on the right panel. You can then edit its properties by clicking on it.
You can select one or more manufacturers from your catalog by clicking on Select manufacturer(s) in p>You can customize the appearance and behavior of your menu by using the Layout, Animation and Style tabs in the configuration page of the module. To access them, you need to go to Modules > Module Manager > Advanced Top Menu > Configure.
Layout options
In the Layout tab, you can choose how your menu will be displayed on different devices and screen sizes. You can also choose how your menu will behave on mobile devices, such as collapsing or expanding.
Some of the layout options are:
Menu width: You can choose whether you want your menu to be full width or fixed width. If you choose fixed width, you can also enter the width value in pixels.
Menu alignment: You can choose whether you want your menu to be aligned to the left, center or right of the page.
Responsive design: You can choose whether you want your menu to be responsive or not. If you choose responsive, you can also enter the breakpoint value in pixels, which is the minimum screen width at which your menu will switch to mobile mode.
Mobile mode: You can choose whether you want your menu to be displayed as a hamburger icon or a select box on mobile devices. You can also choose whether you want your menu to be collapsed or expanded by default on mobile devices.
Animation options
In the Animation tab, you can choose how your menu will animate when you hover over it or click on it. You can also choose how long the animation will last.
Some of the animation options are:
Animation type: You can choose whether you want your menu to animate with a slide effect or a fade effect.
Animation speed: You can choose how fast your menu will animate in milliseconds.
Animation delay: You can choose how long your menu will wait before animating in milliseconds.
Animation easing: You can choose how smooth your menu will animate with different easing functions, such as linear, ease-in, ease-out, etc.
Style options
In the Style tab, you can customize the look and feel of your menu by changing its colors, fonts, borders, backgrounds, shadows and more. You can also use custom CSS code to further customize your menu.
Some of the style options are:
Main menu style: You can change the color, font size, font family, font weight and text transform of the main menu items.
Main menu background: You can change the background color or image of the main menu bar.
Main menu border: You can change the border color, width and style of the main menu bar.
Main menu shadow: You can add a shadow effect to the main menu bar by changing its color, blur radius and offset values.
Sub-menu style: You can change the color, font size, font family, font weight and text transform of the sub-menu items.
Sub-menu background: You can change the background color or image of the sub-menu panels.
Sub-menu border: You can change the border color, width and style of the sub-menu panels.
Sub-menu shadow: You can add a shadow effect to the sub-menu panels by changing its color, blur radius and offset values.
How to optimize the performance and SEO of the menu
PrestaShop Advanced Top Menu also helps you to optimize the performance and SEO of your menu by enabling caching and compression, using semantic HTML tags and schema.org markup.
How to enable caching and compression
To enable caching and compression for your menu, you need to go to Modules > Module Manager > Advanced Top Menu > Configure > Performance tab. There you can enable or disable these options:
Caching system: This option allows you to cache your menus in order to reduce server load and improve loading speed. You can also clear the cache manually if you make any changes to your menus.
CSS compression: This option allows you to compress your CSS files in order to reduce their size and improve loading speed. You can also regenerate your CSS files manually if you make any changes to your menus.
How to use semantic HTML tags and schema.org markup
To use semantic HTML tags and schema.org markup for your menu, you need to go to Modules > Module Manager > Advanced Top Menu > Configure > SEO tab. There you can enable or disable these options:
Semantic HTML tags: This option allows you to use semantic HTML tags for your menu items, such as <nav>, <ul>, <li>, etc. This helps to improve the accessibility and readability of your menu.
Schema.org markup: This option allows you to use schema.org markup for your menu items, such as <span itemprop="name">, <meta itemprop="url">, etc. This helps to improve the SEO and visibility of your menu in search engines.
Conclusion
PrestaShop Advanced Top Menu v1.7.8 is a powerful and versatile module that allows you to create a customized, modular and responsive top menu for your PrestaShop store. You can easily add any content type you want to the menu, such as text, images, products, categories, manufacturers, suppliers, CMS pages and more. You can also customize the layout, animation and style of the menu according to your preferences. You can also optimize the performance and SEO of your menu by enabling caching and compression, using semantic HTML tags and schema.org markup.
If you want to create the best top menu for your site, you should definitely try PrestaShop Advanced Top Menu v1.7.8. You can download it from PrestaShop Addons or Presta-Module and enjoy its features and benefits.
FAQs
Here are some frequently asked questions about PrestaShop Advanced Top Menu v1.7.8:
How much does PrestaShop Advanced Top Menu cost?
PrestaShop Advanced Top Menu costs 79.99 on PrestaShop Addons or Presta-Module. This price includes support and updates for one year.
How can I get support for PrestaShop Advanced Top Menu?
You can get support for PrestaShop Advanced Top Menu by contacting the developer through PrestaShop Addons or Presta-Module. You can also access the documentation and video tutorials from the configuration page of the module.
How can I update PrestaShop Advanced Top Menu?
You can update PrestaShop Advanced Top Menu by downloading the latest version from PrestaShop Addons or Presta-Module and installing it on your store. You can also check for updates from the configuration page of the module.
Can I use PrestaShop Advanced Top Menu with other modules?
PrestaShop Advanced Top Menu is compatible with most of the other modules available on PrestaShop Addons or Presta-Module. However, if you encounter any issues or conflicts with other modules, you can contact the developer for assistance.
Can I use PrestaShop Advanced Top Menu with any theme?
PrestaShop Advanced Top Menu is designed to work with any theme that follows the PrestaShop standards and best practices. However, if you encounter any issues or incompatibilities with your theme, you can contact the developer for assistance.