BigCommerce Mega Menu App User Guide

• App Version: 1.0.0
• Our Support Email: bigcommerce@capacitywebsolutions.com

Thank you for purchasing Mega Menu BigCommerce App. If you have any difficulty with this app or you find an issue, please feel free to send us a message: bigcommerce@capacitywebsolutions.com

Below you will find the detailed documentation on how to use our app and we wish you have a great experience with our BigCommerce App.

Import Sample Menus

1. This feature will create a horizontal menu group and four different types of sample menu items to explain layout of our menus.


2. You can see below confirm box within installation of mega menu app. Click on "OK" button if you want sample menus as a starter for your store's menus.



3. In case you skip this then you can also Import Sample Menus button from Menu Items tab. Please note that this button only appears when you do not have any menus created in your store. Watch now



4. Please have a look at sample menus as a starter for your store's menus. Hope this can help you to create your store's navigation in a better way.



Sample of Mega menus:




Megamenu:



Flyout menu:



3 Column:



Contact Us:

Show Mega Menus on Store Frontend

1. Go to Admin >> Apps >> Mega Menu >> How to Use. Watch Video Guide Here.
2. Step-1: Download necessary files
   • Click on the Download button and download the zip file.

     

   • Then connect to your store WebDAV server. You can check it here. Now, open content folder in WebDAV.
   • Extract the downloaded folder and copy and paste it in the content folder. You will see megamenuapp folder in your content folder.
3. Step-2: Now, please check Megamenuapplication Script created in your Script Manager. For it, Go to Admin >> Storefront >> Script Manager. If you did not find any script named Megamenuapplication Script or you deleted it by mistake, then click on Re-install Scripts button. It will re-install Megamenuapplication Script in your store. And if you found script then skip this step.

   

4. Step-3: Now, again go to Admin >> Apps >> Mega Menu >> How to Use,
   Click on Copy the Clipboard to get the shortcode for displaying Mega Menus.

   

    Now, Go to Themes and Paste Template Code in your Current Active Theme. From your Bigcommerce admin, click on Storefront >> Themes and select Advanced in your Current Active Theme. Click on Edit theme files. (** if Edit theme files option is not working then you can also go to customize and then scroll down and click on Edit Theme Files).

   

   Now, click on templates >> components >> common >> header.html. Paste the code where you want to show Mega Menus.

   Find div with class "navPages-container" then comment code between red line rectangle and add short code like blue section.

   

General Settings

1. Go to Admin >> Apps >> Mega Menu >> General Settings



2. From Here,
   
   • You can enable/disable Mega Menu app, when you set enabled then menus will display on frontend.
   • You can enable/disable Multi Store-front, when you set enabled then channels dropdown will be displayed and you can create and display menus for your other storefronts.
   • You can set responsive breakpoint to display menus on frontend.
   • PUBLISH button will create a static html for your store's frontend to display menu faster than earlier.
     If you make any changes in menus, please PUBLISH your changes to reflect them in frontend. It will decrease page load and display menu faster.
     Note: Please note that you have to publish everytime when you make any changes to your menus.

Menu Groups

1. Go to Admin >> Apps >> Mega Menu >> Menu Groups Watch Video Guide Here.



2. Click on Add Group button.



3. • Title: Enter group name, such as Main menu, Left menu, Top menu …, so you can easily remember the menu group.
   • Show/Hide Group Title: You can show and hide the group title on the frontend.
   • Title Color: Set menu group title color.
   • Title Background Color: Set menu group title background color.
   • Status: You can Enable & Disable the menu using the menu group.
   • Menu Type: There are main four menu types available.
     • Mega Menu.
       • Horizontal.
       • Vertical.
     • Smart Expand.
     • Always Expand.
     • List Item.
   • For the Mega-Menu menu type, there is one more option available Alignment Horizontal and Vertical.
   • Item Level: You can set submenu till eighth level.Here Menu Item different Option listed below.

   

   • Direction: Set Menu Item language direction, Set Left to Right for normal language. Set Right to Left for Arabic languages. By default we used Left to Right direction.
   • Image height / Image width: Set Image Height and Width for the menu items.
   • Please see below image for easily Understanding how menu group color options are working on the forentend:

     Menu Bar Options

     • Mega Menu

     

     

     

     • Smart Expand

     

     

     Mega Menu Item Options

     

     

     

     

     

     

     

     Fly out option

     

     

     

     Sub Menu Item Option

     

     

     

Menu Items

1. Go to Admin >> Apps >> Mega Menu >> Menu Items Watch Video Guide Here.


2. Click on Add New button.





