How to build mega menu

#

Mega Menu

A mega menu is a submenu in which the top-level item has two levels of nested drop-down menus. A mega menu impacts how shoppers discover your product offerings and other information, which lets them browse easily and seamlessly. It is a perfect design choice when building a website with multiple categories and subcategories. The design also provides sufficient space for images (banners) and other rich content. Different websites require different kinds of menus, depending on the size, nature, and objectives of your store.

Menu

#

The menu in the item shop is part of the mega menu

You need to have a menu available that includes the items you want to add to the mega menu. See how to create a shopify menu

In the theme editor (Customize), click section Header add block Menu (Mega Menu). Here you can make the necessary configurations.

#

Config menu on mega menu
  • For item : Add the current block to the mega menu of a header menu item.
  • Heading : Fill heading for block
  • Block width : Set block width.
  • Menu : Select the menu displayed.
  • Custom Css : Add custom css for block.

Banner

#

The banner in the item shop is part of the mega menu
In the theme editor (Customize), click section Header add block Banner (Mega Menu). Here you can make the necessary configurations.

#

Config banner on mega menu
  • For item : Add the current block to the mega menu of a header menu item.
  • Heading : Fill heading for block
  • Block width : Set block width.
  • Title : Fill in the title for the banner.
  • Subtitle : Fill in the subtitle for the banner.
  • Description : Fill in the description for the banner.
  • Banner Image : Choose a photo as a banner.

Products List

#

The product list in the item shop is part of the mega menu
In the theme editor (Customize), click section Header add block Products List (Mega Menu). Here you can make the necessary configurations.

#

Config product list on mega menu
  • For item : Add the current block to the mega menu of a header menu item.
  • Heading : Fill heading for block
  • Block width : Set block width.
  • Collection : Select collection.
  • Limit product : Maximum number displayed.
  • Custom Css : Add custom css for block.

Custom Liquid

#

Add custom liquid in the item shop is part of the mega menu
In the theme editor (Customize), click section Header add block Custom Liquid (Mega Menu). Here you can make the necessary configurations.

#

Custom Liquid on mega menu
  • For item : Add the current block to the mega menu of a header menu item.
  • Heading : Fill heading for block
  • Block width : Set block width.
  • Add custom Liquid or Html : Add custom Liquid or Html for Mega menu.
  • Custom Css : Add custom css for block.
On this page
Check