# Dropdown Menu / Mega Menu

Go to **Storefront** -> **My Themes** -> **Customize**. <mark style="color:red;">(If your store is a new store, you may need to go to</mark> <mark style="color:red;"></mark><mark style="color:red;">**Channel Manager -> Themes -> Edit Theme**</mark><mark style="color:red;">)</mark>

In the **Theme Editor** -> go to **Menu**

<figure><img src="https://3763408133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUAiUiFJqLxmK0ltRywVy%2Fuploads%2FuUUXPLIdhxeblnF8otjY%2Fimage.png?alt=media&#x26;token=d682dc85-599a-43ee-86d2-e52cbff1c63d" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Beautica has 3 styles of Mega Menu. Our theme has Advanced Mega Menu which almost all of other themes don't offer. You can change columns, products, image and custom link in Theme Editor.
{% endhint %}

{% hint style="info" %}
In case you cannot make change, our support team is available to support you, email us at: [support@halothemes.com.](mailto:support@halothemes.com)
{% endhint %}

{% hint style="info" %}
First of all, you need to know the Numerical order of the category items:
{% endhint %}

<figure><img src="https://3763408133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUAiUiFJqLxmK0ltRywVy%2Fuploads%2FOcuYCFu3onE8JaFAY2QF%2FScreenshot_1.png?alt=media&#x26;token=cddc0f58-d0ee-4527-8581-e6b0dbafa221" alt=""><figcaption></figcaption></figure>

**Sample Options Megamenu Style 1**

{% hint style="info" %}
3 Columns Categories, 1 Banner
{% endhint %}

Recommended banner Size: 370x320px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.

<figure><img src="https://3763408133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUAiUiFJqLxmK0ltRywVy%2Fuploads%2F61ZatVLZ7UTSjf4OWANf%2Fimage.png?alt=media&#x26;token=bf4e6a44-ecc5-45fc-9f6d-356f8c6b3c1c" alt=""><figcaption></figcaption></figure>

**Setting for Mega Menu Style 1**

Go to **Storefront** -> **My Themes** -> **Customize**. <mark style="color:red;">(If your store is a new store, you may need to go to</mark> <mark style="color:red;"></mark><mark style="color:red;">**Channel Manager -> Themes -> Edit Theme**</mark><mark style="color:red;">)</mark>

In the **Theme Editor** -> go to **Menu** -> **Mega Menu Style 1**

<figure><img src="https://3763408133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUAiUiFJqLxmK0ltRywVy%2Fuploads%2F1R1C5sVBTMPKQSswEPxT%2Fimage.png?alt=media&#x26;token=c2d4eb1a-47bb-454b-bca5-b29eb8f1dc64" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
When you are happy with your changes, don't forget click **Save** and **Publish** to repackage the edited theme.
{% endhint %}

{% hint style="info" %}
Notes: Input in Theme Editor limit 64 characters.
{% endhint %}

**Sample Options Megamenu Style 2**

{% hint style="info" %}
5 Columns Categories, 2 Banner, 1 Shop By Brands
{% endhint %}

Recommended banner Size: 600x220px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.

<figure><img src="https://3763408133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUAiUiFJqLxmK0ltRywVy%2Fuploads%2FLxitYivIHpRh2MQ2mVHe%2Fimage.png?alt=media&#x26;token=6531dde2-59e6-4f74-ab5b-f81e51e0c1e1" alt=""><figcaption></figcaption></figure>

**Setting for Mega Menu Style 2**

Go to **Storefront** -> **My Themes** -> **Customize**. <mark style="color:red;">(If your store is a new store, you may need to go to</mark> <mark style="color:red;"></mark><mark style="color:red;">**Channel Manager -> Themes -> Edit Theme**</mark><mark style="color:red;">)</mark>

In the **Stencil File Editor** -> go to **Menu** -> **Mega Menu Style 2**

<figure><img src="https://3763408133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUAiUiFJqLxmK0ltRywVy%2Fuploads%2FpZllNNlIgFKw4ml7E1Tz%2Fimage.png?alt=media&#x26;token=282bf7f6-c37a-4d27-a9c8-e10b2e0f04f1" alt=""><figcaption></figcaption></figure>

