- Firstly, you must install Prestashop version 1.7.x.
- Secondly, prepare for installing the SP Vertical Mega Menu. The installation contains 4 steps as following:
Step 1: Login to your Prestashop admin panel and Go to Improve >> Modules >> Modules Services. At the top of the page, click the Upload a Module button.
Step 2: Click “Select File” to select your module .zip file “sp_vertical_megamenu_p1.6-res_v1.0.0.zip” that you have downloaded.
Step 3: The uploading process will be started. You will see the message that “Module installed”.
Step 4: Finally, the new module will be located in the modules list. Search the name of module and Click on the Configure button to configure the module.
Below is a complete interface of SP Vertical Menu module
To create SP Vertical Menu module, you need to create a tree of categories. Click Here to read more How To Create Categories in Prestashop
Each category can have or not have its sub categories. You can customize your category tree for your purpose
Pictures below illustrate the 3-level category tree
Category level 1
Category level 1 will contain category level 2. Below is example of subcategories of their parent named Women
Category level 2 will contain category level 3
This category tree will be used in the next steps
Next, we will configure module.
Find to the module that you have installed and click on Configure button to configure the module.
After clicking “Configure” button. It will display a page as the image below.
The parameters are divided into the following groups:
- Menu Top Link
- Add a new link
Let’s look at the parameters in details
In Available Items, select categories then click the ADD button. ( Note: This is the category tree is created above). Selected categories will appear in Selected Items
You can click Remove button to delete the selected category in Selected items.
You can use Change Position to change the position of item in Selected items.
You can configure other parameters as follows:
- Add icon – Input class icon .You can accept pages Here to get more reference icon. Ex: fa fa-anchor …
- Number Cols – Set number of sub categories. Note: If number of sub categories greater than 4, they will display in new line
- Title Vertical Mega Menu – Name of title Vertical Mega Menu
- Number Visible Categories – Number of visible categories (categories have to contain sub categories) in a vertical mega menu.
Click Save button to save information.
Note: In backend, you can configure as instruction/ description in the image below
You will get the results in the font-end look like image below:
- Label – Input title a new mega menu.
- Link – Set link of mega menu. Note: Link can use full link. Ex: http://www.magentech.com, http://www.google.com
- Is Mega Menu – Set Is parent or Is sub parent for new mega menu.
- In Mega Menu – Choose the new link in mega menu parent.
- New window – Set open link of mega menu with the new window.
Click Add button to save information.
You will see the message “The link has been added.” .New link will appear in Menu top link
3 HOW TO CREATE CATEGORIES – Back to top
Please go Here to readmore How To Create Categories in Prestashop.