# How to create a mega menu?

### The look of a mega menu <a href="#the-look-of-a-mega-menu" id="the-look-of-a-mega-menu"></a>

* In Lumintheme, you can create a mega menu in which its contents are arranged in columns, like this:

<figure><img src="https://16317214-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7B3IJeztKkmI6RdD8j2l%2Fuploads%2Fxfk0kY6FA52i17dwknhH%2FScreenshot%202025-07-25%20at%2015.46.32.jpg?alt=media&#x26;token=98aaa1c5-d346-4eaa-bfae-0fa5669c0a71" alt=""><figcaption></figcaption></figure>

The mega menu is a combination of two parts: menu items and promotions:<br>

<figure><img src="https://16317214-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7B3IJeztKkmI6RdD8j2l%2Fuploads%2FQYYbBSJqXQbJRTRQSEff%2FScreenshot%202025-07-25%20at%2015.57.23.jpg?alt=media&#x26;token=e313ef3a-cca0-46cc-88b9-98e434938281" alt=""><figcaption></figcaption></figure>

### Setting up mega menu <a href="#setting-up-mega-menu" id="setting-up-mega-menu"></a>

{% stepper %}
{% step %}

### Create & Setup your menu

First, you need to setup your menu in multiple levels by using the native Shopify navigation. To learn how to create menu in multiple levels (dropdown), please check out the [official Shopify documentation](https://help.shopify.com/en/manual/online-store/menus-and-links#create-a-drop-down-menu). Below is an example of a menu structure to accommodate the mega menu in the very first screenshot:

<figure><img src="https://16317214-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7B3IJeztKkmI6RdD8j2l%2Fuploads%2F4S00fC3Cjgx884dUVqtf%2FScreenshot%202025-07-25%20at%2016.01.06.jpg?alt=media&#x26;token=27b03475-0728-470c-a589-6759d1682c54" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Add menu to header in theme settings

In your theme settings, click Header in the section list, navigate to the Menu setting and choose the menu you just created above.

<figure><img src="https://16317214-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7B3IJeztKkmI6RdD8j2l%2Fuploads%2Fx8NjXUA03kZNGS0SbKAo%2FScreenshot%202025-07-25%20at%2016.12.57.jpg?alt=media&#x26;token=dd9ce82c-8bb9-4fdd-88fb-807844720c98" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### To continue setting up the mega menu, click Add Mega menu to add a mega menu block:

<figure><img src="https://16317214-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7B3IJeztKkmI6RdD8j2l%2Fuploads%2FoWxFhdVwkwvhZkDsllek%2FScreenshot%202025-07-25%20at%2016.35.54.jpg?alt=media&#x26;token=ac29b8ed-729c-4431-b26b-41b111945f44" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### In the Mega menu setting, just type the name of the menu item that contains the mega-menu. Please note that the name entered in Menu item must match the name of the menu items. Here's an example in which the mega-menu is contained within the Shop item:

<figure><img src="https://16317214-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7B3IJeztKkmI6RdD8j2l%2Fuploads%2F6uYf1AmTEbqIYRKZ20v1%2FScreenshot%202025-07-25%20at%2016.39.12.jpg?alt=media&#x26;token=ddff36c9-3020-41e5-a59f-aedf9cfcb393" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### In the Menu item setting, you can optionally *upload up to 5* images for different promotions. These images will be displayed in the mega menu banner.

<figure><img src="https://16317214-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7B3IJeztKkmI6RdD8j2l%2Fuploads%2Fe07GNocrFxLGpJZqj0I6%2FScreenshot%202025-07-25%20at%2016.41.50.jpg?alt=media&#x26;token=fdee26c4-4fe2-4058-99e6-ae4bcedc0131" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Here's an example of the Collections menu with 4 promotions:

<figure><img src="https://16317214-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7B3IJeztKkmI6RdD8j2l%2Fuploads%2Fp0tp8o2cKDct6LJCVZuD%2FScreenshot%202025-07-25%20at%2016.43.31.jpg?alt=media&#x26;token=cc20a082-82af-46a6-8fbb-1a615089dc2e" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

### Mega menu block settings <a href="#mega-menu-block-settings" id="mega-menu-block-settings"></a>

<table><thead><tr><th width="108.52734375">Section</th><th width="150.1796875">Settings</th><th>Description</th></tr></thead><tbody><tr><td>Mega Menu</td><td>Menu Link Name</td><td>Enters the name of the menu item that you want to contain the mega menu. Please note that the name entered in Menu item must match the name of one of the first-level menu items.</td></tr><tr><td></td><td>Menu Width</td><td>S - 1 columns M - 2 Columns L - 3 Columns Full - Full width</td></tr><tr><td></td><td><h4>Featured Image</h4></td><td><p>When a second level item of navigation links to a collection with an image, this will have the image displayed above the title of the link. Here's an example:</p><p>Furniture second level item:</p><p><a href="https://cdn.shopify.com/s/files/1/0599/3182/0194/files/concept__how_to_create_a_mega_menu__009.png?v=1697518588"><br></a><img src="https://16317214-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7B3IJeztKkmI6RdD8j2l%2Fuploads%2FPkmXiy3ex2dX98loIbvn%2FScreenshot%202025-07-25%20at%2016.41.33.jpg?alt=media&#x26;token=57787981-f75c-4c30-9f0e-400e0f515748" alt=""></p></td></tr><tr><td></td><td></td><td><p>This is because the Headphones item is linked to a collection that has image:</p><p>  <img src="https://16317214-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7B3IJeztKkmI6RdD8j2l%2Fuploads%2F2lgGoIuDCzaR2TMw1Lbw%2FScreenshot%202025-07-25%20at%2017.09.22.jpg?alt=media&#x26;token=cf03cef7-0825-49a1-9f1e-569001982a6a" alt="" data-size="original"></p><p></p><p><img src="https://16317214-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7B3IJeztKkmI6RdD8j2l%2Fuploads%2FsyHVXcjX8sBquVdl1cs3%2FScreenshot%202025-07-25%20at%2017.11.26.jpg?alt=media&#x26;token=c567066a-9e89-4068-a011-be2a85e3ba1d" alt=""></p></td></tr><tr><td>Promotion</td><td>Image</td><td>The image that you want to display.</td></tr></tbody></table>


---

# Agent Instructions: 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:

```
GET https://help.lumintheme.com/lumin-theme-documentation/header/how-to-create-a-mega-menu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
