TABLE OF CONTENTS

• I. Main Menu: 
• II. Mega Menu
• III. MegaMenu settings: 

I. Main Menu: 

- In your theme settings, click Header Style 1 (1) in the section list, navigate to the Main Menu (2), and Select the Menu you just created.

In addition, you can set the labels "Hot" & "New" by typing exactly the trigger title of the Menu into the box.

II. Mega Menu

- Mega Trigger: Type the menu item's name that contains the Mega- Menu. Please note that the name entered in the Menu item must match the name of one of the first-level menu items. Here's an example in which the mega-menu is contained within the Demo item:

- Number of items per row: Adjust the quantity displayed per row for optimal layout and presentation.

E.g. 3 => This section is automatically separated equally into 3 rows.                                                         

- Section styles 

• Background Color: Choose a background color to enhance the visual appeal of the section.
• Heading Text Color: Define the color of the heading text 
• Text Color

- Text Hover Color: Specify the color of the text when hovered over by the cursor to provide visual feedback.

- Section Layout 

• Min Height: Specify the height for this menu item by adding the number followed by "px" (E.g., 200px).
• Max Width: Set the width for this menu item as a percentage by adding the number followed by "%" (E.g., 50%).

- MegaMenu Tab:

III. MegaMenu settings: 

Part 1. Setting up a menu within the Navigation settings

You must create a menu with multiple layers to add a Mega menu to your theme. This is done within the Navigation section of your Shopify admin. To begin, we'll set up the foundations of the mega Menu, a primary menu with one navigational layer.

Step 1: Within your Shopify admin, go to Online Store and continue to Navigation 

Step 2: Choose the menu you want to include in your header, or create a new one by clicking "Add menu."

Step 3: Add multiple navigational layers 

A Mega Menu Features a menu item with Multiple navigational layers, as the arrow signifies. 

For example, these navigational layers will be reflected on your storefront as the Mega Menu extends below the header.

E.g. 

1. Your mega menu is based on your 1st navigational layer (e.g. Pages)
2. The menu's categories can be found on its 2nd navigational layer (e.g. Contact Us) 
3. The items displayed on the menu can be found on its 3rd navigational (e.g. Contact option 1) 

Part 2: Adding the Mega menu block to your theme 

After you create a menu within the Navigation section of your Shopify admin, you can add it to your theme as a mega menu: 

Step 1: Go to the theme editor

Step 2: Add section Mega Menu 

Step 3: Add a block for each section to customize your mega menu to generate excitement about your promotion. 

Step 6:  Type the name of a first-layer menu into the box "Mega Trigger" item from your chosen menu into the Mega Menu entry field. In the example below, Demo, Menu Tabs, Collections, Shop,… all have multiple layers. Your Mega Menu will appear underneath your header to display its full range of navigation options. 

E.g. Demo

Note: Please ensure that you type in the menu item title exactly as it reads in your Navigation settings, including the correct case.

Style 1:

Step 7: Add Block  “ - - Menu”  and then select a menu; choose the menu that was created within Navigation and repeat this process- until all of your first layer menu items have been added. 

 Style 2: 

Step 7: Insert a Block labeled "[+] Mega Tab" at the pinnacle of each block, ensuring separation between each section of the Mega Menu Group. 

Step 8: Following the addition of the "[+] Mega Tab" block, proceed by including a block labeled "- - Product widget".

Step 9: Input any desired title within the "Text" box. Subsequently, select the products widget and repeat this process, as your Mega Tab menu items have been added.

E.g. 

Result: 

Style 3: Banner

Step 7: To add an image, open your " - - Banner"  block, click Image, then select an image.