All MENU ITEMS will be managing from menu items. Here you can add new menu as well as delete and update menu items easily.
• You can directly drag and drop menu items from one group to another group.
• Also you can change parent and child menu item using the drag and drop and then click on the Save Order button which is set at the bottom for change the menu order.
Following are the list of fields which are used for create menu item with the different options.


General Options:

• Menu Item Type: In the menu, there are different item types available for the menu items.
• Category Page: Create link to category page with the following different options. Watch Video Guide Here.

  

  • Select Category: Select Category from the drop down that you want to show in the menu.
  • Show Category Image: Select 'Yes' if you want to show category image in the menu.
  • Show Auto Sub-Categories: Checked the checkbox if you want to show sub categories in the menu.
  • Show Images For Sub-Categories: Checked the checkbox if you want to show images in the sub categories also.
  • Use Custom Image for Main Category: Using this option we can add custom image for the category menu item by using “Upload Item Thumbnail” option from the Advance Options Tab.
• Static Content: You can customize menu html using Static Content. Watch Video Guide Here.
  • Add Content: Using this you can create Static Content and display in menus.
  • Show / Hide Menu Title: Using this we can show / hide menu title for the static content when static block is set as child menu item.
• Product Page: Create menu item for the product page. Watch Video Guide Here.
  • Product Id: Enter Product Id.
• Custom URL: Create Link to any custom URL. You can add external and internal both URL using our custom URL menu item. Watch Video Guide Here.
  • Custom URL: Enter custom URL value.
  • External URL: When you need to add external custom URL then you need to select checkbox “External URL”.
• Alias [href=#]: Create Alias for just tag href=”#”.
• Group: Create group for make sub column in the mega menu. Group Item’s Menu title is not display in the front when menu type is mega menu. Group Item is not used as root menu item.
• My Account: Create link for user account page.
• My Cart: Create link to shopping cart page.
• My Wish list: Create link to default checkout page.
• Login: Create link to login page. If user is not logged in then only this menu type of menu item will be displayed in the front.
• Logout: Create link to logout action. If user is logged in then only this menu type of menu item will displayed in the front.
• Register: Create link to register page. If user is not logged in then only this menu type of menu item will displayed in the front.
• Contact Us: Create link to contact us page.
• Status: Status is use for enabled and disabled the menu item in the menu group. Disabled menu item is not displayed on the frontend. Sale menu item set as disable so its display like below:



• Menu Title: Menu Title is use for display menu item title on the frontend.
• Add Custom Class: Using this you can add the custom class on the menu item.
• Assign Menu Group: Using this you can assign the menu group on the menu item. So that menu item is set in that menu group which is selected in the Assign Menu Group.
• Parent Item: In the parent item display all the menu items based on the selected group from the Assign menu group drop down. Select menu item in which you want to add sub item in the menu.
• Sub Column Layout: This Option will work only in the mega-menu type. Using this you can set drop down menu layout.
  • No Sub Item - Child Menu Item not display in the menu when menu item Sub Column Layout set as No Sub.
  • 1 Column Layout – Dropdown menu will set fly out menu.
  • 2 Column Layout – Dropdown menu will set in two columns.
  • 3 Column Layout – Dropdown menu will set in three columns.
  • 4 Column Layout – Dropdown menu will set in four columns.
  • 5 Column Layout – Dropdown menu will set in five columns.
  • 6 Column Layout – Dropdown menu will set in six columns.
  • 7 Column Layout – Dropdown menu will set in seven columns.
  • 8 Column Layout – Dropdown menu will set in eight columns.
  When menu item is not root level this option will work for set column width.
• Sub Menu Align: With the help of this option you can manage the menu alignment. Following are the different alignment options examples.
• Left



• Right



• Full Width



• Full Width + Mouse Hover ( Watch Video Guide Here )



Advance Options:

• Access Permission: Using this you can set permission on the menu item based on the bigcommerce customer group.
  • Public: Every one can access the menu item. When we need to access the menu item for all if customer is logged in or not then assign the menu item Access Permission to the Public.
  • Registered: User who is logged in site as customer then only access the menu item. When we need to give permission for the logged customer then assign the menu item Access permission to the Registered.
  • Not Logged In: If Customer is not logged in then only access the menu item.
  • General: When Menu Item Access Permission as General is accessible when customer is logged in and customer’s group is general.
  • Wholesale: When Menu Item Access Permission as Wholesale is accessible when customer is logged in and customer’s group is wholesale.
  • Retailer: When Menu Item Access Permission as Retailer is accessible when customer is logged in and customer’s group is retailer.
• Target Window: Using this set a target as current window or new window using the Parent or New window option.
• Custom Link Title: Using this set the link title for the SEO.
• Set Relation: Using this set a relationship between the current document and the linked document.
• Upload Item Thumbnail: Using this you can set the menu item image. When menu item type is not category then only this option is available.
• Show/Hide Thumbnail: Using this you can show or hide the uploaded Image on the frontend. ( Watch Video Guide Here )

Label Options: ( Watch Video Guide Here )

• Label Title: Enter label text which you want to use as menu item label.
• Label Text Color: Select color from the color picker which you want to use as label text color.
• Label Font Size: Enter label text size on which size you want to display your label in the menu item.
• Label Text Background Color: Select color from the color picker which you want to use as label text back ground color.



Edit Menu Item:



Add Sub Item:



Note: When you try to use Add Sub then Assign Menu Group and Parent Item drop down is not displayed because that value is automatically set based on the click on the auto sub button.

Delete Menu Item: ( Watch Video Guide Here )



• Delete Parent Item Only: Using this you can delete current item and if it has child element then it will make as root menu item.
• Delete Parent And Child Both Menu Items: Using this you can delete current item and its entire child menu items.
Notes:
• 1) When Menu item’s Sub Column Layout is set as a No Sub Item then its child element is not display in the frontend.



