# Mega menu
A plain dropdown shows a list. A mega menu gives you the width of the page: several columns of links, collection images, a promotional banner, and a line about the brand. Add one for each top-level menu item that needs it, and leave the rest as ordinary dropdowns.
### Before you start
* Set up your menu in **Shopify Admin > Content** > [**Menus**](https://admin.shopify.com/content/menus) before configuring the mega menu. Learn how to [edit menu in Shopify](https://help.shopify.com/en/manual/online-store/menus-and-links/editing-menus).
* The mega menu pulls its menu items and submenus from the [Shopify menu you select in the theme editor](https://docs.foxecom.com/motrix-theme/global-sections/header#menu).
* **Shopify menus support up to 3 levels**. For the best experience with 3-level menus, use mega menu types such as [Collection links](https://docs.foxecom.com/motrix-theme/global-sections/header/mega-menu#collection-links), [Sidebar](https://docs.foxecom.com/motrix-theme/global-sections/header/mega-menu#sidebar), or [Vertical](https://docs.foxecom.com/motrix-theme/global-sections/header/mega-menu#vertical).
Menu levels in Shopify
## How to set up a Mega menu in Motrix
1. In the theme editor, locate the **Header** section > **Mega menu**.
2. Click **Add block**, then select the add-on type you want for your menu.
3. Make necessary changes.
4. Click **Save**.
## How a panel attaches to a menu item
Every mega menu block has a **Menu title** setting. The theme matches it against the top-level items of the menu set in the **Header** section, and the panel opens under the item it matches.
Type the menu item's name exactly as it appears in your menu. Capitals and spacing do not matter, but a different word does — rename the item in Shopify admin and the panel stops appearing until you update Menu title to match.
Your **menu levels** map onto the panel like this:
**Level 1** - The item customers hover or tap. This is what **Menu title** points to.
**Level 2** - The headings inside the panel — the column titles, collection cards, or sidebar groups, depending on the layout.
**Level 3** - The links listed under each heading.
## Mega menu layouts
Pick one of five layouts when adding a mega menu block. Each panel uses one layout, and you can mix layouts across menu items.
### Banners
Add **banners** to your mega menu to enhance navigation and showcase promotions or featured content.
A banner mega menu layout includes two main parts:
* **Menu item list:** Displays the level 2 menu items as a vertical list on the left.
* **Banners – Image cards:** Displays image card banners on the right to highlight products, collections, promotions, or other content.
#### Banners menu setting
| Setting | Description | Option |
| ---------------------------- | --------------------------------------------------------------------------------------------------------- | -------------------- |
| **Menu title** | Enter a menu label that **exactly matches the Main Menu item** you want to set up as a Banners mega menu. | Enter Text |
| **Menu columns** | Set how many columns are used to organize the menu items. | 1 - 4 |
| **Banners - Width** | Set the width of the banner area. This setting applies when the menu item contains sub-items. | 20% - 100% |
| **Banners - Columns** | Set how many columns display the banner content on desktop. | 1 - 4 |
| **Banners - Mobile columns** | Set how many columns display the banner content on mobile. | 1 column / 2 columns |
Menu title - Choose a menu item to set up Banners
* Increase **Menu columns** when your menu item list contains many items. This gives each item more space and keeps the menu easier to scan.
* Match the **Banners** - **Columns** setting to the number of **Image cards** you add. For example, use 3 columns for 3 banners to keep the layout balanced.
* On mobile, choose **2 columns** when you have several Image cards and want to make better use of the available screen width.
#### Image card settings
For Image card settings, see the [Image card page](https://docs.foxecom.com/motrix-theme/theme-blocks/image-card) for details.
Add an Image card block to the banners menu
### Collection links
A mega menu layout that combines **custom links** (on the left) with **collection links** (on the right) from your selected Shopify menu.
* [**Collection links**](https://docs.foxecom.com/motrix-theme/global-sections/header/mega-menu#collection-links-settings)**:** Display the top-level menu items along with their submenu items. These **links are pulled directly** from the menu selected for the header.
* [**Custom links**](https://docs.foxecom.com/motrix-theme/global-sections/header/mega-menu#custom-links-settings)**:** Add links that **are not included** in the selected menu, such as New Arrivals, Best Sellers, Deals, or other pages you want to highlight.
Collection links work with **3-level menu items** so that you can organize your collections and subcollections into a structured mega menu. For the best results, use **collections as the level 3 menu items**.
#### Collection links settings
| Setting | Description | Option |
| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| **Menu title** | Enter a menu label that **exactly matches the Main Menu item** you want to set up as a Collection links mega menu, such as | Enter text |
| **Menu columns** | Set how many columns the collection links menu uses to organize its categories. | 2 - 4 |
| **Show collection image** | Display collection image you set up in Shopify admin for each collection | On / Off |
| **Use the first product image as the collection image** | Use the first product image from each collection when the collection doesn't have an image. | On / Off |
| **Aspect ratio** | Set the shape of collection images on desktop. | Adapt to image / Square (1/1) / Portrait (3/4) / Landscape (4/3) |
| **Aspect ratio mobile** | Set the shape of collection images on mobile. | Inherit / Adapt to image / Square (1/1) / Portrait (3/4) / Landscape (4/3) |
| **Corner radius** | Round the corners of collection images. | 0px - 32px |
Menu title - Choose a menu item to set up Collection links
The collection image shown will be the 2-level collection menu item image. For more details about **collection image display logic,** see [How the mega menu chooses which collection image to display](https://docs.foxecom.com/motrix-theme/global-sections/header/mega-menu#how-the-mega-menu-chooses-which-collection-image-to-display)
You can also use **metafields to set up collection images** shown in the mega menu. See [How to set up collection images using metafields.](https://docs.foxecom.com/motrix-theme/global-sections/header/mega-menu#how-to-set-up-collection-images-for-mega-menus-using-metafields)
#### Custom link settings
| Setting | Description | Option |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
| **Label** | Enter the text displayed for the custom link. | Enter Text |
| **Link** | Select the page customers are redirected to when they click the custom link. | Select a page |
| **Badge - Text** | Enter the text displayed on the badge next to the custom link. | Enter Text |
| **Badge - Style** | Choose the badge style. Badge styles are managed in [**Theme settings**](https://docs.foxecom.com/motrix-theme/theme-settings/colors#product-badge-colors). | Select a badge style |
A custom link setting
How to add a custom link to Collection links mega menu
### Sidebar
A mega menu layout that combines a sidebar menu with collection content and optional promotional blocks.
* [**Sidebar** ](https://docs.foxecom.com/motrix-theme/global-sections/header/mega-menu#sidebar-settings)**menu list:** Displays level 2 menu items in a sidebar. When customers hover over a level 2 item, its level 3 submenu items appear alongside the corresponding collection image.
* [**Additional blocks**](https://docs.foxecom.com/motrix-theme/global-sections/header/mega-menu#additional-blocks)**:** Add blocks such as **Image cards** or **Products** on the right to highlight featured collections, products, promotions, or other content.
The Sidebar works with menus that have **3 levels**. For the best result, use **collections as the level 3 menu items**.
#### Sidebar settings
| Setting | Description | Option |
| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
| **Menu title** | Enter a menu label that **exactly matches the Main Menu item** you want to set up as a Collection links mega menu, such as | Enter text |
| **Menu columns** | Set how many columns the collection links menu uses to organize its categories. | 2 - 4 |
| **Show collection image** | Display collection image you set up in Shopify admin for each collection | On / Off |
| **Use the first product image as the collection image** | Use the first product image from each collection when the collection doesn't have an image. | On / Off |
| **Aspect ratio** | Set the shape of collection images on desktop. | Adapt to image / Square (1/1) / Portrait (3/4) / Landscape (4/3) |
| **Right sidebar - Width** | Set the width of the right sidebar. This setting applies when the menu item contains sub-items. | 20% - 100% |
Right sidebar position
For more details about **collection image display logic,** see [How the mega menu chooses which collection image to display](https://docs.foxecom.com/motrix-theme/global-sections/header/mega-menu#how-the-mega-menu-chooses-which-collection-image-to-display).
You can also use **metafields to set up collection images** shown in the mega menu. See [How to set up collection images using metafields.](https://docs.foxecom.com/motrix-theme/global-sections/header/mega-menu#how-to-set-up-collection-images-for-mega-menus-using-metafields)
#### Additional blocks
* **Image card:** For Image card settings, see the [Image card page](https://docs.foxecom.com/motrix-theme/theme-blocks/image-card) for details.
* **Products:** Find the settings in the table below
| Setting | Description | Option |
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------- |
| **Products** | Select specific products to display inside the mega-menu for quick shopping access. | Select up to 6 products |
| **Show product vendor** | Displays the [**product’s vendor/brand name**](https://docs.foxecom.com/motrix-theme/theme-settings/product-cards#content) above the product title | On / Off |
| **Show product type** | Displays the [**product type**](https://docs.foxecom.com/motrix-theme/theme-settings/product-cards#content) label above the product title. | On / Off |
| **Show product badges** | Enables this setting to display the [**product badges**](https://docs.foxecom.com/motrix-theme/theme-settings/badges) such as custom badges, sold out badge and sale badge. | On / Off |
| **Layout - Columns** | Controls how many product cards are shown in a row. | 2 - 4 columns |
| **Layout - Horizontal gap** | Set the horizontal spacing between cards. (when you add from 2 products) | 0px - 100px |
| **Mobile layout - Columns** | Controls how many product cards are shown in a row on mobile view | 1 - 2 columns |
| **Mobile layout - Horizontal gap** | Set the horizontal spacing between cards on mobile. (when you add from 2 products) | 0px - 100px |
### Text with banners
A mega menu layout that combines promotional text, image banners, and a menu item list. It includes three main parts:
* [**Text column**](https://docs.foxecom.com/motrix-theme/global-sections/header/mega-menu#text-with-banners-settings)**:** Displays a heading and content text to introduce a category, highlight a promotion, or provide additional information.
* [**Banners – Image cards**](https://docs.foxecom.com/motrix-theme/global-sections/header/mega-menu#image-card-settings-1)**:** Displays image card banners to showcase featured products, collections, promotions, or other content.
* **Menu item list:** Displays the connected menu items in a vertical list on the far right, giving customers quick access to different categories or collections.
#### Text with banners settings
| Setting | Description | Option |
| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | ------------- |
| **Menu title** | Enter a menu label that **exactly matches the** **Main Menu** item you want to set up as a Text with banners mega menu. | Enter Text |
| **Text with banners - Width** | Set the width of the **Text with banners area**. This setting applies when the menu item contains sub-items. | 20% - 100% |
| **Text column - Heading** | Add a heading for the text column. | Enter Text |
| **Text column - Heading size** | Choose the heading size. | Heading 1 - 6 |
| **Text column - Text** | Add supporting text to introduce or describe the content. | Enter Text |
| **Banners - Columns** | Set how many columns display the banners on desktop. | 1 - 4 columns |
| **Banners - Mobile columns** | Set how many columns display the banners on mobile. | 1 - 2 columns |
Text with banners area
* Increase **Width** when your **Text with banners** content needs more horizontal space.
* Use **2 columns** on mobile when you have several banners to make better use of the available space.
* Keep the text concise so the **Text column** doesn't become much taller than the banner content.
#### Image card settings
For Image card settings, see the [Image card page](https://docs.foxecom.com/motrix-theme/theme-blocks/image-card) for details.
Add an Image card block to the Text with banners menu
### Vertical
A mega menu layout that **displays submenu items in a vertical menu**. When customers hover over a menu item with a third-level submenu, its level 3 items appear vertically in the adjacent column.
The **Vertical** layout includes two main parts:
* [**Vertical menu**](https://docs.foxecom.com/motrix-theme/global-sections/header/mega-menu#vertical-settings)**:** Displays level 2 menu items on the left. Hovering over a level 2 item reveals its level 3 submenu items in the adjacent column.
* [**Banners - Image cards**](https://docs.foxecom.com/motrix-theme/global-sections/header/mega-menu#image-cards-settings)**:** Display promotional image cards on the right to highlight products, collections, or other content.
The vertical works with **menu items that have 3 levels**.
#### Vertical settings
| Setting | Description | Option |
| -------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| **Menu title** | Enter a menu label that **exactly matches the Main Menu item** you want to set up as a Collection links mega menu, such as | Enter Text |
| **Title** | Add the **main label** displayed for the **vertical menu** when customers hover over the applied menu item. | Enter Text
Leave blank to use the menu item's title. Displays only on desktop. |
| **Banners - Width** | Set the width of the banner area. | 200px - 600px |
| **Banners - Vertical gap** | Set the vertical spacing between banners. (when you add from 2 image cards) | 0px - 100px |
| **Mobile layout** | Set the vertical spacing between banners on mobile. | 0px - 100px |
Set up a vertical menu title
#### Image card settings
For Image card settings, see the [Image card page](https://docs.foxecom.com/motrix-theme/theme-blocks/image-card) for details.
Add an Image card block to the vertical menu
## How the mega menu chooses which collection image to display
The [**Sidebar** ](https://docs.foxecom.com/motrix-theme/global-sections/header/mega-menu#sidebar)and [**Collection links**](https://docs.foxecom.com/motrix-theme/global-sections/header/mega-menu#sidebar) mega menu layouts can display collection images. The theme selects the image based on the following priority order, with each option overriding the one before it:
1. **Collection featured image** — Uses the collection's featured image by default when **Show collection image** is enabled.
2. **Custom metafield image** — If you add an image to the megamenu image metafield, the mega menu uses this image instead of the collection's featured image. [Learn more](https://docs.foxecom.com/motrix-theme/global-sections/header/mega-menu#how-to-set-up-collection-images-for-mega-menus-using-metafields).
3. **First product image** — If **Use the first product image as the collection image** is enabled, the mega menu uses the first product's featured image instead.
## How to set up collection images for mega menus using metafields
Use a custom collection metafield when you want to control the image displayed for each collection independently from its featured image.
This setting applies to [Sidebar](https://docs.foxecom.com/motrix-theme/global-sections/header/mega-menu#sidebar)and [Collection links](https://docs.foxecom.com/motrix-theme/global-sections/header/mega-menu#sidebar) mega menu layouts that can display collection images.
1. Go to **Settings > Metafields and metaobjects** in Shopify Admin.
2. Under **Collections**, click **Add definition**.
3. Enter the following details:
* **Name:** Add a descriptive name, such as `Collection megamenu image`.
* **Namespace and key:** Enter `foxtheme.collection_megamenu_image`. To use a different collection image on **mobile**, create another collection metafield with the namespace and key `foxtheme.collection_megamenu_image_mobile`.
* **Type:** Select **File**. 
4. Click **Save**.
1. Go to **Products > Collections** in Shopify Admin.
2. **Select the collection** you want to edit.
3. Find the custom **mega menu image metafield** you created.
4. **Select the image** you want to display in the mega menu. 
The mega menu will use the metafield image instead of the collection's featured image when **Show collection image** is enabled. 
## How a panel attaches to a menu item
Every mega menu block has a **Menu title** setting. The theme matches it against the top-level items of the menu set in the **Header** section, and the panel opens under the item it matches.
