Create Awesome Menu Layout With OpenCart Mega Menu

A mega menu is an expandable two-dimensional menu structured design. It lets the website show the categories, products, information pages, and other important information in the menu.

TMD OpenCart mega menu module is easy to configure and it supports the latest version 4.x of OpenCart. It is also working with 2.x, and 3.x older versions.

If your OpenCart website theme currently has a simple menu in it. Still, this extension will automatically add a mega menu on your website. It does not require you to have technical knowledge.  Just install and start adding the menu.

Installation

Please check the installation process on our Installation Of OpenCart modules blog post. You can follow the step-by-step guide to get this extension on your website installed and get it working. The same process will be followed to install the OpenCart mega menu extension on your website.

 

Lets Start

After that, we will check the setting of the mega menu and how to get the desired sub menus and results.

After login into the admin, you will see the mega header menu on the left and other menus. Please click on the mega header. You will land on the menu list page. Here you will see a list of all the created menus.

Setting

Before we start creating menus, we must do the set of menus, the color theme, and the size of product and category images, limit the number of products and categories, font type, and other things.

To edit the setting, the admin should click on [*] icon located at the top-right corner of the page. You will land on the setting page.

Color Theme Setting

Admin can change the color of every aspect of the menu. Thus admin can match the menus to the existing theme of the website. Color accepts RGB and ARGB color codes.

Here is a list of the color options available for the mega menu to update as per requirement.

• Header Bg Color
• Dropdown Menu bg Color
• Header Title Color
• Header Title Hover Color
• Title Bg Color
• Title Bg Hover Color
• Header Link Color
• Header Link Color(hover)
• DropDown Title Color
• Menu button Bg Color
• Single Column Bg Color
• Top Background Color
• Top Text Color
  

  Other Setting

This setting is extremely important and should be done correctly. Admin can decide the number of products and category should show in the sub menu when the user hovers over the menu.

Also, there are additional settings like the image of category and product size,  text appearance, title, sub-menu text size, etc are managed from this setting. Here is a list of setting you will find.

• Header Title Font-Size – An integer value. The text size of the menu.
• Sub Link Font-Size – An integer value. The sub menu text size.
• Product Limit – Integer. A number of products to show in the dropdown.
• Category Limit – Integer. Decide how many categories will be displayed.
• Product Image – Enter the width and height of the image size.
• Category Image – The width and height of the category image size
• Manufacture Image – The width and height of the manufacturer image size.
• Expand Menu – Sub menu height will auto expand or not
• Font Weight – Sub menu text will be bold/normal
• Font Type – Text font type uppercase/capitalize
• Show Product Count – Show the number of product counts in category or manufacturer.

Creating New Menu

To create a new menu, please click on the [+] icon located at the top right of the page.

Custom Header Title

It will be the menu title. When a website is using multiple languages then, a text input box will display with a country flag, indicating that the admin should only write the menu title in the country’s language.

It ensures that when the user changes the language, a mega menu should show the menu’s text in the same language.

Icon

The icon of the menu. Font Awesome library is pre-installed. Admin must select one icon from the list. Writing the icon code of another library may not work.

Select Background Type

There are two options for the background images. This image will be used as the background of the drop-down menu.

Upload Background:

Admin must select the image or banner. Admin can upload the image from the device. Select the image for the background. Enter the size of the menu width/height. Make sure the width must match your website theme width if it is the boxed-sized theme so that your menu will look awesome.

Select Pattern:

There are 10 pattern images given. Admin can select one from them as the mega menu background image. You don’t need to enter the size of this pattern.

 

 Type

It is the main part of the menu, here admin will select the information that should be displayed when the user hovers over the menu.

There are 6  options are available.  These are category, product, information, custom, manufacturer, and editor. Selecting one will show another setting for that type.

1. Category:

Admin can display the categories in the menu. Category names, images, descriptions, and subcategories can be displayed. There is an option to show the product of categories. Product attributes like product name, image, price, model, SKU, UPC, and description, are available. Just select the categories to display in the sub-menu.

2. Manufacturer: 

