# 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FbzJeVXOyt83YCDcV1n8z%2FFox-BG%20Light%20-%202025-12-08T142440.484.jpg?alt=media&#x26;token=cc234e8e-aa3d-48e5-a2bd-c0f61f85ca6b" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F60442V58fWqH0tKJXiel%2Fimage.png?alt=media&#x26;token=ca038fff-2328-468a-ae5d-260804f117c9" 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="#sidebar">#sidebar</a></td><td><a href="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FTbpmucjpWbuV4ACrGlDW%2FFox-BG%20Light%20-%202025-12-08T153928.830.jpg?alt=media&#x26;token=c813d778-eecf-4e48-9796-8a8a5697de20">Fox-BG Light - 2025-12-08T153928.830.jpg</a></td></tr><tr><td align="center"><strong>Banner</strong></td><td><a href="#banner-1">#banner-1</a></td><td><a href="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FyEUznoXg1UWYQVsZLdUI%2FFox-BG%20Light%20-%202025-12-08T154050.949.jpg?alt=media&#x26;token=5960ca9e-31fc-41ed-859d-edfd61992dc9">Fox-BG Light - 2025-12-08T154050.949.jpg</a></td></tr><tr><td align="center"><strong>Text with banners</strong></td><td><a href="#text-with-banners">#text-with-banners</a></td><td><a href="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FmU5iVgSt2CtAjXYCdmQ1%2FFox-BG%20Light%20-%202025-12-08T154117.154.jpg?alt=media&#x26;token=311fd3f0-0005-4159-93d4-f25050ecafa0">Fox-BG Light - 2025-12-08T154117.154.jpg</a></td></tr></tbody></table>

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FApxEIkrzwzSy7tpu6SJH%2Fimage.png?alt=media&#x26;token=4b6ee9dd-1284-4142-a40d-3a447d14adcf" 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).

![](https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FU9mCuuzDwKT4ePWrUdXA%2Fimage.png?alt=media\&token=e01ac90e-6d95-48e3-ad0c-00fbc5325e86)
{% endhint %}

#### Menu title

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F694XZnO3EznETQrRjmP3%2Fimage.png?alt=media&#x26;token=d31dad9a-a672-4a0e-b9fb-b6f3a8d8d597" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fl94mxrw2FC2oce7DnTrQ%2Fimage.png?alt=media&#x26;token=e3fd8084-ccab-4c8f-b74c-5351a1af27db" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FqW6XUab6LkgYzzG8mDCU%2Fimage.png?alt=media&#x26;token=42994036-1185-4577-b74a-9e1344da6579" alt=""><figcaption></figcaption></figure> <figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FtzsJT6AHV7jKW4arZUBH%2Fimage.png?alt=media&#x26;token=4427f61c-3eb2-427a-9020-178a18aff307" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fy9kb25qIsbbY00YabydP%2Fimage.png?alt=media&#x26;token=77dee5c2-bf8d-41ff-97c1-0cf2c0fd3a8c" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F4Tho9Ex6JgJhIcN4swYo%2Fimage.png?alt=media&#x26;token=22770e4e-17ab-471f-a696-0adbc27d7ed1" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FLcE7nbmxGUGLGeimS5PA%2Fimage.png?alt=media&#x26;token=2167f44b-2a28-420e-bbd1-38c1fcadfa70" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FRl0ghOCbhIoaa1c9JzmH%2Fimage.png?alt=media&#x26;token=8127cbba-83e8-4781-912a-0a3102a5cecc" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F75B7A1VxUOsB1mf9cg90%2Fimage.png?alt=media&#x26;token=d6af6595-6464-4afe-a5b4-20220971e3e0" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FTYXHXMCPttL0tOEQLsVd%2Fimage.png?alt=media&#x26;token=e1ed4c84-fcd8-4a83-9d3f-672a55d97638" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FESGK2oei9GOTXLNcEhHZ%2Fimage.png?alt=media&#x26;token=16161336-498f-4d6f-bc6a-a17d193adb7b" alt=""><figcaption></figcaption></figure>

**Products**

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fl3TcVzv0FpIzKbnVPYGv%2Fimage.png?alt=media&#x26;token=e7e025f5-e6ce-428c-a76f-e8866275f615" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FtQO2ifrfd7cZ3vErdZQq%2Fimage.png?alt=media&#x26;token=1fef4658-c376-4d23-857f-725e142ed74a" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FwSzzjuHeS3d8VIIldhdp%2Fimage.png?alt=media&#x26;token=042a249e-fa30-485d-bfa9-07c0ae99587c" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FisgCoWXOMXotTaBSa4eo%2Fimage.png?alt=media&#x26;token=0ce7eb36-f4de-4f1b-9b3d-16bfc09497cf" alt=""><figcaption></figcaption></figure>