• 2) When menu item type is group and you drag that item as root item then it will not display at the frontend.



Set Group type menu item as child menu item for creating the columns.

Sample Menu Display on Frontend: ( Watch Video Guide Here )

• Mega Menu
• Horizontal
• 1. Full width mega menu :



• 2. Display menu item and static block in the menu :



• 3. Display feedback form with static block in the menu :



• 4. Fly out left alignment :



• 5. Fly out right alignment :



• Vertical Mega Menu On Left Side :



• Smart Expand



• Always Expand



• List Item



Mega Menu App in Your Store Front

---



Import/Export Menus




Import Menus Options

---

You can Import Mega Menus using below options :

1. Bulk Insert option will delete all previous menus and your new csv data will insert. So, please be careful & take Backup by Export Menu CSV first.

2. Append Menus will Import New Menus.

3. File was exported using the Update Menus template will only update Menus. (It prevents insertion of duplicate menus and updates menus as per changes made in Your CSV.)



Export Menu Csv

---

You can export Mega Menus menus by click on Export Menus

You can select Bulk Update template or Default template for CSV file. ( Watch Video Guide Here )

1. If you want to update menus then you can export CSV file using Bulk update template. After changes, you can import this CSV file and it will update the menus which are changed. Note : Do not change/update Menu Id column in CSV file.
2. Default template CSV file will not include Menus Id column and so it will not be used for Update Menus, if you re-import this csv file (with changes), it will insert the new Menus



Export Products

---

You can Export Products by Click on Export Product. ( Watch Video Guide Here )

The product csv will contain Product Id and Product Name. This csv will helps you if you want to create menu as a product page then you have to add Product Id in product row.

How to download Mega Menu Sample CSV?

---

1. Go to Admin >> Apps >> Mega Menu >>Import/Export( Watch Video Guide Here )
2. After that click on help button near Import Menus. From here, You can Download Sample CSV then Modify / Add entries in it.





Import Menus Description

---

