# 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 **Online Store > Content > Menus > Create menu**.

<figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FrDs3ncievoNaePMpc9AY%2Fs2.png?alt=media&#x26;token=38d6b6c7-83a6-484a-a55b-e23a457630a7" 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://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2F6fifhJZu4eguXtQrZFsF%2Fs3.png?alt=media&#x26;token=d60de0ca-ce6e-4e4b-8eb6-dd19eb3373a5" 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 product

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

<figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FWct4oycx46IiwyweR7PT%2Fmegamenuproduct.png?alt=media&#x26;token=66a92bd9-601b-471a-b130-349df0fa0f28" 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://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FY3pKDUxnHMAMKvPybUZl%2Fmegamenu.png?alt=media&#x26;token=3d44d20b-4720-4fc4-9ca4-cf45014212f6" 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 %}

<figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FE1QWPNEpOIL4DcSBtkkd%2Fmegamenu2.png?alt=media&#x26;token=44582df2-5995-43b6-893a-2fca1836d63b" alt=""><figcaption></figcaption></figure>

## Mega menu submenu/gallery

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

<figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2F9PimuuQVxynsDxlDVEVN%2Fmegasubmenugallery.png?alt=media&#x26;token=ddbc220e-bc54-4adc-bf03-e0d8d1acc031" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FFwVrjb2xUC00yvx2Zzrk%2Fmegamenugallery.png?alt=media&#x26;token=603a4b22-449a-419c-98e5-cc92c23362dc" 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 **Main menu**.
* 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://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FfNZuVIioCJrCxrKxLyd7%2Fnavigation.png?alt=media&#x26;token=7c4cd733-fcc9-42a8-a786-b3e3d4b16ffc" alt=""><figcaption></figcaption></figure>

## Mega menu single banner

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

<figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FJcDT1plMSqr8aaGVlw5l%2Fsinglebanner.png?alt=media&#x26;token=0e33fe51-7adf-4bae-8c94-c9e9fac238eb" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FFv3UhUqnywVCUKTSKDx0%2Fsinglebannerselect.png?alt=media&#x26;token=cf3a4769-2804-4994-8d1a-16d20c360f6d" alt=""><figcaption></figcaption></figure>

## Mega menu blog

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

<figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FAr8DYjpZ8x3djpvfNV2t%2Fmegamenublogselect.png?alt=media&#x26;token=56ecd197-7e93-4e18-bc37-93d1670136eb" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FKDc5YKfjAs9yN505gl9o%2Fblog.png?alt=media&#x26;token=52c5e5b3-08b7-4f9d-a673-9914ec1cdb03" 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://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2Fk6bHBvcfd8viBjO5E80Y%2Fmegamenublog.png?alt=media&#x26;token=e9ad3f30-b6d5-4a71-9c04-37b59373af64" alt=""><figcaption></figcaption></figure>

## Secondary menu

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

<figure><img src="https://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FDo934QE0CZmZ7p5R6WBU%2Fsecondarymenu.png?alt=media&#x26;token=bf32be6e-f416-415b-9383-a4d0005ebe57" 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>Secondary menu alignment</strong></p><p>Customization of secondary menu alignment in header section is as follows:</p><ul><li>Center</li><li>Right</li></ul><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.</p><p></p></td></tr></tbody></table>

## 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://959312205-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F28lMEJOSKsqmdpx3Cfa4%2Fuploads%2FWp9bL4PVH7VYz3jgVLBu%2Fheader_add_more_sections.png?alt=media&#x26;token=2b84e7d1-625e-48a2-b602-3b0befe98733" alt=""><figcaption></figcaption></figure>

## Menu badge

<table><thead><tr><th width="201">Block</th><th>Description</th></tr></thead><tbody><tr><td>Menu label</td><td><p>Enter menu item to apply a menu badge.</p><p></p></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>

