# 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://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FFWfDyeJuQPDKI9oa6Cwb%2Fs2.png?alt=media&#x26;token=bb6d751f-781a-410f-aa10-7ff2ca80e440" 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://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2Fcj5eFa4OPwSrXTQa5nyX%2Fs3.png?alt=media&#x26;token=2a7a41b5-6de0-43a2-9412-777bea573e82" 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 product, Mega menu submenu/gallery, Mega menu blog

### Mega menu product

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

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FAUvyHv18r9wvTPGvt7FW%2Fmega-product-select.png?alt=media&#x26;token=cd816fd4-576b-49cd-81fa-a96bc22a4009" 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://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FJAYAqAC0NjzWxy5XwTSE%2Fmegamenu.png?alt=media&#x26;token=9c7a1141-2078-4a25-911a-5dfa3311b1c1" 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://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FW3OFzyU75pOJNJFEcixf%2Fmegamenu-1.png?alt=media&#x26;token=5b284d17-2879-4c87-afe9-e60509ca1a25" alt=""><figcaption></figcaption></figure>

### Mega menu submenu/gallery

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

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FMzZrZSkXyuatGOKdlIUj%2Fmega-submenu-gallery-select.png?alt=media&#x26;token=49fe9aed-fe2f-4020-8e44-8bf14f668875" alt=""><figcaption></figcaption></figure>

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

{% hint style="info" %}
**Recommendation Size**\
Image gallery size: 400x197&#x20;
{% endhint %}

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FMoa7ny70uXqivMlUFTc5%2Fmegamenu-2.png?alt=media&#x26;token=1979d699-a532-485c-aff8-2aaa06954063" alt=""><figcaption></figcaption></figure>

* 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://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FlDyCzCV7Hs5Wc7xduId4%2Fmega-sub.png?alt=media&#x26;token=397dc438-3ce2-4ef7-afd0-cac163002d8f" alt=""><figcaption></figcaption></figure>

### Mega menu blog

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

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FccKzB0kZ1eofTqeRKkY3%2Fmega-blog-select.png?alt=media&#x26;token=6be4686f-263e-442d-bf14-2449a43faba2" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2F87uLkNENyWBYmGnlnv7g%2Fblog.png?alt=media&#x26;token=091bfbdc-aa7b-4ea8-9b98-63a16c9eeba5" 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://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FDFV8JKW8m3pyrj2tYDF1%2Fmegamenu-3.png?alt=media&#x26;token=898e419d-4f93-45b9-8a21-e8daa18da40d" alt=""><figcaption></figcaption></figure>

### Menu badge

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

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FSpMImzCSqXwPaRuTMiZg%2Fmenu-badge.png?alt=media&#x26;token=2fda3146-154b-4c38-8776-d6742e90b408" alt=""><figcaption></figcaption></figure>

After adding a badge, select the badge in the "Menu badge" block. Please follow the below screenshot.

<figure><img src="https://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FXW2aS49OaD7tVNj0WzNk%2Fblockbadge.png?alt=media&#x26;token=cf05d494-93aa-41b2-a2e0-69440f1f8c24" 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://1291024468-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyN3AVm8eGZ8KfCXj2wM%2Fuploads%2FoPegsAnRzbe8IMzwDNVU%2Fwp_add_head_sections.png?alt=media&#x26;token=505a84eb-e7ef-4c0a-9dd1-448c178d9136" alt=""><figcaption></figcaption></figure>