Powerful Mobile Megamenu

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 Mobile Megamenu section

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme that you want to edit and click Customize.

  3. Click the Powerful Mobile Megamenu section.

2. Global font size settings

Configure font size for Level 1, 2, 3 items, and label.

3. Menu item types

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

This is a level item type. This item type will help you display a hierarchy of menu items quickly. This is a special item, it's not a parent, also a child item. An item of this type can render lots of level 1 menu items.

GENERAL SETTINGS

  • Pick a Shopify Navigation: pick a Shopify Navigation ( Link list ) to display top and child items.

  • Children style: specify a style to display child items.

Style 1
Style 2

LAYOUT SETTINGS

  • Show the link list in 2 Columns: display child items in 2 columns. Only work on children's style 1.

COLORS

  • Level 1: configure color for level 1 items.

  • Level 2: configure color for level 2 items.

  • Level 3: configure color for level 3 items.

  • Label text color: configure color for the text in a label.

  • Label background color: configure the background color for a label.

3.2. Menu item

GENERAL SETTINGS

  • Item title: the menu item title that will be shown at the storefront. You can refer to this guide to add a label, icon to the title. The title will be displayed as a level 1 menu item.

  • Title URL: add a link to the menu item.

COLORS

  • Level 1: configure color for level 1 items.

  • Level 2: configure color for level 2 items.

  • Level 3: configure color for level 3 items.

  • Label text color: configure color for the text in a label.

  • Label background color: configure the background color for a label.

FOR DEVELOPER

Add your custom HTML for the item.

CHILD ITEM (LEVEL 2 & 3) SETTINGS

This item type offers 5 children items. Below are settings in a child item:

  • Enable: tick to show the child item.

  • Title: add the item's title. The title will be shown as a level 2 item.

  • URL: set the link for the item.

  • Item's width: adjust the width of the item's content. The item content will be shown as a level 3.

  • Item content ( level 3 ):

    • Pick a link list: choose a link list to display in the item content.

    • Show the link list in 2 columns: tick to show the link list in 2 columns.

    • Label color: set the color of labels that are shown in the link list. Please refer to this guide for adding labels in a link list.

    • Label background color: set the background color of labels that are shown in the link list.

    • Image: pick or upload an image to display in the item content.

    • The text overlay: add text to display override the image.

    • URL: set the link for the image.

    • Your text or HTML: add custom text or HTML to display in the item content.

Last updated

Was this helpful?