> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/veena-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webibazaar.gitbook.io/veena-documentation/header/mega-menu.md).

# Mega menu

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

Shopify allows you to nest menus and menu items in the Content > Menus Editor. You can build dropdown menus by creating or moving menu items so that they are “Nested” below a top-level item. Follow these steps to add Navigation:

* From your Shopify admin, go to **Content > Menus**.
* Click the name of your main menu.
* Choose one of the menu items to be the header for your dropdown menu, or add a new menu item to be the header. If you don't want the header to link to anything, then you can enter '#' in the **Link field** when you add the menu item.
* Add menu items to include in the new dropdown menu. Click **Add menu item** enter the name of the menu item, and enter or select a destination for the link.
* Click and drag the menu items to nest below the header item.
* Click the **Save menu**.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2F9ItdJpCVHVSYltC4EfPz%2Fnavigation.png?alt=media&amp;token=a1e37d08-07bf-4701-a8c5-cce61c7042dc" alt=""><figcaption></figcaption></figure>

There are multiple types of Mega menus you can add to your store

1. Select the **Header** from the theme editor.
2. Click on "Add block.", user can create three types of blocks: Mega menu products, Mega menu submenu/gallery, Mega menu blog, Categories, Secondary menu, Categories icon.

## How to set a menu category image&#x20;

Upload and assign a custom image to any selected menu category quickly and easily.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FfdUnFHx5K3uwMWDLtUtO%2FScreenshot%20(3).png?alt=media&amp;token=733ce4cc-e5a5-44f2-8ca5-a10910b8f7af" alt=""><figcaption></figcaption></figure>

You can use these documentation steps:

1. Go to **Settings → Custom Data → Collections → Collection Metafield Definitions**.
2. Create the **`custom.menu_image`** metafield.
3. In the **Image** field, upload the image you want to use for the selected menu category.
4. Click **Save** to apply the changes.
5. The uploaded image will now be displayed for the selected menu category.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2Fk7MWEHXOxEoYIzHhn47d%2FScreenshot%20(4).png?alt=media&amp;token=a1d139ff-dbb1-4321-b103-6cf10491c873" alt=""><figcaption></figcaption></figure>

## Mega menu products

Click on "Add block" and add the **Mega menu products** block.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2F2BO6Ef25FGzMNQzH2XXs%2Fmegamenu-prod.png?alt=media&amp;token=6479813e-24e4-4d21-af8d-7877f270208a" alt=""><figcaption></figcaption></figure>

Mega menu with the product allows you to add products with a submenu. Please follow the screenshot.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FlNLzUR5dFY2cgpsrt3WV%2Fmegamenu-product-block.png?alt=media&amp;token=81bf94f1-484f-4395-93b1-e83fe4c2e6d5" alt=""><figcaption></figcaption></figure>

* To a add submenu, go to To a add submenu, go to **Online Store > Content > Menus.**
* Click the name of your **Televisions & Accessories**.
* Add menu items to include in the new dropdown menu. Click **Add menu** item enter the name of the menu item, and enter or select a destination for the link.
* Click and drag the menu items to nest below the header item.
* Click the **Save menu**.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2F9ItdJpCVHVSYltC4EfPz%2Fnavigation.png?alt=media&amp;token=a1e37d08-07bf-4701-a8c5-cce61c7042dc" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
Typing the same menu name in the Menu label will connect this menu to the Mega menu that is built through the theme editor. Check the below screenshot.
{% endhint %}

## Mega menu submenu/gallery

Click on "Add block" and add the **Mega menu submenu/gallery** block.

{% hint style="info" %}
**Recommendation Size**\
Gallery image size: 500x500
{% endhint %}

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2Fd6lKqG8Pd7RAOf8qOVlT%2Fmegamenu-gallery.png?alt=media&amp;token=0db5644c-ca2f-4b92-bb32-fa5c81bffdb4" alt=""><figcaption></figcaption></figure>

This Mega menu allows you to add submenus and a gallery. Please follow the below screenshot.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FMkstwOpbqkl523SIHAqj%2Fmega-gallery.png?alt=media&amp;token=47ea5e53-7893-4c7e-9445-709749bc3c7d" alt=""><figcaption></figcaption></figure>

## Mega menu blog

Click on "Add block" and add the **Mega menu blog** block.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FP0iAo4JzOSbUKcaDG2ej%2Fmega-menu-blogs.png?alt=media&amp;token=99108778-4341-41a3-af03-7543b9bc9c71" alt=""><figcaption></figcaption></figure>

