Powerful Megamenu

Build your main navigation easily by drag & drop the menu items. This menu is shown on the desktop and tablet screens.

This guide only matches with version tf-4.0 or newer. If you want are using version tf-3.5 or older, please refer to the old guide.

1. Open Powerful Megamenu section

From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit and click Customize.
Click the Powerful Megamenu section.

Megamenu is built based on the menu item types. Our theme provides 8 menu item types that will help you build the menu easily. Each item is a block. Please refer to this guide for managing blocks in a section.

2. Section settings

Click on the section name to open the section settings.

If you would like to display the menu by a link list. Just use the settings in this part and ignore section blocks.

Show a link list as menu: tick to enable this feature.
Pick a link list: choose a link list to show it as the menu.
Top item color: set color for top items.

Set the background color for the dropdown menu.

Set color, adjust the font size for the column title.

2.5. Product settings

Apply for the products that have been in the dropdown menu.

3. Block settings

3.1. General settings

Title: add your text to show it as the menu item's title.
Item link: add URL for the menu item.
Icon class: add the HTML icon class to show the icon. You can refer to https://boostheme.com/vodoma/icons to copy the icon class.

3.2. Text color

Set color for the text in the top level.

3.3. Label settings

Add your label, set the color and background for it.

3.4. For developer

Add custom HTML class for the item.

3.5. Dropdown's general settings

Adjust the width of the item's dropdown.

Depend on the menu item type you added, the number of columns in the dropdown is from 0 to 6. A column is a child item in the dropdown This guide shows you the settings in a column.

Column's width: adjust the width of the column. By default, the dropdown is always separated into the same 12 cols like Bootstrap's layout. You can adjust the width of the child item by changing the number of cols.
Column title: add your text to display it as the title of the child item.
Link list: pick a link list to display in the child item's content.
Label text color: set color labels that are shown in the link list. Please refer to this guide for adding labels to a link list.
Label background color: set color labels that are shown in the link list.
Pick a product: pick a product to display in the child item's content.
Pick an image: pick or upload an image to display in the child item's content.
The link for the image: set URL for the image.
Open the link in a new tab: turn on/off opening in a new tab when customers click the image.
Add your HTML: add your custom HTML to display in the child item's content.