> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/piano-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/piano-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 **Online Store > Content > Menus > Create menu**.

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2F3jTsX7q2vdexpFlrmdSD%2Fs2.png?alt=media&amp;token=bbc75501-4433-4dfb-a570-a96a80dfa30e" 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://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FY2ZZFhqnaihG2aE1tvZ1%2Fs3.png?alt=media&amp;token=883067dd-613a-4d0c-8036-0f667bd639a7" 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://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FZP1rAf5N9j5ObAGcBKrW%2Fmegamenu2.png?alt=media&amp;token=b89d797e-e1e7-45bd-9e36-9c8eda608d2f" 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://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2F2IWsfOs3xaTUFH95tsc5%2Fmegamenu-3.png?alt=media&amp;token=539afc9a-f426-4a98-acf0-6460cd7cef57" 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 collections

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

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FhtIisn0eoGPGi5W14y5i%2Fmegamenu_collection.png?alt=media&amp;token=33fbe634-9257-4ee6-b744-18bd35a2dcd3" alt=""><figcaption></figcaption></figure>

Mega menu with the collection allows you to add collections with a submenu. Please follow the screenshot.

## 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: 360x360
{% endhint %}

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2F4rG1SYVPpIlKj66fAoJM%2Fmegamenu-gallery.png?alt=media&amp;token=77f3682d-37e8-4fd9-ad94-09af92666529" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FC9k70gb8Jk4tctqlHXTD%2Fmegamenu-6.png?alt=media&amp;token=10aa2109-9a36-428b-b7a9-c562cfb08b10" alt=""><figcaption></figcaption></figure>

## Mega menu blog

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

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2F6xKwpUAyGFCwwOZ31spo%2Fmegamenu_blog.png?alt=media&amp;token=de2af400-4051-4a83-baea-5d2a368bc61b" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FlVGzdbp5Va60Kjw6raqd%2Fblog.png?alt=media&amp;token=bd24fa7a-8720-45f9-9a34-343380d79ce0" 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://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FZzr9LeFVea5HbwaecOZi%2Fmegamenu_blog_product.png?alt=media&amp;token=a9e20812-4f21-4969-bfd9-aa93264175ec" alt=""><figcaption></figcaption></figure>

## Secondary menu

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

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FuyPW4kusRO43SMo0tzU3%2Fmegamenu_secondary.png?alt=media&amp;token=5ccceda7-afe8-4012-b7e6-b7d2ab7669d3" 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></tbody></table>

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

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2FbjhbR29RCJj7xE3G0lEj%2Fsecondary_menu.png?alt=media&amp;token=6715be2d-2c97-43a1-a0d4-3340aff17c8a" alt=""><figcaption></figcaption></figure>

## Menu badge

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

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2Fboi6xwm6cVZqU8u8KXzX%2Fmegamenu_badge.png?alt=media&amp;token=554d60bb-3b8e-4df3-bad6-27ff94ee79ac" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3173492168-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfToP25M1aksUElZIx0oN%2Fuploads%2F1rvXmBJA5P7Low69UbxB%2Fmenu_badge.png?alt=media&amp;token=cc07f369-180b-4602-88e0-bb04f7c8aee6" alt=""><figcaption></figcaption></figure>