To add a blog, go to Blog posts > Add blog post Add Multiple Blogs.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FH6PmM2g0Z90srja1M5N5%2Fblog.png?alt=media&amp;token=9fb8f9f3-c4b2-4000-8694-8be8bcd043d4" alt=""><figcaption></figcaption></figure>

After adding a blog, select the blog in the "Mega menu blog" block. Please follow the below screenshot.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FIymiU2gQIoyzpHkypY3o%2Fmega-blogs.png?alt=media&amp;token=af6bac20-fd3f-43c8-a8d2-1070851e4783" alt=""><figcaption></figcaption></figure>

## Mega menu banner

Click on "Add block" and add the **Mega menu banner** block.

{% hint style="info" %}
**Recommendation Size**\
Megamenu banner image size: 375x375&#x20;
{% endhint %}

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FW9nW47XDkKM1qfUi24cu%2Fbanner-block.png?alt=media&amp;token=a3275824-cc38-49a1-ae52-ddafd07b66be" alt=""><figcaption></figcaption></figure>

After adding a blog, select the blog in the "Mega menu banner" block. Please follow the below screenshot.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FloWJhvNm0PAKc2VStVUF%2Fmenu-banner.png?alt=media&amp;token=09416f05-a007-41bd-a13c-e19711337542" alt=""><figcaption></figcaption></figure>

## Categories

Click on "Add block" and add the **Categories** block.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2F4YT34Baj4kvxvsvacZch%2Fcategories-block.png?alt=media&amp;token=3f933a0a-b81a-43ac-9a53-380215807191" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="201">Block</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Enter text to display as a categories title in the section.</td></tr><tr><td>Menu</td><td>Click on "Select menu" to add a menu in the categories block.</td></tr><tr><td>Menu style</td><td><p>Customization of menu style of categories menu in the header section is as follows:</p><ul><li>Vertical menu</li><li>Tiles menu</li></ul><p>This option work only when the 'Logo center, menu bottom' setting is enabled.</p></td></tr><tr><td>Menu button style</td><td><p>Customization of the "Menu button style" of categories menu in the header is as follows:</p><ul><li>Link</li><li>Outline button</li><li>Solid button</li></ul></td></tr><tr><td>Menu position</td><td><p>Customization of "Menu position" as follows:</p><ul><li>Left</li><li>Right</li></ul></td></tr><tr><td>Dropdown open on</td><td><p>Customization of the "Dropdown open on" of categories menu in the header is as follows:</p><ul><li>On click</li><li>On hover</li></ul></td></tr></tbody></table>

This Mega menu allows you to add Categories. Please follow the below screenshot.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FhNFYzYymZ83sAhu4sCS3%2Fcategories-block-settings.png?alt=media&amp;token=76515f99-a3cf-483c-a53b-6dfb74a95b1c" alt=""><figcaption></figcaption></figure>

## Secondary menu

Click on "Add block" and add the **Secondary menu** block.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FJ54C4pYSI3BHCm7pK8ud%2Fsecondary-menu-block.png?alt=media&amp;token=d4cd365c-d6cc-43e4-84b5-0e5bb42e71d8" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="201">Block</th><th>Description</th></tr></thead><tbody><tr><td>Secondary menu</td><td><p><strong>Menu</strong></p><p>Click on "Select menu" to add a menu in the header section. </p><p></p><p><strong>Menu icons</strong></p><p>In the section, the icons are given to select. are for selecting:</p><ul><li>None</li><li>Flash sale</li><li>Apple</li><li>Banana</li><li>Bottle</li><li>Box</li><li>Carrot</li><li>Chat bubble</li><li>Check mark</li><li>Clipboard</li><li>Dairy</li><li>Dairy free</li><li>Dryer</li><li>Eye</li><li>Fire</li><li>Gluten free</li><li>Heart</li><li>Iron</li><li>Leaf</li><li>Leather</li><li>Lightning bolt</li><li>Lipstick</li><li>Lock</li><li>Map pin</li><li>Nut free</li><li>Pants</li><li>Paw print</li><li>Pepper</li><li>Perfume</li><li>Plane</li><li>Plant</li><li>Price tag</li><li>Question mark</li><li>Recycle</li><li>Return</li><li>Ruler</li><li>Serving dish</li><li>Shirt</li><li>Shoe</li><li>Silhouette</li><li>Snowflake</li><li>Star</li><li>Stopwatch</li><li>Truck</li><li>Washing</li></ul><p><strong>Icon color</strong></p><p>Modifying the color of the menu icon will result in a corresponding color change for the secondary menu icon.<br><br><strong>Show secondary menu on top</strong></p><p>By enabling this checkbox, you can see secondary menu on top.</p></td></tr></tbody></table>

