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

![image](https://docs-assets.foxecom.app/pebble-theme/Fox-BG%20Light%20-%202025-12-08T142440.484_LU6Axemy.jpg)

## How to Set up a Mega menu

<Hint type="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**.

</Hint>

![image](https://docs-assets.foxecom.app/pebble-theme/image_060Gu0iF.png)

## Mega menu types

<Cards>
<Card title="Sidebar" image="https://docs-assets.foxecom.app/pebble-theme/Fox-BG%20Light%20-%202025-12-08T153928.830_3Y79Jyn2.jpg" href="https://docs.foxecom.com/pebble-theme/global-sections/header/mega-menu#sidebar" />
<Card title="Banner" image="https://docs-assets.foxecom.app/pebble-theme/Fox-BG%20Light%20-%202025-12-08T154050.949_qMJ6lb2r.jpg" href="https://docs.foxecom.com/pebble-theme/global-sections/header/mega-menu#banner-1" />
<Card title="Text with banners" image="https://docs-assets.foxecom.app/pebble-theme/Fox-BG%20Light%20-%202025-12-08T154117.154_UFJB1lJU.jpg" href="https://docs.foxecom.com/pebble-theme/global-sections/header/mega-menu#text-with-banners" />
</Cards>

<Tabs>
<Tab title="Sidebar">

![image](https://docs-assets.foxecom.app/pebble-theme/image_NbqB1ok7.png)

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 type="success">

This works best when the **3rd-level menu items are collections**.

</Hint>

<Hint type="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).

![](https://docs-assets.foxecom.app/pebble-theme/image_hmCtlZOX.png)

</Hint>

#### Menu title

![image](https://docs-assets.foxecom.app/pebble-theme/image_vRhJXYK3.png)

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

<Hint type="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.

</Hint>

<Expandable title="Example">

If your main navigation contains:

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

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

```
Shop
```

</Expandable>

<Hint type="warning">

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

</Hint>

#### Menu columns

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

* Range: 2 - 4 columns

![image](https://docs-assets.foxecom.app/pebble-theme/image_T9e9meZD.png)

#### Right sidebar

<Hint type="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.

</Hint>

**Show collection image**

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

<div>![image](https://docs-assets.foxecom.app/pebble-theme/image_oz576sCw.png) ![image](https://docs-assets.foxecom.app/pebble-theme/image_IuExo6y3.png)</div>

<Expandable title="See how to set up collection images for mega menu's sidebar using Metafields">

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">![image](https://docs-assets.foxecom.app/pebble-theme/image_fjbF7VqO.png)</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">![image](https://docs-assets.foxecom.app/pebble-theme/image_JM88pDUA.png)</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">![image](https://docs-assets.foxecom.app/pebble-theme/image_7vrx9z6B.png)</div>

</Expandable>

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

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

![image](https://docs-assets.foxecom.app/pebble-theme/image_Xxoj9mhy.png)

<Hint type="info">

This works only when the **Show collection image** is enabled.

</Hint>

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

![image](https://docs-assets.foxecom.app/pebble-theme/image_zwF6djpG.png)

[More settings for showing banners on the mega menu](#banner)

</Tab>

<Tab title="With products">

Shows featured product cards on the right side.

![image](https://docs-assets.foxecom.app/pebble-theme/image_blqB4sEQ.png)

[More settings for showing products on the mega menu](#products)

</Tab>
</Tabs>

<Expandable title="Products">

*(when Layout = With Products)*

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

![image](https://docs-assets.foxecom.app/pebble-theme/image_3DopgbNR.png)

**Products**

![image](https://docs-assets.foxecom.app/pebble-theme/image_oNnHVuPE.png)

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.

![image](https://docs-assets.foxecom.app/pebble-theme/image_hGYVddZZ.png)

**Show product type**

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

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

![image](https://docs-assets.foxecom.app/pebble-theme/image_vECcLFIj.png)

**Show product badges**

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

![image](https://docs-assets.foxecom.app/pebble-theme/image_GP9WjI38.png)

<Hint type="info">

See: [How to set up Product custom badges](https://docs.foxecom.com/pebble-theme/theme-settings/product-badges)

See: [How to set up badges in Product cards](https://docs.foxecom.com/pebble-theme/theme-settings/product-cards#badges)

</Hint>

**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

</Expandable>

<Expandable title="Banner">

*(when Layout = With Banner)*

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

![image](https://docs-assets.foxecom.app/pebble-theme/image_5Q5zjlKq.png)

**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 type="info">

It works for **Top badge** and **Bottom button** designs only.

</Hint>

✍ [Learn more about Color scheme](https://docs.foxecom.com/pebble-theme/theme-settings/colors)

**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 type="info">

See how to adjust the [Subheading font style](https://docs.foxecom.com/pebble-theme/theme-settings/typography#subheading).

</Hint>

**Badge**

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

![image](https://docs-assets.foxecom.app/pebble-theme/image_ny5CabUV.png)

<Hint type="info">

Visibility rules:

* Appears in the **Top badge** and the **Content below image** designs
* Hidden in the **Bottom button** design

</Hint>

**Button label**

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

<Hint type="info">

If you leave the **Button label** empty and set the **Button icon** to None, the button will disappear completely.

</Hint>

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

![image](https://docs-assets.foxecom.app/pebble-theme/image_tcQRGLR8.png)

<Hint type="info">

Button icon style works only with the **Bottom button** design.

</Hint>

</Expandable>

</Tab>

<Tab title="Banner">

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

![image](https://docs-assets.foxecom.app/pebble-theme/image_i1Y1vAtc.png)

#### Menu title

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

<Hint type="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.

</Hint>

<Expandable title="Example">

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.

</Expandable>

#### 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

![image](https://docs-assets.foxecom.app/pebble-theme/image_qcddhZwE.png)

<Hint type="info">

This does *not* affect how much space is left for banners on the right side; banner width is controlled separately.&#x20;

</Hint>

#### Banners

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

![image](https://docs-assets.foxecom.app/pebble-theme/image_jWfWK6S1.png)

**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 type="info">

It works for **Top badge** and **Bottom button** designs only.

</Hint>

**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">

![image](https://docs-assets.foxecom.app/pebble-theme/image_fv9sJRtw.png)

</Tab>

<Tab title="Top badge">

![image](https://docs-assets.foxecom.app/pebble-theme/image_sh4DQyZG.png)

</Tab>

<Tab title="Bottom button">

![image](https://docs-assets.foxecom.app/pebble-theme/image_ZdgK1YDi.png)

</Tab>
</Tabs>

#### Banner #1 - #4

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

**Image**

![image](https://docs-assets.foxecom.app/pebble-theme/image_YO2goqkw.png)

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 type="info">

See how to adjust the [Subheading font style](https://docs.foxecom.com/pebble-theme/theme-settings/typography#subheading).

</Hint>

**Badge**

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

![image](https://docs-assets.foxecom.app/pebble-theme/image_EGbAWD6K.png)

<Hint type="info">

Visibility rules:

* Appears in the **Top badge** and the **Content below image** designs
* Hidden in the **Bottom button** design

</Hint>

**Button label**

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

<Hint type="info">

If you leave the **Button label** empty and set the **Button icon** to None, the button will disappear completely.

</Hint>

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">

![image](https://docs-assets.foxecom.app/pebble-theme/image_urxHOmuz.png)

</Tab>

<Tab title="Button icon style as Solid">

![image](https://docs-assets.foxecom.app/pebble-theme/image_j2ZcXXjA.png)

</Tab>
</Tabs>

<Hint type="info">

Button icon style works only with the **Bottom button** design.

</Hint>

</Tab>

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

![image](https://docs-assets.foxecom.app/pebble-theme/image_raniJ5ex.png)

#### Menu title

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

<Hint type="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.

</Hint>

<Expandable title="Example">

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.

</Expandable>

#### Text with banners

![image](https://docs-assets.foxecom.app/pebble-theme/image_MyLihjm7.png)

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

![image](https://docs-assets.foxecom.app/pebble-theme/image_6xPZhJxr.png)

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

![image](https://docs-assets.foxecom.app/pebble-theme/image_9iN1sk1r.png)

**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 type="info">

It works for **Top badge** and **Bottom button** designs only.

</Hint>

**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">

![image](https://docs-assets.foxecom.app/pebble-theme/image_TUYFhmPy.png)

</Tab>

<Tab title="Top badge">

![image](https://docs-assets.foxecom.app/pebble-theme/image_m4kfSCUE.png)

</Tab>

<Tab title="Bottom button">

![image](https://docs-assets.foxecom.app/pebble-theme/image_D8s3bzjX.png)

</Tab>
</Tabs>

#### Banner #1 - #4

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

**Image**

![image](https://docs-assets.foxecom.app/pebble-theme/image_68i9P3Ui.png)

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 type="info">

See how to adjust the [Subheading font style](https://docs.foxecom.com/pebble-theme/theme-settings/typography#subheading).

</Hint>

**Badge**

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

![image](https://docs-assets.foxecom.app/pebble-theme/image_IK4lVe4Q.png)

<Hint type="info">

Visibility rules:

* Appears in the **Top badge** and the **Content below image** designs
* Hidden in the **Bottom button** design

</Hint>

**Button label**

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

<Hint type="info">

If you leave the **Button label** empty and set the **Button icon** to None, the button will disappear completely.

</Hint>

**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**

![image](https://docs-assets.foxecom.app/pebble-theme/image_lfG4ON8C.png)

Choose the icon displayed next to the button text.

**Button icon style**

![image](https://docs-assets.foxecom.app/pebble-theme/image_JFc1Lc80.png)

Select how the icon is styled:

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

<Tabs>
<Tab title="Default">

![image](https://docs-assets.foxecom.app/pebble-theme/image_ovUVMkF3.png)

</Tab>

<Tab title="Solid">

![image](https://docs-assets.foxecom.app/pebble-theme/image_Xwl6Y4uy.png)

</Tab>
</Tabs>

<Hint type="info">

Button icon style works only with the **Bottom button** design.

</Hint>

</Tab>
</Tabs>