BigCommerce Mega Menu App User Guide


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.

Introduction


Mega Menu is a application allows you to truly customize the menu and submenu items according to your choice. Choose different menu styles, customize the menu features and add thumbnail images to make the menu attractive and useful.

 Check Live Demo Here

Get Mega Menu App


Click here to visit our BigCommerce App >> BigCommerce Mega Menu App

Please watch the video which explained the complete Mega Menu app installation, setup process and also explained how our app works.

Installation video
Detailed Explanation of Features

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.

      Download

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

    Re-install

  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.

    Step3 Copy Code

     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).

    Step3 Go To Theme

    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.

    Step4 Cornerstone Theme

Mega Menu App in Your Store Front


Mega Menu in frontend

General Settings


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

  3. 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.
    • Developer mode is added to make the app to work faster then earlier. It will use Static HTML when you are turning on Developer mode

      Select "On" when you are working on menu item like add, edit, add sub in the menu item or change menu item option.
      If Developer Mode Set as "Off" and you want to make changes at the front end then click on PUBLISH button for refresh generated html which are use for display menu item for decrease page load.
      Note: Select "On" when you are working on staging/development environment. In production environment (when you make your site live) set this to "Off", by doing this it will generate Static HTML Code for your menu(s).Please note that this will decrease page load time and help you to speed up your site.