This Mega menu allows you to add Secondary menu. Please follow the below screenshot.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2F11Imz0udAfx39HFLAwY0%2Fsecondary-menu-block-settings.png?alt=media&amp;token=eaa520ef-5cdb-4bae-becc-66a6cb225c77" alt=""><figcaption></figcaption></figure>

## Categories icon

Click on "Add block" and add the **Categories icon** block.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FAPVjr5wEhs9V98AGxhCm%2Fcategories-icon.png?alt=media&amp;token=3bbd965c-c730-4b0d-990f-2aa7e2f2de71" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="201">Block</th><th>Description</th></tr></thead><tbody><tr><td>Menu item #1</td><td><p><strong>Icon</strong><br>Use "Icon" to add the icon before the names in the categories menu. The icons are given to select. are for selecting:</p><ul><li>None</li><li>Apple</li><li>Banana</li><li>Bottle</li><li>Box</li><li>Carrot</li><li>Chat bubble</li><li>Check mark</li><li>Clipboard</li><li>Dairy</li><li>Dairy free</li><li>Dryer</li><li>Eye</li><li>Fire</li><li>Gluten free</li><li>Heart</li><li>Iron</li><li>Leaf</li><li>Leather</li><li>Lightning bolt</li><li>Lipstick</li><li>Lock</li><li>Map pin</li><li>Nut free</li><li>Pants</li><li>Paw print</li><li>Pepper</li><li>Perfume</li><li>Plane</li><li>Plant</li><li>Price tag</li><li>Question mark</li><li>Recycle</li><li>Return</li><li>Ruler</li><li>Serving dish</li><li>Shirt</li><li>Shoe</li><li>Silhouette</li><li>Snowflake</li><li>Star</li><li>Stopwatch</li></ul><p><strong>Image</strong><br>Use "Image" to add the image before the names in the categories menu.<br><br><strong>Svg code</strong><br>Use "Svg code" to add the svg before the names in the categories menu.</p></td></tr></tbody></table>

This Mega menu allows you to add Categories icon. Please follow the below screenshot.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FACkVq3kuRI2v9vOR2uaq%2Fcategories-icon-settings.png?alt=media&amp;token=a3645abb-37f7-44d5-a210-02b37542e6da" alt=""><figcaption></figcaption></figure>

## Menu badge

Click on "Add block" and add the **Menu badge** block.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FApTT142tbQ5GxJormEuw%2Fadd%20menu%20badge%20block.png?alt=media&amp;token=6c273c6d-8627-4fa6-97b5-d7c6ad3890d6" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="201">Block</th><th>Description</th></tr></thead><tbody><tr><td>Menu label</td><td><p>Enter the exact menu item name from the mega menu. This setting links the badge to the selected menu item. </p><p></p><p>Ensure the menu label matches the parent menu name exactly; otherwise, the badge will not be displayed.</p></td></tr><tr><td>Badge</td><td><p>Specify the text to display as a badge beside the selected menu item. </p><p>Use short labels such as <em>New</em>, <em>Sale</em>, <em>Hot</em>, <em>Trending</em>, or <em>Limited</em> to highlight menu items and attract customer attention.</p></td></tr><tr><td>Color</td><td><p><strong>Text</strong> </p><p>Choose the text color for the badge label. Select a color that provides sufficient contrast against the badge background for better readability. </p><p></p><p><strong>Background</strong> </p><p>Select the background color of the badge. Use brand colors or promotional colors to make the badge stand out within the navigation menu.</p></td></tr></tbody></table>

{% hint style="danger" %}
**Note:** Multiple Menu Badge blocks can be added to display different badges for different menu items within the mega menu.
{% endhint %}

**Result:** A red badge with white text displaying **"Sale"** will appear next to the **Gaming** menu item in the navigation menu.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FuKB2QiebbGrFDMTsLlEY%2Fmenu%20badge%20preview.png?alt=media&amp;token=3c3e0c8a-671a-4d6b-b299-badeaa25c02c" alt=""><figcaption></figcaption></figure>

## Click "Add section" and use some sections.

We are providing one special feature, You can add multiple additional sections in the header.

<figure><img src="https://1523031223-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz2mugD18x0vMyXArG8bZ%2Fuploads%2FviC0dpUPBa00POQHybEm%2Fheader-sections.png?alt=media&amp;token=79db9cfe-f4e2-4b47-ac0f-e255fb3ee3bb" alt=""><figcaption></figcaption></figure>