Please make sure that if you do not fill required fields then your menu is not going to import. (Watch Video Guide Part#1 And Part#2 )

1. menu_type:You can add menu type in this column. This column is required.
2. menu_title:You can add menu title name in this column. This column is required.
3. class_subfix:You can add class name which you want to apply to your menu.
4. static_html:If your menu item's type is static_html then you can add your static html in this column. Please make sure that if your menu item's type is static html then this field is required.
5. group_name:Fill the name of group which you want to assign menus to. Please make sure that you have created group before you assign menu to it. This column is required.
6. showhidemenutitle:You can add Yes or No in this column. If your menu type is static html then and then please add yes or no as per your requirement of title display. Please make sure that if your menu item's type is static html then this field is required.
7. parent_menu: If you want to make your menu as child of another menu then you have to add title of parent menu. Also if another menu has parent then you have to add menu's path like shown in below image. If you want to set menu on root level then do not fill any values in it.



8. webpage: If you want to create menu as a webpage then you have to add webpage title in this column. For that, you have to go to storefront in your admin panel and then go to your Web Pages and you can see Page Name as mentioned in below image. Please make sure that if your menu item's type is Web Page then this field is required.



9. blog: If you want to create menu as a blog page then you have to add blog title in this column. For that, you have to go to storefront in your admin panel and then go to your Blog and you can see title as mentioned in below image. Please make sure that if your menu item's type is Blog then this field is required.



10. subcolumnlayout: In this column you can add subcolumn layout value. This field is required.
11. submenualign: In this column you can add submenu align value. This field is required.
12. status: You can set enable or disable menu by this column value. This field is required.
13. category: If you want to create menu as a category then you have to add category title in this column. For that, you have to go to Products in your admin panel and then go to your Product Categories and you can see Category Name as mentioned in below image.

    

14. If your category is child category then please add path upto category root level like mentioned in below image. Please make sure that if your menu item's type is Category Page then this field is required.



15. showcategoryimage:You can add Yes or No if you want to show category image or not. Please make sure that if your menu item's type is Category Page then this field is required.
16. showautosub:You can add Yes or No if you want to show category in auto sub or not. Please make sure that if your menu item's type is Category Page then this field is required.
17. showcustomcategoryimage:You can add Yes or No if you want to show custom category image or not. Please make sure that if your menu item's type is Category Page then this field is required.
18. product:If you want to create menu as a Product page then you have to add product id in this column. For that, you have to export products csv to get product id.
19. custom_url:If you want to create menu as a Custom Url then you have to add value to custom url column. Please make sure that if your menu item's type is Custom Url then this field is required.
20. external_url:You can add Yes or No if you want to use external url or not. Please make sure that if your menu item's type is Custom Url then this field is required.
21. permission:You can add permission value in this column.
22. window_target:You can add target value in this column.
23. custom_link_title:You can add description in this column.
24. showhidemenuthumbnail:You can add yes or no in this column if you want to display custom image in menu content.
25. custom_image_name:You can add image name of custom image in this column.
26. label_title:You can add title of label in this column.
27. label_font_size:You can add size of title in this column.
28. label_txt_color:You can add color of title font in this column.
29. label_bg_color:You can add backgroud color of title in this column.

Update Store Details and Shortcode

---

1. Go to Admin >> Apps >> Mega Menu >> How to Use It
2. If your store url has been changed then you need to update it for mega menu app from here. Click on Update Button and check the updated details. If your store url has been changed and after clicking on update button still the app is not working properly then you need to follow above Step-2 again to make the app working properly.

   

Keyboard accessibility and Screen reader Compatibility

---

Our mega menu app now offers new functionality, it's now compatible with screen readers and can be easily navigated using just the keyboard. As you have already setup Menu app (before April,2024), you can not have this functionality directly, you need to follow steps below:

1. Go to Admin >> Apps >> Mega Menu >> How to Use It >> Step-1. Download megamenuapp zip file again.
2. Extract the zip and go to megamenuapp/js/menu.js. Copy menu.js file and replace it with existing menu.js file in your store's webdav/content/megamenuapp/js.
3. Go to Mega menu app >> General Settings >> Publish the html.
4. Hard refresh the frontend. Now you can access menus using keyboard and menus are also compatible with screen reader.

If you prefer not to update this feature in the menu app, that's perfectly fine. Your current menus will remain unchanged. However, if you wish to incorporate this new functionality into the app, please follow the steps outlined above.

Uninstall App

---

There are three things that have to be done manually in your store admin:

• Uninstall the app from admin section.

  1. Go to Apps > My Apps
  

  2. Click Uninstall.

  
  

  3. The app will be removed from the My Apps section of the App Marketplace and the Apps bar in your Control Panel.

• Remove our application code and files from your store.

  Step-1:  Remove "megamenuapp" folder from your store's WebDAV section Content folder.

  Step-2:  Go to Admin >> Storefront >> Script Manager and if "Megamenuapplication" script exists then remove it.

  

  Step-3:  You need to find following code

  • Go to Edit Theme Files >> templates >> components >> common >> header.html and find below code and remove it.

    

• If you Uninstall our Megamenu App after Subscribing in PayPal then you must follow below steps:

  Step-1:  Login to your PayPal Account.

  Step-2:  Go to  Settings.

  Step-3:  Click Payments.

  Step-4:  Under "Preapproved payments", click Manage preapproved payments.

  Step-5:  Select the merchant whose agreement you want to cancel and click Cancel.

  Step-6:  Click Cancel Profile to confirm your request.

  If you have any questions then Click Here to find more details on the PayPal site or feel free to Contact Us.

Customer Support

---

If you have any questions, please do not hesitate to contact us at bigcommerce@capacitywebsolutions.com We are happy to help you.

Please add our email: bigcommerce@capacitywebsolutions.com to your address book to ensure our response email is not marked as spam mail.

We will try our best to reply your emails as soon as possible except weekends and National Holidays.

Thank you.
Capacity Web Solutions Team

Credits

---

1. PHP
2. PHP Mailer
3. Dompdf
4. jQuery Library
1. Copyright © 2022 - 2025 Capacity Web Solutions. All Rights Reserved.
2. BigCommerce Megamenu App