|
Once you have purchased the Shift4Shop Mega Menu Builder module (and received confirmation that it has been installed), the following instructions will help get you started with Shift4Shop's Mega Menu Builder.
Note
Note that the Mega Menu Builder is intended to work only with CORE themes.
- Log into your Shift4Shop Online Store Manager
- Using the left hand navigation menu, go to Modules
- Once you get to the Modules page, use the search bar at the top and search for the "Mega Menu" module
- Then, click on the "Settings" button shown within the module
At this point, you'll see a page with two sections:
- Settings
- How to use the mega menu?
Along the top right hand side of the page, you'll see a button labeled "Launch Menu Builder" but let's go over the basic settings on this page first.
Settings section
Within the Settings section, you'll be given the option to set the basic look and feel of your menu. This section will contain the following options:
- Mega Menu Theme
This will determine if the menu selections will be presented in a dark theme or a light color theme.
- Main Nav Background Color
Use this color selector to determine the background color that will display on the main menu navigation.
- Man Nav Text Color
Use this color selector to determine the text color that will display on the main menu navigation.
- Main Nav Width
This setting will let you determine if the menu will appear as FULL width on your site, or within a container.
Note
If you select within a container, the resulting width will be determined by whichever container the menu code is placed (see next section).
Launch the Mega Menu Builder
In the top right hand side of the page, you will see a button labeled "Launch Menu Builder"
Clicking this button will show you a representation of the Menu (with your selected colors and settings) and three basic examples of mega menu presentations:
- Tree
All menus and sub-menus are presented in a tree with the sub menus being shown in "flyout" fashion. This option allows up to 3 levels of sub menus (main, sub1, sub2, sub3)
- Column
Each menu option is shown as a column with an image that links to whatever page you specify. This option only allows for one level of sub. (main, sub) and it is set for a display of four separate columns.
- Tabbed
This option will display as a tabbed menu which will first show the main menu in a tree, the second menu listing with a small thumbnail image and its resulting third level displayed as four linked images to the respective landing page.
- List Column
This option will display the sub-menus in a columned view
These are all merely examples and you can either edit them to meet your needs, or delete them to start from scratch.
- Add+
This final option in the default menu builder will let you add additional menus as needed to the menu builder.
Note that with this option , you can also add a menu option that is presented as a simple Link
Using the Builder
The builder itself is fairly self-explanatory. As you hover over each element, you will see an "edit" option that then lets you delete the element or fill in your information like the menu name/title, the URL that the menu link actually goes to, etc. When applicable (Column and Tabbed menus), you can use the edit option to add your images as well. The browse button provided will take you directly to your store's file manager to locate the image(s) as needed.
Note
When specifying URL for the menu item to link to, you do not need to add your whole domain name in the URL. Typically if the page you are linking to is on your store, then you only need whatever is after the first forward slash. For example, if the link is going to yourdomain.com/product1.html, you only need to specify "product1.html" as the URL.
Once you are done editing the menu items to your liking, click "Save" at the top right of the menu builder to commit your changes.
As you add additional items to your menu, you can revisit the menu builder to add more content as needed.
After you save the MegaMenu Builder page, you can click on the "Back" button to go back to the module's settings page described earlier.
How to use the mega menu? section
In this section of the page, you will see a special code that will be used to insert the mega menu into your site's HTML. The code for the mega menu must be placed within your frame.html file. A button linking you to your site's frame.html file is provided for convenience.
Where to Apply the Code
As to the question of where in the frame.html file the code should be placed, that is entirely up to you. Most users will want to have the mega menu replace their site's existing nav bar menu, so that is usually a good place to choose. Typically, this element is labeled "navbar-wrapper" in your theme's frame.html file. Some trial and error may be necessary.
For more information on how to do this, along with some common troubleshooting steps to take when doing so, please see our article here.
Once you have placed the code, save your frame.html file. Your menu should now be active on the store.
Tip
Be sure to click on the "View Store" button to clear your store's cache and see the results of your Mega Menu!
|