> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/set-up-your-store/header-group/header/product-mega-menu.md).

# Product ( Mega Menu )

**Product (Mega Menu)** turns one of your top level menu items into a dropdown that shows real products instead of plain links. Shoppers see a grid of the products you pick as soon as they open that menu item in the header on desktop, which lets them jump straight to a best seller, a new arrival, or a promoted item without landing on a collection page first.

Pick this type when the menu item is about specific products. If the item should lead to categories, use [Collection ( Mega Menu )](/velare/set-up-your-store/header-group/header/collection-mega-menu.md); if it carries a campaign with images and a button, use [Banner ( Mega menu )](/velare/set-up-your-store/header-group/header/banner-mega-menu.md).

<figure><img src="/files/1A6trX1NfcaexMD41JKs" alt=""><figcaption></figcaption></figure>

### Where to find it <a href="#where-to-find-it" id="where-to-find-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. In the left sidebar, under the **Header** group, select the **Header** section.
3. Click **Add block**, then choose **Product ( Mega Menu )**.
4. In **Product ( Mega Menu )**, enter the name of the level 1 menu item this mega menu belongs to, matching the text exactly (including capitalization).
   {% endhint %}

*Result:* opening that menu item in the preview shows the featured products grid.

### General <a href="#general" id="general"></a>

<figure><img src="/files/WR9VgbbgZBVpbpjtY1Sl" alt=""><figcaption></figcaption></figure>

| Setting                  | Description                                                                                                                                                              |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Menu item**            | Ties this dropdown to one of your top level menu items. Type that item's name exactly as it reads in your menu, capitals included, or the item keeps its plain dropdown. |
| **Desktop menu columns** | How many columns the dropdown is split into on desktop. More columns show more at once, fewer columns give each item room to breathe.                                    |

### Products <a href="#products" id="products"></a>

<figure><img src="/files/jYp57SuBHoM8Pb5TTkhw" alt=""><figcaption></figcaption></figure>

| Setting               | Description                                                                                                                                                        |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Width**             | How much of the dropdown the product grid takes up, and how much room is left for the menu links beside it. Widen it when the products are the point of this menu. |
| **Number of columns** | How many products sit side by side. Fewer columns show each photo larger, more columns put the whole selection in front of shoppers at once.                       |
| **Heading**           | The short line above the grid that tells shoppers why these products are here, such as *Best sellers* or *New this week*.                                          |
| **Products**          | The exact products shoppers see in the dropdown. Nothing swaps in on its own, so revisit the list when an item sells out or is unpublished.                        |

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* The named menu item opens a wide dropdown containing the selected products, on desktop.
* Whether it opens on hover or on click follows the **Desktop dropdown menu trigger** setting on the [Header](/velare/set-up-your-store/header-group/header.md) page.
* If **Menu item** does not match a real level 1 item, including its capitalization, the item keeps its normal dropdown.
* Products you select here are curated by hand, so review them when a product goes out of stock or is unpublished.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Header](/velare/set-up-your-store/header-group/header.md): menu selection, dropdown trigger, and animation
* [Banner ( Mega menu )](/velare/set-up-your-store/header-group/header/banner-mega-menu.md): the campaign-led alternative
* [Collection ( Mega Menu )](/velare/set-up-your-store/header-group/header/collection-mega-menu.md): the collection-led alternative


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/set-up-your-store/header-group/header/product-mega-menu.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.