> For the complete documentation index, see [llms.txt](https://oranthemes.gitbook.io/edge-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://oranthemes.gitbook.io/edge-theme/global-sections/megamenu/megamenu-classic-banner.md).

# Megamenu (Classic banner)

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2F8V3ktpLmWIoe7i3tW7yj%2F2025-04-03_23-32-50.jpg?alt=media&amp;token=40b053b9-d2bc-4f61-8bb4-83bd53f63f4d" alt=""><figcaption></figcaption></figure>

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

1. In the **Header** section, **Add block**&#x20;
2. Choose **Megamenu (Classic banner).**
   {% endhint %}

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FId9rDtMtl8lTnon9IxwS%2F2025-04-03_23-34-07.jpg?alt=media&amp;token=dae65f34-22d9-4a4a-aa4b-9ee20ff837c8" alt=""><figcaption></figcaption></figure>

**Menu item** - Name the link in the main menu that you'd like the menu to appear from.

### Label settings

* Label text
* Label color
* Label background color

### Dropdown settings

* Width - 2 options => Boxed / Wide

### Navigation

* **Columns Link** - From 1 - 6
* **Show column dividers**
* Enable custom image navigation ⇒ Each rule must be in its own line.

First, upload the desired swatch images to your Shopify store. To do that, navigate to Content > Files in your Shopify admin and click Upload files. We suggest 64x64 px .jpg

```
Earrings:m1.jpg
Necklaces:e2.jpg
Rings:m31.jpg
Bracelets:m4.jpg
Chamrs:m5.jpg
```

### Banner

* **Show banner**
* **Banner position** - 2 options left/right
* **Banner width -** from 30% - 100%  The navigation column will automatically adjust its width.
* **Columns per row**

#### Banner image 1

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FtXfNtndwijgWztORphof%2F2025-04-03_23-37-51.jpg?alt=media&amp;token=9bfb728f-33dd-453d-8659-713685a571f6" alt=""><figcaption></figcaption></figure>

**Settings banner**

* **Image** - If image blank, this block will not show.
* I**mage ratio**&#x20;
  * Adapt to image
  * Square (1:1)
  * Portrait (3:4)
  * Landscape (4:3)
  * Landscape (5:3.5)
  * Wide (16:9)
* **Link** - Link for image
* **Content alignment** - Left / Center / Right
* **Sub heading**
* **Heading**
* **Heading size** - Size for heading, Select heading size from H1 to H6.
* **Description**
* **Button style** - 7 option for button
* **Button text**&#x20;
* **Text Color**

{% hint style="info" %}
**Banner image 2, Banner image 3, Banner image 4, Banner image 5, Banner image 6** will be similar to Banner image 1
{% endhint %}

#### Result

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2Faw2yYMcc0OqO64HI5m3s%2F2025-04-03_23-38-53.jpg?alt=media&amp;token=b2ed6783-c2a0-4c82-a1ef-e7f80459a4fe" alt=""><figcaption></figcaption></figure>