{% hint style="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)
{% 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F3EbfSzFJy95CjjzUUEMt%2Fimage.png?alt=media&#x26;token=e10aac2d-831d-47e6-b30e-8390ce55415d" 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](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 style="info" %}
See how to adjust the [Subheading font style](https://docs.foxecom.com/pebble-theme/theme-settings/typography#subheading).
{% endhint %}

**Badge**

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F6PekwAzDodeIvGpjOlIV%2Fimage.png?alt=media&#x26;token=76c77b21-b723-48a2-99ba-35b6ca4a76e5" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fth5GJOLxCawdjQ0j3T2l%2Fimage.png?alt=media&#x26;token=6dafd621-b1ba-4667-a9a9-b0c227bc4c0c" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F2tiYZ8HXukNJq0xQpX94%2Fimage.png?alt=media&#x26;token=f7d0c20c-afea-42d5-8145-4218a50108d8" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FcI7WAr9W1L2m2rAHC8HH%2Fimage.png?alt=media&#x26;token=c5342817-edfc-4633-b715-e6011c15f0a8" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fo7AFHtDBaS2ir5upMQYc%2Fimage.png?alt=media&#x26;token=8aa13635-3753-4cef-b9d3-4e771444241d" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F3UWDrariHCRgp72BC47v%2Fimage.png?alt=media&#x26;token=ebcfdad4-8814-4908-9258-a1984c1d70b8" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Top badge" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FFiDNoexuI5dg5wKJOqwF%2Fimage.png?alt=media&#x26;token=98e0aee0-84f1-4af7-8cf4-9c420f74d6b4" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Bottom button" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F3Q3AiQfArnyz7bPERdLe%2Fimage.png?alt=media&#x26;token=e8a4a81d-0020-4d6b-afec-dfcf5b6d2a62" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FR411dvBqeQu6pZBoNpIh%2Fimage.png?alt=media&#x26;token=2e1bc2de-51ef-4f61-82a1-6cb9a5998cc7" 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](https://docs.foxecom.com/pebble-theme/theme-settings/typography#subheading).
{% endhint %}

**Badge**

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fw8itW4TSXGGHiKyCdvGA%2Fimage.png?alt=media&#x26;token=605daae4-a2d6-4044-9c1b-ee2c1e7f7dab" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Ftnf6HsrOsQ96sMOHQz1r%2Fimage.png?alt=media&#x26;token=1d7028f9-4c92-412b-9f5a-3b37532be792" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FrXBuvoTfS8ym3GaEyQGO%2Fimage.png?alt=media&#x26;token=19c7bf5c-d502-4bd3-be7a-4dd6a6465cf1" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FemgadLqjqyHqHhPV01cf%2Fimage.png?alt=media&#x26;token=b53f3c72-4ae7-4472-a48d-e4de50917e4c" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FThA1wWFwibsSO0TXx1A2%2Fimage.png?alt=media&#x26;token=3c7deb8d-48fa-4229-bd9f-6a6ce00c4853" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FaxEWpLADoXtfcGQLHvJA%2Fimage.png?alt=media&#x26;token=ef16ca46-969c-4aee-b671-715185093e2b" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FRicdjCULCptOezUYNsEE%2Fimage.png?alt=media&#x26;token=a33e08f1-77ee-418b-a139-a94d822bd3d7" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F4GOcfJ6qAYQ1VWjoQvvN%2Fimage.png?alt=media&#x26;token=03602751-3621-4ec3-988c-9863c8333a56" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Top badge" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fnd59yRcthkuTuIr31cka%2Fimage.png?alt=media&#x26;token=ad61bfca-b485-455a-8872-6d98d4c35ef2" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Bottom button" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FZKPKYSSLVkairGCTU3q3%2Fimage.png?alt=media&#x26;token=fea8fe2a-97e5-4a87-952b-1c3d03d9ebad" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FtDO0l0WhoewAepSR2P2t%2Fimage.png?alt=media&#x26;token=2edcd5f8-64e8-4a1d-a3e3-c1ab46a8afc5" 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](https://docs.foxecom.com/pebble-theme/theme-settings/typography#subheading).
{% endhint %}

**Badge**

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fet8P6QNPjFu8eI2E2hal%2Fimage.png?alt=media&#x26;token=c66af351-4c07-436e-a420-915af80e7ba0" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FrL5IQjgbvDjBQnDSBy8R%2Fimage.png?alt=media&#x26;token=150d6025-d25b-4df4-9c3a-d10ab6daeab1" alt=""><figcaption></figcaption></figure>

Choose the icon displayed next to the button text.

**Button icon style**

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FpKAyZHuBRe1rK6Isj9aj%2Fimage.png?alt=media&#x26;token=e8f676bc-4fe6-4ac5-99ac-74e78957b3ef" alt=""><figcaption></figcaption></figure>

Select how the icon is styled:

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

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

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FzfULTvLvy773eoxTAwZa%2Fimage.png?alt=media&#x26;token=48f73f86-4c65-4598-9995-0d9b38c3e315" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Solid" %}

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FnT75nLhkK4rByNyuw9y1%2Fimage.png?alt=media&#x26;token=c884edfc-e025-4dc9-b218-c263892da8b3" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

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