# Megamenu

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FuAlAL1zpDSTSaLzDzeH4%2Fheader_14.jpg?alt=media&#x26;token=9965b2da-92ab-4c52-8c8b-51ee9548ca51" alt=""><figcaption></figcaption></figure>

**Location:** `Header → Header Design → Classic Menu -> Megamenu`

The **Megamenu** section allows you to create advanced dropdown navigation with multiple columns, images, and grouped menu items. It provides an organized and visually appealing way to display collections, categories, or promotional content directly within your main navigation.\
This section is available only within the **Classic Menu** and is designed to enhance the user experience on stores with extensive catalogs.

***

## **Megamenu — Options Overview**

| **Category**                 | **Option / Setting**                      | **Description / Available Values**                                                                                                                                                             |
| ---------------------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **General Settings**         | **Open megamenu**                         | Enables preview of the megamenu inside the Shopify theme editor. *This option only functions in the admin panel to simplify editing and layout adjustments.*                                   |
|                              | **Mega menu item name**                   | Enter the exact name of the main menu item that should trigger the megamenu when hovered or clicked.                                                                                           |
|                              | **Grid for menus**                        | Set how many columns are displayed in the megamenu layout. **Range: 2–8 items.**                                                                                                               |
|                              | **Submenu font size**                     | Defines the font size hierarchy for submenu content. **Options:** Big, Small, Small-Big, Big-Small.                                                                                            |
|                              | **Heading link size / Submenu link size** | Controls the text size of main headings and submenu links within the megamenu.                                                                                                                 |
|                              | **Group menu items**                      | Groups menu links under shared headings for better organization. *This feature works only with menu items that do not include a third submenu level.*                                          |
|                              | **Items alignment**                       | Sets horizontal alignment of menu items inside the megamenu. **Options:** Left, Center.                                                                                                        |
| **Images for Level 2 Items** | **Image hover effect**                    | Controls the visual effect applied to images when hovered. **Options:** Basic theme settings, Disable, Zoom in #1, Zoom in and rotate, Zoom in #2, Zoom out #1, Zoom out #2, Slide, Shine.     |
|                              | **Image ratio**                           | Defines the aspect ratio of images used in the second-level menu items. **Options:** Auto, Portrait (3:4), Landscape (4:3), Square (1:1), Round (1:1), Social story (9:16), Widescreen (16:9). |
|                              | **Images for menu items #1–#16**          | Add up to **16 individual images** to represent each second-level menu item. Each image can correspond to a specific collection, product, or category.                                         |
| **Colors (Desktop)**         | **Heading**                               | Sets the color of main headings in the megamenu.                                                                                                                                               |
|                              | **Heading hover**                         | Defines the color of headings when hovered.                                                                                                                                                    |
|                              | **Link**                                  | Sets the default link color for submenu items.                                                                                                                                                 |
|                              | **Link hover**                            | Defines the link color when hovered.                                                                                                                                                           |
|                              | **Background**                            | Controls the background color or gradient for the megamenu area.                                                                                                                               |
|                              | **Shadow**                                | Adds or customizes the shadow below the megamenu for better depth and visibility.                                                                                                              |
