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 type of sample menus items to explain layout of our menus.


2. You can see below confirm box at 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.



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
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.
   • Copy and paste the downloaded zip file in the content folder and extract it. 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 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



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


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.

  

  • 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.
  • 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.
  • 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.
  • 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 Layouts. – Dropdown menu will set in two columns.
  • 3 Column Layouts. – Dropdown menu will set in three columns.
  • 4 Column Layouts. – Dropdown menu will set in four columns.
  • 5 Column Layouts. – Dropdown menu will set in five columns.
  • 6 Column Layouts. – Dropdown menu will set in six columns.
  • 7 Column Layouts. – Dropdown menu will set in seven columns.
  • 8 Column Layouts. – 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



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.

Label Options:

• 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:



• 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:

• 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

---



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.

   

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. Silex Framework
3. PDO
4. BigCommerce Stencil
5. Angular JS
6. jQuery Library
1. Copyright © 2022 - 2023 Capacity Web Solutions. All Rights Reserved.
2. BigCommerce Megamenu App