MegaNav for BigCommerce

Log into your BigCommerce control panel, and go to Account Settings > Users:

Click on Create a User Account:

Enter the following information for Your Store Wizards to have access to your store:

• Email: support@yourstorewizards.com
• Status: Active
• Preferred language: English
• User Role: Custom
• Under System Admin Permissions, check the following boxes:
  • Manage Settings
  • Store Design
  • Design Mode
  • Use Script Manager

Click Save.

Once the new user is created, please email us at support@yourstorewizards.com to let us know access has been granted so we can begin the installation of MegaNav.

To set up MegaNav, you will first need to launch the Page Builder, where settings are located and controlled.

To do this, log into your BigCommerce control panel and:

• If you do not have multi storefront, go to Storefront > Themes and click on Customize.
• If you have multi storefront, go to Channel Manager and choose the storefront the MegaNav is installed on and click on Edit Theme.

The Page Builder will then load:

From the Page Builder navigation bar, click on the painter's pallet icon, which will open up the Theme Styles menu:

Click on YSW MegaNav Global Settings, it's here where you set the global settings which are applied to both desktop and mobile.

Global Settings include:

• Enable MegaNav - allows you to turn MegaNav on or off on both desktop and mobile.  Turning it off will revert to the default navigation for your store's theme.
• Main Category Display Limit - the number of categories to display in the navigation bar.  They are displayed in the order they are in your BigCommerce store's Category setup.
• Global Parent Display Limit - the number of parent categories to display under each Main Category in the navigation bar.
• Global Child Display Limit - the number of child categories to display under each Parent category when the Main Category is expanded.

From the Page Builder navigation bar, click on the painter's pallet icon, which will open up the Theme Styles menu:

Click on YSW MegaNav Desktop Settings, it's here where you set the settings which are applied to the desktop version of the store's navigation.

Desktop Settings include:

• Enable Arrows - choose this option if you'd like a down arrow displayed next to the Main Category name on the navigation bar to indicate that the category can be expanded to see additional sub categories.
• Desktop Background Color Navbar - the background color of the navigation bar.
• Desktop Item Text Color - the hex color of the main category name displayed on the navigation bar.
• Desktop Item Text Color Hover - the hex color of the main category name displayed on the navigation bar when hovered over.
• Desktop Parent Background - the hex color of the background for the sub menu when the navigation bar is expanded.
• Desktop Parent Text Color - the hex color of the parent category name on the expanded navigation bar.
• Desktop Parent Text Color Hover - the hex color of the parent category name on the expanded navigation bar when hovered over.
• Desktop Parent Text Color Child - the hex color of the child category name on the expanded navigation bar.
• Desktop Parent Text Color Child Hover - the hex color of the child category name on the expanded navigation bar when hovered over.

The following settings control the optional banner ad that can be displayed on the expanded navigation bar.  We provide you with 10 available banners, more can be added if necessary at the time of installation.

• Desktop Parent Color Image Text - the hex color of the text displayed underneath the banner on the expanded navigation bar.
• Desktop Parent Color Image Text Hover - the hex color of the text displayed underneath the banner on the expanded navigation bar when hovered over.
• Desktop Banner 1 through 10 - the full URL to the image for the banner.  We recommend this image be 345 x 235.
  • The number (1 through 10) is determined by the numerical order of categories in your BigCommerce store, as defined in Products > Categories.
• Desktop Banner Title 1 through 10 - the text to display underneath the banner image, such as, "Learn more."
  • The number (1 through 10) is determined by the numerical order of categories in your BigCommerce store, as defined in Products > Categories.
• Desktop Banner Alt 1 through 10 - the ALT tag to be applied to the banner image.
  • The number (1 through 10) is determined by the numerical order of categories in your BigCommerce store, as defined in Products > Categories.
• Desktop Banner Link 1 through 10 - the full URL to where the banner image should link to.
  • The number (1 through 10) is determined by the numerical order of categories in your BigCommerce store, as defined in Products > Categories.

From the Page Builder navigation bar, click on the painter's pallet icon, which will open up the Theme Styles menu:

Click on YSW MegaNav Mobile Settings, it's here where you set the settings which are applied to the mobile version of the store's navigation.

Mobile Settings include:

• Mobile Background Color Navbar - the background color of the navigation bar.
• Mobile Item Text Color - the hex color of the main category name displayed on the navigation bar.
• Mobile Item Text Color Hover - the hex color of the main category name displayed on the navigation bar when hovered over.
• Mobile Parent Background - the hex color of the background for the sub menu when the navigation bar is expanded.
• Mobile Parent Text Color - the hex color of the parent category name on the expanded navigation bar.
• Mobile Parent Text Color Hover - the hex color of the parent category name on the expanded navigation bar when hovered over.
• Mobile Parent Text Color Child - the hex color of the child category name on the expanded navigation bar.
• Mobile Parent Text Color Child Hover - the hex color of the child category name on the expanded navigation bar when hovered over.

The following settings control the optional 100 x 100 mobile banner that can be displayed on the navigation bar to the left of the category name, as shown below.  We provide you with 10 available icon slots, more can be added if necessary at the time of installation.

• Mobile Banner 1 through 10 - the full URL to the image to be used.
  • The number (1 through 10) is determined by the numerical order of categories in your BigCommerce store, as defined in Products > Categories.