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
  • 1. Open Powerful Megamenu section
  • 2. Section settings
  • 2.1. Simple menu
  • 2.2. Dropdown background color
  • 2.3. Dropdown column title
  • 2.4. Dropdown content
  • 2.5. Product settings
  • 3. Block settings
  • 3.1. General settings
  • 3.2. Text color
  • 3.3. Label settings
  • 3.4. For developer
  • 3.5. Dropdown's general settings
  • 3.6. Dropdown columns settings

Was this helpful?

  1. Static sections

Powerful Megamenu

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

PreviousMetafields GuruNextPowerful Megamenu(version tf-3.5 or older )

Last updated 3 years ago

Was this helpful?

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 .

1. Open Powerful 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 Megamenu section.

2. Section settings

Click on the section name to open the section settings.

2.1. Simple menu

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.

2.2. Dropdown background color

Set the background color for the dropdown menu.

2.3. Dropdown column title

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

2.4. Dropdown content

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.

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.

3.6. Dropdown columns settings

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

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 for managing blocks in a section.

Icon class: add the HTML icon class to show the icon. You can refer to to copy the icon class.

Label text color: set color labels that are shown in the link list. Please refer to.

this guide
https://boostheme.com/vodoma/icons
the old guide
this guide for adding labels to a link list