**Sample Options Mega Menu Style 3**

{% hint style="info" %}
5 Columns Categories and 1 Custom Text Bottom
{% endhint %}

<figure><img src="https://3763408133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUAiUiFJqLxmK0ltRywVy%2Fuploads%2FFzTzdmWtJ6Kqbld6vRDh%2Fimage.png?alt=media&#x26;token=2911158e-6348-4bd0-97b4-064b7613dcea" alt=""><figcaption></figcaption></figure>

**Setting for Mega Menu Style 3**

Go to **Storefront** -> **My Themes** -> **Customize**. <mark style="color:red;">(If your store is a new store, you may need to go to</mark> <mark style="color:red;"></mark><mark style="color:red;">**Channel Manager -> Themes -> Edit Theme**</mark><mark style="color:red;">)</mark>

In the **Theme Editor** -> go to **Menu** -> **Mega Menu Style 3**

<figure><img src="https://3763408133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUAiUiFJqLxmK0ltRywVy%2Fuploads%2FICnC71N5YUl9htyJQZ4C%2Fimage.png?alt=media&#x26;token=ee276158-f19a-45f5-add2-e917b820c40f" alt=""><figcaption></figcaption></figure>

**Sample Options Megamenu Style 4**

{% hint style="info" %}
3 Columns Categories, 1 Product Block, 1 Banner
{% endhint %}

Recommended banner Size: **224x375px**. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.

<figure><img src="https://3763408133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUAiUiFJqLxmK0ltRywVy%2Fuploads%2F0NGtfTrZC8k88rZECbmi%2Fimage.png?alt=media&#x26;token=aace9302-a762-44fb-8c99-cf7b61b4aa5d" alt=""><figcaption></figcaption></figure>

**Setting for Mega Menu Style 4**

Go to **Storefront** -> **My Themes** -> **Customize**. <mark style="color:red;">(If your store is a new store, you may need to go to</mark> <mark style="color:red;"></mark><mark style="color:red;">**Channel Manager -> Themes -> Edit Theme**</mark><mark style="color:red;">)</mark>

In the **Stencil File Editor** -> go to **Menu** -> **Mega Menu Style 4**

<figure><img src="https://3763408133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUAiUiFJqLxmK0ltRywVy%2Fuploads%2FeoUpkGXA0l3YVxx6m9x1%2Fimage.png?alt=media&#x26;token=18f9c01b-c3ce-4ba9-ae03-bf0acb05d2a0" alt=""><figcaption></figcaption></figure>

**Menu Label: Sale, Hot, New**

<figure><img src="https://3763408133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUAiUiFJqLxmK0ltRywVy%2Fuploads%2FWzw3Gh5gFV6lueZodWXg%2Fimage.png?alt=media&#x26;token=f9c99909-f0fa-400f-8d90-4ffe58334f2f" alt=""><figcaption></figcaption></figure>

Go to **Storefront** -> **My Themes** -> **Customize**. <mark style="color:red;">(If your store is a new store, you may need to go to</mark> <mark style="color:red;"></mark><mark style="color:red;">**Channel Manager -> Themes -> Edit Theme**</mark><mark style="color:red;">)</mark>

In the **Theme Editor** -> go to **Menu** / **Menu Label**

<figure><img src="https://3763408133-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUAiUiFJqLxmK0ltRywVy%2Fuploads%2FufsMv2eEwUOtpLLoRnb8%2Fimage.png?alt=media&#x26;token=d98a71a6-2100-44b4-aaa8-03eec45ab791" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If you want to disable **New label** on the main menu, please leave "New Label" field blank. The same for **Sale Label** and **Hot Label**.
{% endhint %}

{% hint style="info" %}
When you are happy with your changes, don't forget click **Save** and **Publish** to repackage the edited theme.
{% endhint %}

{% hint style="info" %}
\* Notes: Input in Theme Editor limit 64 characters.
{% endhint %}