# 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 > Create menu**

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FoKI6kcpZ1P4oRhECF3Xj%2Fs2.png?alt=media&#x26;token=eca6d0ac-d29a-44e5-940d-53bf8fa7231e" alt=""><figcaption></figcaption></figure>

* 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://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FYvblP0nbdxKbHRHyytHg%2Fs3.png?alt=media&#x26;token=2ec89008-b06a-4aac-b2be-ef11a0ef8ecf" 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, Secondary menu.

## Mega menu products

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2Fxm2E2fgSuwvjegL8VS11%2Fmegamenu-products.png?alt=media&#x26;token=62eb59a0-5cd7-4f49-af1e-40cbed3a8190" 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://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FgetruGgE8p4xuFuOcR8c%2Fmegamenu-product-block.png?alt=media&#x26;token=15578599-aa72-476f-9653-3ec111e3a5dc" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="201">Block</th><th>Description</th></tr></thead><tbody><tr><td>Menu label</td><td>Enter menu item to apply a mega menu, when the mega menu is added, the link to the parent menu will not work.</td></tr><tr><td>Show submenu</td><td>By enabling this checkbox, you can show submenu.</td></tr><tr><td>Collection</td><td>Select a collection to display products in the section.</td></tr><tr><td>Style</td><td><p>Customization of the "Style" in the featured collection section is as follows:</p><ul><li>Standard</li><li>Card</li></ul></td></tr><tr><td>Text alignment</td><td><p>Customization of the "Text alignment" in this section is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Image ratio</td><td><p>Product image customizations in a section are as follows:</p><ul><li>Adapt to image</li><li>Portrait</li><li>Square</li></ul></td></tr><tr><td>Show second image on hover</td><td>By enabling this checkbox you can “Show the second image on hover”.</td></tr><tr><td>Show vendor</td><td>By enabling this checkbox you can display the “Product vendor”.</td></tr><tr><td>Maximum products to show</td><td>"Maximum products to show" is to specify how many products to show in a section. You can show a minimum of “2” and a maximum of “8” products.</td></tr><tr><td>Card color scheme</td><td><p>In this section, you can change the background and foreground color of a section using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul></td></tr></tbody></table>

{% 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**\
Megamenu gallery image size: 435x435
{% endhint %}

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FwVx3zzMGRobCyrFyKZ45%2Fmegamenu-gallery.png?alt=media&#x26;token=f53f4137-b356-497b-8442-d03685de750d" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FpOLj2dCNc0iKkyJf63Ri%2Fmegamenu-gallery-blocks.png?alt=media&#x26;token=5a5c8bf8-7a07-484d-9b44-b52a07289bd3" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="201">Block</th><th>Description</th></tr></thead><tbody><tr><td>Menu label</td><td>Enter menu item to apply a mega menu, when the mega menu is added, the link to the parent menu will not work.</td></tr><tr><td>Show submenu</td><td>By enabling this checkbox, you can show submenu.</td></tr><tr><td>Image section</td><td><p><strong>Image ratio</strong><br>Product image customizations in a section are as follows:</p><ul><li>Adapt to image</li><li>Portrait</li><li>Square<br></li></ul><p><strong>Image</strong><br>Use "Image" to add the image to the section.</p><p><br><strong>Label</strong><br>Enter text to display as a image label in the section.</p><p></p><p><strong>Link</strong><br> Use "link" to add a link to the image in the section.<br></p></td></tr></tbody></table>

## Mega menu blog

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FVztfo3RoAdC5pKOZadaA%2Fmegamenu-blogs.png?alt=media&#x26;token=3231724b-cc84-462c-a536-4e5ed00caf32" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FOUPEq2OrmWqNAJ9FbbK0%2Fblog.png?alt=media&#x26;token=acb140d3-1d6d-4ccb-9da9-4c7f30b79c19" 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://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FHD9jyvis0MtKWpL6VUu8%2Fmegamenu-blogs-block.png?alt=media&#x26;token=ddc963bc-f4a2-495e-ac64-073c24e05c98" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="201">Block</th><th>Description</th></tr></thead><tbody><tr><td>Menu label</td><td>Enter menu item to apply a mega menu, when the mega menu is added, the link to the parent menu will not work.</td></tr><tr><td>Show submenu</td><td>By enabling this checkbox, you can show submenu.</td></tr><tr><td>Choose blog</td><td>Click on "Select blog" to show the blogs in the section and select the blog collection.</td></tr><tr><td>Maximum blog to show</td><td>"Maximum blog to show" is to specify how many blog posts to show in a section. You can show a minimum of “2” and a maximum of “4” blog posts.</td></tr></tbody></table>

## Secondary menu

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FGh6RSejpUjR6kwxYWUi4%2Fsecondary-menu.png?alt=media&#x26;token=29fdb435-e46d-485f-9380-87fc0e2e186e" 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>Secondary menu</strong></p><p>Click on "Select menu" to add a secondary menu in the header section. </p></td></tr><tr><td>First menu color</td><td>Modifying the color of the first menu.</td></tr></tbody></table>

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FW7S5UM5ftZWCD8W4Qvqg%2Fsecondary-menu-block.png?alt=media&#x26;token=f9ba773a-b0e6-46c0-b9d3-398dd14d4213" alt=""><figcaption></figcaption></figure>

## Menu badge

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FuPELLHlBblfoQmAESvck%2Fmenu-badge.png?alt=media&#x26;token=89e1aa42-a451-49f2-8909-ac6cda8dbf15" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FhqQtnAvHtip1n90cWdnB%2Fmenu-badge-block.png?alt=media&#x26;token=08f9c245-086c-4828-a939-35653f05024a" 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://1041626628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQNL2Rsjblk1UxGDo1Rj9%2Fuploads%2FlxsMWO1PMviOjVbsTowB%2Fheader_sections.png?alt=media&#x26;token=d85e03f8-e5f7-445c-bd41-24c7aa221d1b" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="201">Block</th><th>Description</th></tr></thead><tbody><tr><td>Menu label</td><td>Enter menu item to apply a menu badge.</td></tr><tr><td>Badge</td><td>Enter text to show in badge.</td></tr><tr><td>Text</td><td>In this feature, you can change the text color of badge.</td></tr><tr><td>Background</td><td>In this feature, you can change the background color of badge.</td></tr></tbody></table>