It is the same as categories. Select the manufacturer that the admin wants to see in the sub-menu. There is an option to display the image of the manufacturer and its product. Product attributes are name, image, SKU, UPC, price description, etc. are give. If you want to show the manufacturer only then select the manufacturer image and leave the rest unchecked.

3. Information:

OpenCart mega menu extension lets the admin show the informational page links in the menu. Admin must enter the page name that the admin wants to display as a sub-menu. Matching information pages will come into the drop-down. Select the pages.  All the selected information pages will display as a sub-menu of the main menu.

4. Product:

In this type of menu, Only products will display. Admin must select the product to make them display as a sub-menu. Product name, image, model, price, description, SKU, and UPC are some attributes given. Admin can select only those attributes.

5. Custom: 

When you want to give the link of certain pages or posts or links to a subdomain, another website. Admin can add an unlimited number of submenu with links by pressing the blue colored [+] button. To remove the submenu press the red colored [-] button. Admin needs to enter this information.

5.1. Name: Name of sub-menu in multi-lingual.

5.2. Custom URL:  Absolute path of the page where the user will navigate after clicking on it.

5.3. Sort Order: position number of sub-menu.

Editor:

Selecting the editor will bring you a text editor. It has WYSIWYG integrated. The text editor is used to write the HTML/CSS, insert multimedia,  or just write plain text. The content will display as it is under the menu.

Cols:

The number of columns displayed in the sub-menu. Admin should enter the Integer number only. Else error will display. Products, categories, and manufacturers will automatically divide into columns.

Sort Order

The position of the menu. If all the menu has the same number of sort order then, a menu will display randomly. Make sure menus should have a series of numbers in sort order.

URL

The page url, when the user clicks on the menu redirects on.

Open a new tab

Clicking on the menu and sub-menus will open a new tab.

Enable Sub Menu Category Title:

The category name will display when the menu type category is selected. Selecting enable option will show the category name and disable will hide the name. Admin can use it according to their requirement and design.

Enable Icon:

Selecting yes will show the icon before the main menu name. The icon should be selected in the menu setting. Only then the icon will display.  No one will hide the icon of the menu.

Store:

This OpenCart mega menu extension is multi-store compatible. If the website is running with multiple stores then, the admin can select the store where the menu will display.

If your website does not have multiple stores and runs with the default store that comes with opencart installation then the admin does not need to select the store. Leave this setting as it is. Unchecking the default store will hide the mega menu from the website.

Status:

This setting lets the admin make sure the menu will show or hide. If the menu is no longer required then select the disable status. Else select the Enable status to make it visible on the menu list.

Top Label:

It is one new feature in the mega menu these days. Where the website displays the tags on top of the menu. For example HOT, New Arrivals, Best Selling, etc. It grabs the customer’s attention and increases the chance to visit the page.

Admin can also write this kind of tag using this TOP LABLE setting. Just write the Text and it will automatically display at the top of the menu.

The background and text color will be taken from the mega menu setting.

FAQ

How to add a special price to the mega menu in OpenCart?

TMD OpenCart mega menu module automatically adds the special price when the price is selected to display in the menu setting.

Can I add different content for each submenu in the mega menu?

yes, each menu has its own setting in the mega menu in OpenCart. Admin can show the products in one menu, and subcategories in the second menu, custom links in the third menu, show information pages link in the fourth menu, create your own HTML content in the fifth menu, show video in the sixth menu, and so on.

How many types of menus can I create?

8 types of mega menus can be created using this extension:

Can I add links to another website, subdomain, blog, etc. in the mega menu?

Yup, Select the custom in the type menu setting.  Then press the blue colored [+] button it will show the Name, URL, and sort order. Enter the name of the sub-menu, write the full path of the page URL in the URL, and write the position number.

Conclusion

Our company is the official partner of OpenCart.  You can also get the OpenCart mega menu module for your ecommerce website from the official OpenCart website.

Just create a support ticket. If you have any pre-sale questions or looking for help with the module or on your OpenCart website.

You can also check our 250 modules and 30 themes on our website OpenCart Modules. You might find useful modules for your website that could improve customer retention and increase sales.