Customize Roller theme: Mega Menu
Mega menus is a type of expandable menu in which many choices are displayed in a two-dimensional dropdown layout. It is an excellent design choice for accommodating a large number of options or for revealing lower-level.
Mega menu will be displayed on desktop as below:
When viewed on a mobile device, the columns in the Mega menu will stack vertically. All of the menus added to the Mega menu will display as drop-down menus:
In this article, we will guide you on how to create mega menu in Roller theme and customize its content to your preference.
A. Create Mega Menu
B. Mega Menu Settings
From your ShopBase admin site, go to Online Store > Themes > Customize.
In the Header section of the Sections tab, click Add block.
Select Mega menu.
For each mega menu you've enabled, enter a Link title that matches the link in the main menu that you want the mega menu to appear under.
The Link title must match the wording of the main menu link exactly and is not case sensitive. For example, if you want your mega menu to appear under the "MEN" menu item, the Link title must be named precisely "MEN".
To add a new column into one main menu link, repeat steps 2 and 3 to add another mega menu. Then, in Link title, enter the same main menu link.
Click Save.
The Content settings are for configuring each column in the Mega Menu. In each column, you can configure Top Content, Navigation, and Bottom Content. All of these are optional and you can remove its content if necessary.
Top Content: allows you to edit Text area, Image, Image caption, and Image link.
Navigation: includes the option to add up to 4 menus into one column of your mega menu. You can choose each menu from the dropdown list and then add a link to the title of the menu. Please refer to this article on how to add a menu to your store.
Bottom Content: is similar to the Top Content except that it will appear at the bottom of the column. It includes Image, Image caption, Image link, and Text area:
Add a menu
Customize Header sections
Home page sections
Product page sections
Customize Roller theme: Settings - Color
Language Translation in your store
Convert Currency in your store
Mega menu will be displayed on desktop as below:
When viewed on a mobile device, the columns in the Mega menu will stack vertically. All of the menus added to the Mega menu will display as drop-down menus:
In this article, we will guide you on how to create mega menu in Roller theme and customize its content to your preference.
In this article
A. Create Mega Menu
B. Mega Menu Settings
A. Create Mega Menu
From your ShopBase admin site, go to Online Store > Themes > Customize.
In the Header section of the Sections tab, click Add block.
Select Mega menu.
For each mega menu you've enabled, enter a Link title that matches the link in the main menu that you want the mega menu to appear under.
The Link title must match the wording of the main menu link exactly and is not case sensitive. For example, if you want your mega menu to appear under the "MEN" menu item, the Link title must be named precisely "MEN".
To add a new column into one main menu link, repeat steps 2 and 3 to add another mega menu. Then, in Link title, enter the same main menu link.
Click Save.
B. Mega Menu Settings
The Content settings are for configuring each column in the Mega Menu. In each column, you can configure Top Content, Navigation, and Bottom Content. All of these are optional and you can remove its content if necessary.
Top Content: allows you to edit Text area, Image, Image caption, and Image link.
Navigation: includes the option to add up to 4 menus into one column of your mega menu. You can choose each menu from the dropdown list and then add a link to the title of the menu. Please refer to this article on how to add a menu to your store.
Bottom Content: is similar to the Top Content except that it will appear at the bottom of the column. It includes Image, Image caption, Image link, and Text area:
Related articles
Add a menu
Customize Header sections
Home page sections
Product page sections
Customize Roller theme: Settings - Color
Language Translation in your store
Convert Currency in your store
Updated on: 24/08/2022
Thank you!