Video Tutorial - How to create a new Mega menu drop down in VPCart 9

Video Tutorial - How to create a new Mega menu drop down in VPCart 9

In VPCart 9.0, the Menu Manager has been enhanced with more powerful features, including the Mega Menu plugin.

Step 1. To access the Menu Manager, you can login to your VPCart 9.0 administration and locate the top menu : Website > Menu Manager The Menu Manager will list your current menu items and allows you to add, edit and delete them.

Step 2. To add a menu item, click the Add button at the top of the page. Also you can see Edit and Delete icons against the menu item.

Step 3. The Menu type can be Custom or Category. Custom : You can create any custom menu

Category: If you need to show a category menu

Step 4. For now we can select Category as the menu type.

Step 5. You may select a specific category or all the categories that need to be displayed as menu item.

Step 6. Enter Menu Name:This is the display name of the menu item.

For example, we can name it as Megamenu.

Sub Title: This is the sub title that will show underneath the menu name

Sub Description: This is the description for the menu item.

Sequence Number (lowest number appears first):This determines which order this item will appear in the menu.

Open In: You can have menu items open links in the same window or a new browser window.

Parent Menu Display Style: There are five styles you can choose. Here we will select Mega Menu option

Sub Menu Style: This is only for sub menu, and will be hidden for parent menu when your menu is a Custom.

If your parent menu type is Category, this Sub Menu Style is available for selection

Let's select Default Sub Menu option

Select the number of columns for the Mega Menu display

Only show in this site: If you are using product matching and want to have a different menu for each store you have set up, you can enter the keyword from xproductmatch in the shop$config.asp that you want this menu item to belong to here.

Step 7. Click Submit

Step 8. Go back to your website and refresh the page to view the new menu item

Go back to Menu Manager and click 'edit' icon against Megamenu menu item. We can try option 'Mega Menu with left side image'.

Step 1. Select 'Mega Menu with left side image' option from 'Parent Menu Display Style' dropdown

Step 2. Upload an image

Step 3. This option will show Mega Menu style in 100% width and with image on the left of the dropdown.

Step 4. Enter Megamenu Image Size. For example 25%

Step 5. Click Submit

Step 6. Go back to your shop and refresh the page to view the new menu display

As you can see the image is shown on the left side of the Menu

Go to Menu Manager again and and we can try the option 'Mega Menu with right side image'.

Step 1. Go back to your shop and refresh the page

Step 2.The image is shown on the right side of the menu now

Go back to Menu Manager and we can try another option

Step 1. Select Parent Menu Display Style: Mega Menu and Sub Menu Style: Image Grid Display

Select number of columns, say 4

Step 2. Click Submit

Go back to shop and refresh the page to view the new Mega Menu display with 4 columns

We can now try adding a Custom menu from Menu Manager.

Step 1. For this click Add button on top of the page.

Step 2. Select Menu type: Custom and enter menu name. For example we can name it as Cus-Level1

Step 3. Enter url that can link the menu item to products page, content page, blog page, contact us page etc..

Step 4. Fill up the other fields as mentioned earlier

Step 5. Select Parent Menu Display Style: Mega Menu

Step 6. Click Submit

Go to your shop and reload the page to view the new custom menu item

With this VPCart 9.0 Menu Manager, it will allow you to create until 4th tiers of sub menu using Mega Menu

Step 1. Click Add button in Menu Manager and we can add a second tier sub menu item

Step 2. Enter Menu name, url etc

Step 3. Select Parent Menu Item as Cus-Level1 so that the second tier sub menu will be created under it.

Step 4. Change the Sub Menu Style

Step 5. Click submit

Go back to your shop and refresh the page to view the sub menu item

Thank you for watching and we hope you have found this tutorial useful.

User Manual Reference

For more information about how to install a module in Module Manager, you can also refer to our VPCart 9 User Guide at

https://helpnotes.vpcart.com/userguide900/#!Documents/settingupsitenavigationmenumanager.htm


Times Viewed:
1355
Added By:
Brian
Date Created:
11/13/2018
Last Updated:
1/1/2020