> 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-gallery-banner.md).

# Megamenu (Gallery 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 (Gallery banner).**
   {% endhint %}

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FbmmmHMqD0UxrQpoJwom8%2F2025-04-03_23-42-25.jpg?alt=media&amp;token=89325ddd-63a6-4da0-8a37-cb0017d1d68d" alt=""><figcaption></figcaption></figure>

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

### Label text

* 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%2FxolMG7593rpzODwr9nUk%2F2025-04-03_23-44-49.jpg?alt=media&amp;token=af61bbce-b184-4eae-8f64-b59027ace825" 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** - 9 options&#x20;
* **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**
* **Overlay color**
* **Overlay opacity** - From 0 - 100%
* **Overlay gradient -** If left blank, the overlay will default to using the overlay 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 %}