# Mega menu

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

In addition to standard dropdown menus, Pebble offers a Mega menu feature. The Mega menu lets you create a highly functional and visually engaging navigation experience.

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

## How to Set up a Mega menu <a href="#how-to-set-up-a-mega-menu" id="how-to-set-up-a-mega-menu"></a>

{% 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/060Gu0iFPAuN9Ayj8sHt" alt=""><figcaption></figcaption></figure>

## Mega menu types

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td align="center"><strong>Sidebar</strong></td><td><a href="/pages/RXpo7YzAxQNqzQz1NBPT#sidebar">/pages/RXpo7YzAxQNqzQz1NBPT#sidebar</a></td><td><a href="/files/3Y79Jyn22KvZWtBe6lJf">/files/3Y79Jyn22KvZWtBe6lJf</a></td></tr><tr><td align="center"><strong>Banner</strong></td><td><a href="/pages/RXpo7YzAxQNqzQz1NBPT#banner-1">/pages/RXpo7YzAxQNqzQz1NBPT#banner-1</a></td><td><a href="/files/qMJ6lb2rUEXizFb7uGu7">/files/qMJ6lb2rUEXizFb7uGu7</a></td></tr><tr><td align="center"><strong>Text with banners</strong></td><td><a href="/pages/RXpo7YzAxQNqzQz1NBPT#text-with-banners">/pages/RXpo7YzAxQNqzQz1NBPT#text-with-banners</a></td><td><a href="/files/UFJB1lJUfHzMatah1Pqa">/files/UFJB1lJUfHzMatah1Pqa</a></td></tr></tbody></table>

{% tabs %}
{% tab title="Sidebar" %}

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

Build a flexible, modern mega-menu with multiple layouts that allow you to display menu links, category thumbnails, banners, or product cards within a single rich dropdown panel.

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

{% 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/hmCtlZOX3EpP7KIyMs52)
{% endhint %}

#### Menu title

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

Connects this Sidebar block to one specific item in your store’s main navigation.

{% hint style="success" %}
How it works:

* Enter the **exact name of the menu item** (spelling must match).
* When the user hovers over or /clicks that menu item, this Sidebar block is displayed in the dropdown.
  {% endhint %}

<details>

<summary><em>Example</em></summary>

If your main navigation contains:

```
Shop | Collections | Pages | Features
```

And you want banners under 'Shop', you must type:

```
Shop
```

</details>

{% hint style="warning" %}
If it does not match exactly, the banners will not appear.
{% endhint %}

#### Menu columns

Controls how many columns are used to display your **3rd-level menu items**.

* Range: 2 - 4 columns

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

#### Right sidebar

{% hint style="info" %}
**How the Sidebar mega menu chooses which image to display:**

The menu automatically selects a collection image based on the following order.

Each step overrides the one before it:

**1 - Collection featured image:** This is the default image shown when "Show collection image" is enabled.&#x20;

**2 - Custom metafield image:** If you’ve added an image to the metafield `foxtheme.collection_megamenu_image`, this image will replace the featured image. [Learn more](#see-how-to-set-up-collection-images-for-mega-menus-sidebar-using-metafields)

**3 - First product image:** If the option "Use the first product image as the collection imag&#x65;**"** is turned on, the menu will use the first product’s featured image instead.
{% endhint %}

**Show collection image**

Enables the display of a collection image for each 3rd-level menu item, as long as those items are collections.

<div><figure><img src="/files/oz576sCwSEXy7Kw9Cxyf" alt=""><figcaption></figcaption></figure> <figure><img src="/files/IuExo6y3vhvb7BEf2p0L" alt=""><figcaption></figcaption></figure></div>

<details>

<summary>See how to set up collection images for mega menu's sidebar using Metafields</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 > Metafields and metaobjects** in your Shopify admin.

<div align="left"><figure><img src="/files/fjbF7VqOkDgwpjAFO26W" alt="" width="375"><figcaption></figcaption></figure></div>

2. In **Collections**, click **Add definition**.
3. Fill in the following details:

* **Namespace and Key**: `foxtheme.collection_megamenu_image`
* **Select type:** File.

<div align="left"><figure><img src="/files/JM88pDUAdQKePuGW16yv" alt="" width="375"><figcaption></figcaption></figure></div>

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).

<div align="left"><figure><img src="/files/7vrx9z6BF7JFf84TazFG" alt="" width="375"><figcaption></figcaption></figure></div>

</details>

**Use the first product image as collection image**

Automatically uses the first product image from each collection as its thumbnail.

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

{% hint style="info" %}
This works only when the **Show collection image** is enabled.
{% endhint %}

**Layout**

The right sidebar offers two main layouts:

* **With banner**: Shows a customizable banner on the right side.
* **With products**: Shows featured product cards on the right side.

{% tabs %}
{% tab title="With banner" %}
Shows a customizable banner on the right side.

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

[More settings for showing banners on the mega menu](#banner)
{% endtab %}

{% tab title="With products" %}
Shows featured product cards on the right side.

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

[More settings for showing products on the mega menu](#products)
{% endtab %}
{% endtabs %}

<details>

<summary>Products</summary>

*(when Layout = With Products)*

Allows you to select specific products to display inside the mega-menu for quick shopping access.

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

**Products**

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

Select the specific products to show.

* You can choose **up to 6 products**.
* Products appear in the order you select.

**Show product vendor**

Displays the product’s vendor/brand name above the product title.

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

**Show product type**

Displays the product type label above the product title.&#x20;

:writing\_hand: See [how to add a product type](https://help.shopify.com/en/manual/products/details/product-type)

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

**Show product badges**

Enables this setting to display the product badges such as custom badges,
&#x20;sold out badge and&#x20;
sale badge.

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

{% hint style="info" %}
See: [How to set up Product custom badges](/pebble-theme/theme-settings/product-badges.md)

See: [How to set up badges in Product cards](/pebble-theme/theme-settings/product-cards.md#badges)
{% endhint %}

**Width**

Controls how much horizontal space the product list itself takes **within the right side** of the mega-menu (in %).

**Number of columns**

Controls how many product cards are shown in a row.

* Range: 2 - 4 columns

</details>

<details>

<summary>Banner</summary>

*(when Layout = With Banner)*

Displays a customizable banner on the right side of your mega-menu.

<figure><img src="/files/5Q5zjlKq9noKHxozEgBr" alt=""><figcaption></figcaption></figure>

**Width**

Controls how much horizontal space the banner itself takes **within the right side** of the mega-menu (in %).

**Color scheme**

Applies your theme’s color styling to banner text and buttons.

{% hint style="info" %}
It works for **Top badge** and **Bottom button** designs only.
{% endhint %}

:writing\_hand: [Learn more about Color scheme](/pebble-theme/theme-settings/colors.md)

**Design**

Determines how text and buttons appear relative to the images.

* **Content below image**
* **Top badge**
* **Bottom button** (Badge does not appear in this mode)

**Image**

Upload or select the main desktop image for the banner and an optional mobile-optimized image.&#x20;

If left empty, the desktop image will be used on mobile devices.

**Image overlay opacity**

Adjusts the amount of color overlay placed over the banner image to improve text readability.

* Range: 0% – 100%

#### Content

*(when Layout = With Banner)*

This section controls the text and call-to-action inside the banner.

**Heading**

Enter the main title text for the banner.

**Heading size**

Choose the display size:

* Heading 1
* Heading 2
* Heading 3
* Heading 4
* Heading 5
* Heading 6

**Subheading**

Optional supporting text that appears above the heading.

{% hint style="info" %}
See how to adjust the [Subheading font style](/pebble-theme/theme-settings/typography.md#subheading).
{% endhint %}

**Badge**

Text displayed inside a small badge (e.g., "Hot", "Sale", "New").

<figure><img src="/files/ny5CabUVRxVFSr8bmJFL" alt="" width="377"><figcaption></figcaption></figure>

{% hint style="info" %}
Visibility rules:

* Appears in the **Top badge** and the **Content below image** designs
* Hidden in the **Bottom button** design
  {% endhint %}

**Button label**

Enter the text shown on the call-to-action button (e.g., "Show now").

{% hint style="info" %}
If you leave the **Button label** empty and set the **Button icon** to None, the button will disappear completely.
{% endhint %}

**Button link**

Select or enter the link the button should lead to.

Then, you can customize the button style, size, icon, and icon style as you want for it.

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

{% hint style="info" %}
Button icon style works only with the **Bottom button** design.
{% endhint %}

</details>
{% endtab %}

{% tab title="Banner" %}
Add banners to your mega menu to enhance navigation and showcase promotions or featured content.

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

#### Menu title

Connect this Banner block to one specific item in your store’s main navigation.

{% hint style="success" %}
How it works:

* Enter the **exact name of the menu item** (spelling must match).
* When the user hovers/clicks that menu item, this Banner block is displayed in the dropdown.
  {% endhint %}

<details>

<summary><em>Example</em></summary>

If your main navigation contains:

```
Shop | Collections | Pages | Features
```

And you want banners under Collections, you must type:

```
Collections
```

If it does not match exactly, the banners will not appear.

</details>

#### Menu columns

Control how many navigation columns for your nested menu items show on the left side of the mega menu.

* Range: 1 – 4 columns

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

{% hint style="info" %}
This does *not* affect how much space is left for banners on the right side; banner width is controlled separately.&#x20;
{% endhint %}

#### Banners

These settings control the overall layout of the banner area on the right side.

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

**Width**

Set how much horizontal space the banners occupy inside the dropdown.

* Range: 20% - 100%

**Columns**

Specify the number of columns the banners occupy.

* Range: 1 - 4 columns

**Mobile columns**

Control the number of banner columns shown on mobile devices.

* Option: 1 or 2 columns

**Color scheme**

Applies your theme’s color styling to banner text and buttons.

{% hint style="info" %}
It works for **Top badge** and **Bottom button** designs only.
{% endhint %}

**Design**

Determines how text and buttons appear relative to the images.

* **Content below image**
* **Top badge**
* **Bottom button** (Badge does not appear in this mode)

{% tabs %}
{% tab title="Content below image" %}

<figure><img src="/files/fv9sJRtwrzlu3GNKhVj2" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Top badge" %}

<figure><img src="/files/sh4DQyZGIwgmujcMMRfB" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Bottom button" %}

<figure><img src="/files/ZdgK1YDik50lpseXcWcJ" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

#### Banner #1 - #4

You can add up to 4 banner items. Each banner has the following settings:

**Image**

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

Upload or select the main desktop image for the banner. You can also upload an optional mobile-optimized image.&#x20;

If left empty, the desktop image will be used on mobile devices.

**Image overlay opacity**

Adjusts the amount of color overlay placed over the banner image to improve text readability.

* Range: 0% – 100%

**Heading**

Enter the main title text for the banner.

**Heading size**

Choose the display size:

* Heading 1
* Heading 2
* Heading 3
* Heading 4
* Heading 5
* Heading 6

**Subheading**

Optional supporting text that appears above the heading.

{% hint style="info" %}
See how to adjust the [Subheading font style](/pebble-theme/theme-settings/typography.md#subheading).
{% endhint %}

**Badge**

Text displayed inside a small badge (e.g., "Hot", "Sale", "New").

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

{% hint style="info" %}
Visibility rules:

* Appears in the **Top badge** and the **Content below image** designs
* Hidden in the **Bottom button** design
  {% endhint %}

**Button label**

Enter the text shown on the call-to-action button (e.g., "Show now").

{% hint style="info" %}
If you leave the **Button label** empty and set the **Button icon** to None, the button will disappear completely.
{% endhint %}

Select or enter the link the button should lead to. Then, you can select the button style, size, and button icon as you want.

{% tabs %}
{% tab title="Button icon style as Default" %}

<figure><img src="/files/urxHOmuzGoNLnUQWhbz6" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Button icon style as Solid" %}

<figure><img src="/files/j2ZcXXjAObb7fC5SuUa4" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
Button icon style works only with the **Bottom button** design.
{% endhint %}
{% endtab %}

{% tab title="Text with banners" %}
Combine a text column with a set of image-based banners inside your mega menu to highlight brand information, promotions, or featured pages.

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

#### Menu title

Connects this Text with banners block to one specific item in your store’s main navigation.

{% hint style="success" %}
How it works:

* Enter the exact name of the menu item (case and spelling must match).
* When the user hovers/clicks that menu item, this Text with banners block is displayed in the dropdown.
  {% endhint %}

<details>

<summary><em>Example</em></summary>

If your main navigation contains:

```
Shop | Collections | Pages | Features
```

And you want banners under Pages, you must type:

```
Pages
```

If it does not match exactly, the banners will not appear.

</details>

#### Text with banners

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

**Width**

Controls how much horizontal space the entire Text with banners section occupies inside the dropdown.

* Range: 20% - 100%

#### Text column

The text column appears on the left side of the layout.

<figure><img src="/files/6xPZhJxryEpAsoiMm38V" alt=""><figcaption></figcaption></figure>

**Heading**

Enter the title for the text column (e.g., "Who We Are").

**Heading size**

Choose the display size:

* Heading 1
* Heading 2
* Heading 3
* Heading 4
* Heading 5
* Heading 6

**Text**

Enter descriptive text or a short introduction (Supports rich text formatting).

#### Banners

This section controls the image banners displayed next to the text column.

<figure><img src="/files/9iN1sk1r3X8CAOQ0JUd5" alt=""><figcaption></figcaption></figure>

**Columns**

Specify the number of columns the banners occupy.

* Range: 1 - 4 columns

**Mobile columns**

Control the number of banner columns shown on mobile devices.

* Option: 1 or 2 columns

**Color scheme**

Applies your theme’s color styling to banner text and buttons.

{% hint style="info" %}
It works for **Top badge** and **Bottom button** designs only.
{% endhint %}

**Design**

Determines how text and buttons appear relative to the images.

* **Content below image**
* **Top badge**
* **Bottom button** (Badge does not appear in this mode)

{% tabs %}
{% tab title="Content below image" %}

<figure><img src="/files/TUYFhmPysEG4ean0z2UQ" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Top badge" %}

<figure><img src="/files/m4kfSCUEon3ZMUe8Vshf" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Bottom button" %}

<figure><img src="/files/D8s3bzjXZBvYIer2XMbr" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

#### Banner #1 - #4

You can add up to 4 banner items. Each banner has the following settings:

**Image**

<figure><img src="/files/68i9P3UiDlqOAAw95U55" alt=""><figcaption></figcaption></figure>

Upload or select the main desktop image for the banner. You can also upload an optional mobile-optimized image.

If left empty, the desktop image will be used on mobile devices.

**Image overlay opacity**

Adjusts the amount of color overlay placed over the banner image to improve text readability.

* Range: 0% – 100%

**Heading**

Enter the main title text for the banner.

**Heading size**

Choose the display size:

* Heading 1
* Heading 2
* Heading 3
* Heading 4
* Heading 5
* Heading 6

**Subheading**

Optional supporting text that appears above the heading.

{% hint style="info" %}
See how to adjust the [Subheading font style](/pebble-theme/theme-settings/typography.md#subheading).
{% endhint %}

**Badge**

Text displayed inside a small badge (e.g., "Hot", "Sale", "New").

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

{% hint style="info" %}
Visibility rules:

* Appears in the **Top badge** and the **Content below image** designs
* Hidden in the **Bottom button** design
  {% endhint %}

**Button label**

Enter the text shown on the call-to-action button (e.g., "View details").

{% hint style="info" %}
If you leave the **Button label** empty and set the **Button icon** to None, the button will disappear completely.
{% endhint %}

**Button link**

Select or enter the link the button should lead to.

**Button style**

Choose the visual style of the button:

* Primary
* Secondary
* White
* Outline

**Button size**

Select the size of the button:

* Extra small
* Small
* Medium
* Large

**Button icon**

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

Choose the icon displayed next to the button text.

**Button icon style**

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

Select how the icon is styled:

* **Default**
* **Solid**

{% tabs %}
{% tab title="Default" %}

<figure><img src="/files/ovUVMkF3zNOWl887GckC" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Solid" %}

<figure><img src="/files/Xwl6Y4uyTtrkwb1z2fYg" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
Button icon style works only with the **Bottom button** design.
{% endhint %}
{% endtab %}
{% endtabs %}


---

# 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/pebble-theme/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.