Create Megamenu
Steps to Configure and Arrange a Mega Menu, Including Banner Extensions, within the Classic Header
Menu Structure Creation
To begin, you must establish the foundational menu structure, including items and sub-items, within the administrative panel.
Shopify Administration: To create menus, access your Shopify admin panel and navigate to Content > Menus. Refer to the official Shopify documentation for comprehensive instructions regarding menu creation and management.
Header Type Verification
Verify that the Classic header type is currently active and visible within the Header section of your theme settings. Only one header design should be designated as active at any given time.
Implementation of Mega Menu Items
Subsequently, integrate a subsection into your active header configuration designated as Megamenu items.
Detailed information regarding Mega Menu items and their configuration options can be found in the theme documentation: https://wokiee.gitbook.io/docs/header/header-design/common-blocks-for-all-header-designs/megamenu.
Also here pay attention to the Grid sizes in the option Grid for menus.
Crucial Naming Convention: The Mega menu item name must precisely match the corresponding admin menu item name (see below item 5).
Utilization of Mega Menu Modules
The Megamenu modules section allows for the addition of dynamic content blocks, such as banners and various other elements.
For information on common Mega Menu modules, review the dedicated documentation chapter: https://wokiee.gitbook.io/docs/header/header-extensions/megamenu-modules.
Individual Module Assignment: Every item from your administrative menu (e.g., Women, Men, Home) must be represented as a separate Megamenu Item block within the Megamenu modules section.
The available block types are listed in the right-hand navigation of the following chapter: https://wokiee.gitbook.io/docs/header/header-extensions/megamenu-modules/megamenu-item.
Example: Our primary demonstration utilizes the Banner and Banner with text outside blocks.
Structure Duplication with Fake Navigation Links: The Fake navigation links block serves to replicate the real column structure defined by the menu item's sub-items.
Illustrative Scenario: Consider a "Women" menu item that is structured with two columns and incorporates banners. To position the columns on the left and the banners on the right, you must add two Fake navigation link blocks. These blocks will mirror the two columns containing the sub-items for the "Women" menu.
This option applies only to the “Closed” header type.
The top field disappears when this option is enabled.
Last updated