Powerful Megamenu(version tf-3.5 or older )
Last updated
Was this helpful?
Last updated
Was this helpful?
This guide only matches with version tf-3.5 or older. If you want are using version tf-3.5 or newer, please refer to the new guide.
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 6 menu item types that will help you build the menu easily. To add a menu, click the Add content button, then choose an item type you want to add.
If you would like to use a simple menu such as a link list instead of the mega menu. Just tick Show a link list as a menu, then pick a link list you want to show. The specified link list will be shown instead of the mega menu.
In 6 menu item types, there is one parent item type and 5 subitem types. All subitems will be displayed in the drop-down of the parent item which is adjacent just in front of their position.
The below content will help you understand all menu item types clearly.
This is the top-level item. All other item types will be shown in a drop-down of this item.
Menu Name: This setting is only used to help you find the items in Theme Settings easily. It will not be shown at the storefront. Tips: use the prefix " Parent -" for the parent items and "---" for the sub-items will help you organize the items better.
Title: the menu item title that will be shown at the storefront.
Item link: add the link of the menu item.
Dropdown width: adjust the width of the dropdown menu. Leave 0 to display the dropdown with auto width.
Icon class: insert the icon to the menu item title. You can refer to this icon page, copy the HTML class of the icon you want to insert, then paste it into this setting.
Custom class: add your custom HTML class. Use this setting if you have the knowledge about HTML, CSS, and Shopify Liquid code.
Use default value: tick this checkbox to use the color is configured at Theme settings > Colors & Font sizes > Header style settings (base on the header style is being chosen for the desktop and tablet screens) > Text color or text color in the bottom area if exist.
Color: if the above checkbox is not ticked, the color in this setting will be used.
Use default value: tick this checkbox to use the background color is configured at Theme settings > Colors & Font sizes > Header style settings (base on the header style is being chosen for the desktop and tablet screens) > Background color or background color in the bottom area if exist.
Background color: if the above checkbox is not ticked, the color in this setting will be used.
Name: add the title of the label.
Text color: pick a color for the text in the label.
Background color: pick a color for the background of the label.
These settings appear in all subitems.
Menu name: This setting helps you find the item easily in Theme Settings. It is not displayed at the storefront.
Tittle settings:
Title: add the title of a menu item.
Align: align the title.
Position: set the title's position. Top or bottom of the subitem's content.
Extend text color from parent: tick this checkbox to apply the text color of the parent item for the title.
Text color: pick a color for the title. Only work if the above setting is not ticked.
Layout settings
Column width: by default, the dropdown always has the same 12 columns like Bootstrap's layout. You can grant the number of columns as the width of a subitem.
Horizontal inside gutter: adjust the gutter on the left and right of the subitem.
Vertical inside gutter: adjust the gutter on the top and bottom of the subitem.
Disable Gutter on: specify the position to remove the gutter on it.
Own background settings:
Enable: turn on/off the background.
Background color: pick a background color.
Background Image: pick or upload your image to display it as a background image.
Layout:
Inside: show the background in the gutters.
Outside: show the background out the gutters.
No repeat: no-repeat the background image.
Use external background: show background by an external image URL.
External background Url: add your external image URL.
Shopify navigation: pick a link list to display it. If your site does not have any link list, you can create a new link list in Online Store > Navigation. Refer to this article https://help.shopify.com/en/manual/sell-online/online-store/menus-and-links for more details about the link list.
Extend text color from parent: tick this checkbox to apply the text color of the parent item for the link list.
Text color: pick a color for the link list. Only work if the above setting is not ticked.
You can refer to this guide for adding a label to the link list.
Extend from parent item's text color: tick this checkbox to apply the text color of the parent item for the label.
Text color: pick a text color for the label. Only work if the above setting is not ticked.
Background color: pick a color for the label's background.
Pick an image: pick or upload your image to display it.
Image size: add your image size to resize the image. You can refer to the image size syntax there.
The link for image: add an URL for the image.
Note: image size setting only helps you compress the image to a valid size for optimizing performance. It does not help you display the image bigger. If you want to display the image bigger, you can increase the width of the subitem. View the Layout settings in common settings for more details.
Display a product in the menu dropdown.
Pick a product: pick a product from your store to display it.
Other product item settings: please refer to this guide for more details.
Add your custom HTML. You can also change the text color for the texts in your HTML.
Content settings: add your custom HTML.
Extend from parent item's text color: tick this checkbox to apply the text color of the parent item for texts in your HTML.
Text color: pick a text color for texts in your HTML. Only work if the above setting is not ticked.
Display a line in the menu dropdown. It will help you to separated different contents well.
Line height: adjust the thin of the line.
Tips: you can background color settings to set up the color for the line.
