Beloria Documentation
  • Welcome
  • Installation
  • Header
  • Footer
  • Shopify apps
    • Boostheme Toolkit app
    • Metafields Guru
  • Static sections
    • Powerful Megamenu
      • Powerful Megamenu(version tf-3.5 or older )
    • Powerful Mobile Megamenu
      • Powerful Mobile Megamenu ( version tf-3.5 or older )
    • Product pages
      • Main product section
      • Main product - Reviews
      • Main product - Tabs
      • Main product - Upsell
      • Main product - Cross-sell
      • Old version ( tf-3.5 or older )
    • Collection pages
      • Version tf-3.5 or older
    • Blog pages
    • Posts
    • Cart page
      • Cross-sell products Section
    • Search result page
    • FAQ
  • Dynamic sections
    • Collection and product
      • Collection filter
      • Collection list
      • Flexible collection list
      • Powerful product block
      • Powerful product block 2
      • Powerful product columns
      • Product single deal
      • Simple product slider
      • Vedette product ( single product )
    • Banner & image
      • Banner creator pro
      • Layer banner
      • Information list
      • Instagram slider
      • Logo list
      • Banner & quotes
    • Text
      • Custom HTML
      • Testimonials
      • Text list
    • Marketing & others
      • Featured blog posts
      • Newsletter
      • Contact us
      • Map
      • Loox widget
      • About us 1
      • About us 2
      • About us 3
  • Theme settings
    • General
    • Collections list page
    • Typography
    • Breadcrumbs
    • Multiple languages
    • Colors & Font sizes
    • Social media
    • Favicon
    • Product settings
    • Product labels
    • Currency
    • Cart
    • Shipping rates calculator
    • Upsell products
    • Cross-sell ( recommendation ) products
    • Recently viewed products
    • Progressive web app
    • Sales notification
    • Search suggestion
    • Newsletter
    • Promotion bar
    • Cookie consent
  • For developer
  • Tips
  • Manage blocks in a section
  • Cross-sell ( recommendation ) rules
  • Change log
  • Upgrade to a new version
    • From versions older than tf-4.0
Powered by GitBook
On this page
  • Open Powerful Mobile Megamenu section
  • Global color settings
  • Global font size settings
  • Menu item types
  • 1. Top items by link list
  • GENERAL SETTINGS
  • LAYOUT SETTINGS
  • COLORS
  • 2. Parent( Level 1 ) item
  • GENERAL SETTINGS
  • COLORS
  • FOR DEVELOPER
  • 3. Child item - Link list
  • GENERAL SETTINGS
  • LAYOUT SETTINGS
  • COLORS
  • FOR DEVELOPER
  • 4. Child item - Image
  • GENERAL SETTINGS
  • LAYOUT SETTINGS
  • COLORS
  • FOR DEVELOPER
  • 5. Child item - Custom HTML
  • GENERAL SETTINGS
  • LAYOUT SETTINGS
  • COLORS
  • FOR DEVELOPER

Was this helpful?

  1. Static sections
  2. Powerful Mobile Megamenu

Powerful Mobile Megamenu ( version tf-3.5 or older )

Build your main navigation easily by drag & drop the menu items. This menu is shown on the mobile screen.

PreviousPowerful Mobile MegamenuNextProduct pages

Last updated 3 years ago

Was this helpful?

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

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.

To see the changes in this section, you need to adjust the Theme Editor Preview to the mobile screen. Please refer to the below image.

Global color settings

Configure colors for Level 1, 2, 3 items, label, and the text overlay image. In an item, the global color settings may be overridden by its own color settings.

Global font size settings

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

Menu item types

Mobile Megamenu is built based on the menu item types. Our theme provides 5 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.

1. Top items by link list

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 with this type can render lots of level 1 menu items.

GENERAL SETTINGS

  • 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.

  • 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.

LAYOUT SETTINGS

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

COLORS

  • Extend from the global color settings: tick this checkbox to override the global color settings by below color settings.

  • 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.

2. Parent( Level 1 ) item

This is the top-level item. All other child item types will be shown in a drop-down of this item. So you have to put it before child items on the Theme Editor page.

GENERAL SETTINGS

  • 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 URL: add a link to the menu item.

COLORS

  • Extend from the global color settings: tick this checkbox to override the global color settings by below color settings.

  • Item title( Level 1): configure color for the title.

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

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

FOR DEVELOPER

  • Custom HTML class: add your custom HTML class.

3. Child item - Link list

GENERAL SETTINGS

  • 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 URL: add a link to the title.

  • Pick a link list: choose a link list to display it as level 3 menu items. Only display the top-level in the chosen link list.

LAYOUT SETTINGS

  • Item's width: adjust the width of the menu item. There are 2 options: full or half.

  • Show the link list in 2 columns: tick this checkbox to display the link list in 2 columns.

Tips: If you want to display the link list in 2 columns, we recommend configuring the item's width to full to display the link list fine.

COLORS

  • Extend from the global color settings: tick this checkbox to override the global color settings by below color settings.

  • Item title( Level 2 ): configure color for the title.

  • Link list( Level 3 ): configure color for the link list.

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

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

FOR DEVELOPER

  • Custom HTML class: add your custom HTML class.

4. Child item - Image

GENERAL SETTINGS

  • 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.

  • Image: pick or upload your image.

  • The text overlay: type your text to display override the image. This text will display as a level 3 menu item. So color and font size settings for the level 3 item will be applied to this text.

  • URL: add a link to the title and image.

LAYOUT SETTINGS

  • Item's width: adjust the width of the menu item. There are 2 options: full or half.

COLORS

  • Extend from the global color settings: tick this checkbox to override the global color settings by below color settings.

  • Item title( Level 2 ): configure color for the title.

  • Text overlay( Level 3 ): configure color for text overlay.

  • Text overlay background: configure background color for text overlay.

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

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

FOR DEVELOPER

  • Custom HTML class: add your custom HTML class.

5. Child item - Custom HTML

GENERAL SETTINGS

  • 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 URL: add a link to the title.

  • Your text or HTML: type your text or HTML to display it as a level 3 menu item.

LAYOUT SETTINGS

  • Item's width: adjust the width of the menu item. There are 2 options: full or half.

COLORS

  • Extend from the global color settings: tick this checkbox to override the global color settings by below color settings.

  • Item title( Level 2 ): configure color for the title.

  • Item text( Level 3 ): configure color for the link list.

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

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

FOR DEVELOPER

  • Custom HTML class: add your custom HTML class.

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

This is a child item type. So you need to put in front of it.

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

This is a child item type. So you need to put in front of it.

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

This is a child item type. So you need to put in front of it.

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

a parent item
a parent item
a parent item
the new guide
this guide
this guide
this guide
this guide
Style 1
Style 2
The Item's width is set to "half"
Display the link list in 2 columns and the item's with is set to "full"