# Mega menu

{% embed url="<https://youtu.be/kI9kP6SxTts>" %}

Hyper theme offers a wide array of blocks for the mega menu, allowing you to create a highly functional and visually engaging navigation experience.

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

1. In the theme editor (**Customize**), locate the **Header** section.
2. Click **Add block**, then select the add-on type you want for your menu.
3. Make necessary changes.
4. Click **Save**.
   {% endhint %}

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

## Highlight link

This block allows you to make certain links stand out in the menu.

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

* **Menu item**: Type the name of the menu item exactly as it appears in your store’s navigation.&#x20;

For example, if you want to highlight the menu item **"On Sale"**, ensure the spelling matches.

* **Color**: Select a custom color for the highlight. This makes the link visually distinct from others in the menu.
* **Style**: Choose a visual effect to enhance the link’s appeal. Available options include:
  * **Text color** for having the menu item in a different color.
  * **Star twinkle** for a subtle animated effect.
  * **Button** to convert the link into a button.

## Custom link

Add a personalized link to your header navigation. This is ideal for including additional actions like “Find a Store,” “Track Order,” or any page that doesn’t already exist in your main menu.

<figure><img src="/files/04iqXVY9YxKDHCVuJmeU" alt=""><figcaption></figcaption></figure>

* **Label**: Type the name you want for the custom link.
* **Link:** Use the **Link** field to connect the label to a specific page. You can:
  * Select an existing page from the dropdown.
  * Paste a URL for external pages or links.
* **Icon**: Choose a built-in icon that matches the purpose of the link. For instance, select the **Location** icon for a store locator.

Upload your own icon using the **Select** or **Explore free images** option.

* **Icon size**: Adjust the size of the icon to fit your design preferences.

## Banner (Mega menu)

Add banners to your mega menu to enhance navigation and showcase promotions or featured content.

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

* **Menu item**: Type the name of the menu item exactly as it appears in your store’s navigation.&#x20;

For example, if you want to add a banner to the menu item 'Shop By Categories', ensure the spelling matches.

* **Menu columns**: Set the number of columns for your nested menu items.
* **Highlight link**: Enable this feature to draw attention to that main menu item.
  * **Color**: Select a color to highlight it from others.
  * **Style**: Adjust the text style to text color, star twinkle, or button for better visibility.
* **Banner settings:**&#x20;
  * **Width**: Adjust the width of the banner.
  * **Number of columns**: Specify how many columns the banners take up.
  * Add **up to 5 banners** in each main menu item.

Each banner can be customized individually.&#x20;

<details>

<summary>See settings</summary>

* **Color scheme**: Choose a predefined color scheme for the banner. See [Colors](/hyper-theme/theme-settings/colors.md)
* **Image**: Upload a relevant image or choose one from Shopify’s free image library.
* **Subheading, heading, description**: Add content for the banner.
* **Button label** and **Button style:** Add a call-to-action button to the banner and choose the style for it.
* **Content position** and Content alignment: Decide how the content show over the banner.
* **Link**: Add the destination link for the button.

</details>

## Custom card

Feature stunning image cards in your mega menu.

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

* **Menu item**: Type the name of the menu item exactly as it appears in your store’s navigation.&#x20;

For example, if you want to add a custom card to the menu item 'Chairs & Stools', ensure the spelling matches.

* **Menu columns**: Set the number of columns for your nested menu items.
* **Highlight link**: Enable this feature to draw attention to that main menu item.
  * **Color**: Select a color to highlight it from others.
  * **Style**: Adjust the text style to text color, star twinkle, or button for better visibility.
* **Card settings:**&#x20;
  * **Width**: Adjust the width of the banner.
  * **Number of columns**: Specify how many columns the custom cards take up.
  * Add **up to 5 custom cards** in each main menu item.

Each banner can be customized individually.&#x20;

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

## Product list

Add a featured product list to your mega menu to boost sales.

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

* **Menu item**: Type the name of the menu item exactly as it appears in your store’s navigation.&#x20;

For example, if you want to add a banner to the menu item 'Tables & Desks', ensure the spelling matches.

* **Menu columns**: Set the number of columns for your nested menu items.
* **Show menu column divider**: Toggle this on/off to display a divider between menu columns for better structure.
* **Highlight link**: Enable this feature to draw attention to that main menu item.
  * **Color**: Select a color to highlight it from others.
  * **Style**: Adjust the text style to text color, star twinkle, or button for better visibility.
* **Products list**:
  * **Heading**: Give the product list a heading.
  * **Width**: Adjust how much space the product list takes up in the menu dropdown.
  * **Number of columns:** Choose how many product columns to display.
  * **Products:** Select the products you want to display in your mega menu.
  * **Show vendor**: Enable this setting to display the vendor/brand name for the products.
  * **Show type**: Toggle this on to display the product type.

## Sidebar

Organize and display your store categories with added visuals. 2nd-level menu items will be display as a sidebar on the left.

{% hint style="success" %}
This works best when the **3rd-level menu items are collections**.
{% endhint %}

<figure><img src="/files/3EV5Cl9blOx8U4kxBNg1" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
A menu with 3-level nested items is suggested.

See [Editing menus](https://help.shopify.com/manual/online-store/menus-and-links/editing-menus).

![](/files/KVuRa3cy9GkmmqQCTnj5)
{% endhint %}

**Settings include:**

* **Menu item**: Type the name of the menu item exactly as it appears in your store’s navigation.&#x20;

For example, if you want to add a banner to the menu item 'Shop By Room', ensure the spelling matches.

* **Highlight link**: Enable this feature to draw attention to that main menu item.
  * **Color**: Select a color to highlight it from others.
  * **Style**: Adjust the text style to text color, star twinkle, or button for better visibility.
* **Right sidebar:**&#x20;
  * **Menu columns**: Adjust the number of columns of 3rd-level items to organize content.
  * **Show collection image**: Display a featured image for each collection in the sidebar.
  * **Use the first product image as the collection image:** Automatically use the first product’s image from the collection instead of a custom collection image.
  * **Image ratio**: Define how the collection images are displayed.

<details>

<summary>See how to set up collection images for menu menu's sidebar</summary>

To display collection images in the Sidebar Mega Menu, you’ll need to configure a Shopify metafield with the specified namespace and key. Follow these steps:

**Step 1: Add the Metafield definition**

1. Go to **Settings > Custom Data** in your Shopify admin.
2. In **Collections**, click **Add definition**.
3. <img src="/files/pBLzSLL6WOVO7Xbbkcz6" alt="" data-size="original">
4. Fill in the following details:
   * **Namespace and Key**: `foxtheme.collection_megamenu_image`
   * **Select type:** File.

<img src="/files/woUdGnWHpTx0XtG6ozLD" alt="" data-size="original">

5. Click **Save** to create the metafield definition.

**Step 2: Assign images to collections**:

1. Go to **Products** > **Collections** in your Shopify admin.
2. Select the collection you want to edit.
3. Add the metafield value under the newly created custom field (e.g., upload the desired image).

![](/files/WaLvRay942EINIAKWkv8)

</details>

***

<figure><img src="/files/6RW1JWuKNf9ovVFLkLXc" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_hyper&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>


---

# 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://docs.foxecom.com/hyper-theme/pages-global-sections/header/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.