Mega Menu Builder: Setting Up Your Store’s Mega Menu

The Mega Menu Builder app enables you to quickly create a store navigation menu. You can build a mega menu that fits your store’s style through custom and personalized settings.

The app enables you to:

• Create large menus easily and quickly using pre-designed templates and an unlimited number of menu items.
• Improve store design through various design customizations to make your store more unique.
• Provide a clear and flexible navigation to improve customers’ shopping experience.
• Promote featured products and discount activities to boost sales by using various menu styles.

Building Menu

1. In the SHOPLINE App Store, you can install the Mega Menu Builder app.
   
2. Create mega menu: Three types of mega menus are supported currently, i.e., Vertical menu, Horizontal menu, and Label menu.
   

• • Vertical menu: Each menu item can have submenus added in turn, with up to 6 levels of menus. The menus are displayed from left to right, as shown in the figure below:
    
  • Horizontal menu: The horizontal menu is a menu style where menu items are displayed horizontally on the plane according to the rules you set, as shown below:
    
  • Label menu: It consists of a label menu area and a horizontal menu area. Each label is associated with a configuration for a horizontal menu, as shown below:
    

3. Choose a menu option for adding: By clicking Add menu, you can choose a pre-configured mega menu template according to your needs to quickly create your store’s mega menu.
   
   

Editing Menu

The app supports the design of various menus, including the text icon, product, category, and image. Different types of menus can be displayed in different styles.

• Text icon: Support editing title, description, icon, and corresponding redirect link of a text icon. After setting a link, clicking the menu will redirect to the corresponding link address.
• Product: Support selecting existing products in the store as menu items. The menu will display the corresponding product image, product title, product price, and other information. Clicking it will redirect to the corresponding product page.
• Collection: Support selecting existing product collections in the store as menu items. The menu will display the corresponding product collection cover and product collection title. Clicking it will redirect to the corresponding product collection page.
• Image: Support custom uploading images, and setting the image position and width to achieve custom image menu design.
  
  

Setting Menu Style

Click Style to set the global style of the mega menu you set up. Currently, the app supports setting the styles on mobile and PC versions by directly clicking the corresponding icons on both versions.

Custom Menu Style (Custom CSS)

If you have coding knowledge, you can use custom CSS to create the menu style you want. Add your custom CSS in the Style section to set the global style for the Mega Menu.


You can also add different custom CSS for each level of the menu. The styles are independent. Parent styles won’t affect child menus, and child menus won’t inherit styles from parent menus.

Example Code

Website Effect: When you hover the mouse over the menu, a line will appear above and below the item.

To achieve the above effect, add the following custom CSS in the Style section.

/* PC - Global */
/* Please change the background-color to the color you want */
.mega-menu-root-pc .mega-nav-title:hover span {
position: relative;
}

.mega-menu-root-pc .mega-nav-title:hover span::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: blue;
}

.mega-menu-root-pc .mega-nav-title:hover span::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background-color: blue;
}

/* Mobile - Global */
/* Please change the background-color to the color you want */
.mega-menu-root-mb .mega-nav-title:hover span {
position: relative;
}

.mega-menu-root-mb .mega-nav-title:hover span::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: blue;
}

.mega-menu-root-mb .mega-nav-title:hover span::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background-color: blue;
}

Configuring Menu on the Page and Making It Effective

After building your mega menu, you can configure the menu to take effect on the header by following the steps below.

1. Go to Style > Override theme default to configure the effective manner. You can check Apply to all themes or Specify theme to override.
   
   
2. In the app, enable Apply to Store.
   
   
   
   
3. Go to Admin Panel > Online Store > Design and enable mega menu Block in App embeds. After enabling, the menu will take effect on the page.
   
   

Updating Configuration Data

Suppose your configuration data (such as product titles and prices) is updated after you finish building your mega menu. In that case, you need to click Update data to update the latest configuration data in the app.

Translating Menu

To translate the content in your menu, click the Translate button in the upper right corner.

Select the target language you’d like to translate, then click Auto Translate or manually fill in the content.

Supported target languages are based on your multilingual settings. Path: Settings > Languages > Multilingual setting

Introduction to Incompatibilities with App

1. In the app, the Menu Split / Menu Collapse navigation layouts are not supported, applying such layouts will cause the menu to display abnormally.
   By going to SHOPLINE - Online Store > Design, you can select Design to enter the theme design page and then select Header to modify the corresponding navigation layout.
   After you modify the header settings in the theme design, the mega menu preview effect will not be displayed. You can click Save and then go to the store to view the mega menu display effect.
   
   
2. The vertical menu currently does not support scrolling for viewing. Therefore, please don’t set too many data items to avoid abnormal displays for the out-of-width limit.
   
   
3. For the Brooklyn theme template menu, configuring too many menu items may cause an abnormal display for the excessive height of the menu. Therefore, please don’t set too many menu items in the case of the Brooklyn theme template.