# Menu Setup

Displaying a menu at the top of your store helps your customers browse your store and find important pages. With only some simple steps, you can add menu items that link to your webpages, collections, products, store policies, blogs, email links, external websites, etc.

Before you start setting up menus in your store, please have a look at the links below that explain in detail how to create or edit menus and collections.

* [How to create a new menu ?](https://help.shopify.com/en/manual/online-store/menus-and-links/editing-menus#edit-menu-item)
* [How to create a dropdown menu?](https://help.shopify.com/en/manual/online-store/menus-and-links/drop-down-menus#add-a-drop-down-menu-from-the-main-menu)
* [How to create a collection?](https://help.shopify.com/en/manual/products/collections)
* [How to create a smart collection?](https://help.shopify.com/en/manual/products/collections/automated-collections)



### <mark style="color:blue;">Create new menu</mark>

You can create a link list of collections, products, pages or blogs in menu.&#x20;

{% hint style="success" %}
**Steps:**

1. From your shopify store admin -> Click **Online Store** ->[ **C**](https://shopify.com/admin/admin/menus)**onent** -> [<mark style="color:green;">**Menus**</mark>](https://shopify.com/admin/admin/menus)
2. Click **Create menu** -> Add "Name", then click "**add menu item**"
3. Enter **Label**, **Link** and click **Add**
4. Likewise, add all menu items and click Save.
{% endhint %}

You can display this menu as a dropdown for the top menu from the store's main navigation, and you can also select this menu to display in the footer.

### <mark style="color:blue;">Single Link - Simple menu on your store</mark>

This is a simple menu, you can select URL to redirect when the customers click on the menu item.

{% hint style="success" %}
**Steps:**

1. In the theme editor -> Select **Header**  ->  **Add block** -> Click **Single Link**
2. Set **Link Name, Select Menu Link** and click Save.
3. Repeat above steps for all menu items you want to display on store top menu.
{% endhint %}

{% hint style="info" %}
Display white popup or white space while you hover on menu item on your store like in the example below? This is megamenu or dropdown block item that is imported by default on your store while you install theme. You need remove that current menu block and add Single link block instead.  Please follow above given steps to add single link block.
{% endhint %}

<figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2Fjqv3cXa33aqmWbMlhwup%2Fmenu-error1.jpg?alt=media&#x26;token=f13f9503-b9f1-4efd-b5b3-bcdc235d44cf" alt=""><figcaption></figcaption></figure>

### <mark style="color:blue;">Dropdown Menu</mark>

<div align="left"><figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FUdErbNDqkZGtB5MD0h5M%2Fdropdown-menu.jpg?alt=media&#x26;token=ab5dd7ad-ec8b-40e6-a590-e57ddb91f754" alt=""><figcaption><p>Dropdown menu look</p></figcaption></figure></div>

Please follow given steps to add dropdown menu. To display dropdown menu on your store, first you need to create menu with nested menu items. [Click ](https://help.shopify.com/en/manual/online-store/menus-and-links/drop-down-menus#add-a-drop-down-menu-from-the-main-menu)to know more in detail.

#### Build drop-down menus

{% hint style="success" %}
**Steps:**

1. From your shopify store admin -> Click **Online Store** ->[ ](https://shopify.com/admin/admin/menus)Content -> [**Menus**](https://shopify.com/admin/admin/menus)
2. Click **Create menu** -> Add "Name", then click "**add menu item**"
3. Enter **Label**, **Link** and click **Add**
4. Likewise, add all menu items and click save
5. To display nested menu item(child menu item), Drag & Drop menu item to top level item and click save
{% endhint %}

<div align="left"><figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FPvcQtcg1jEg370ehG6XB%2Fdropdown-1.png?alt=media&#x26;token=7612778f-f679-492f-b723-4a7bc5768cc5" alt=""><figcaption></figcaption></figure></div>

#### Add drop-down menu from theme

{% hint style="success" %}
**Steps**:

1. In the theme editor -> Select **Header**  ->  **Add block** -> `Click`` `**`Dropdown Menu`**
2. Set Link Name, Menu Link and Select Dropdown Menu
3. Click save
{% endhint %}

<div align="left"><figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FK6IjSGJef7xnKE5FQxLn%2Fdropdown-2.jpg?alt=media&#x26;token=80985344-5899-4b17-ba02-cec5807d975d" alt=""><figcaption></figcaption></figure></div>

### <mark style="color:blue;">Megamenu Modern</mark>

{% hint style="info" %}
* Display menu items up to 6 column in one row Or Display menu item in multiple row
* Display 4 image banners. Display banners on right side of menu items or below menu items
{% endhint %}

<figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FyRX9cJUua2A6oLyfnr7A%2Fmm-modern.jpg?alt=media&#x26;token=5b88b87b-9f9d-46cb-be85-869f5041ba3e" alt=""><figcaption></figcaption></figure>

**Steps 1:**&#x20;

To display megamenu modern on your store, first you need to create a menu with sub menu items from your shopify [store admi](https://shopify.com/admin/admin/menus)n&#x20;

Add Menu items with Sub Menu Items As display below ( screenshot is only for reference )

<div align="left"><figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2F7P36LMW5ypxo9BMMKO7v%2Fmm-modern1.jpg?alt=media&#x26;token=4d9e212c-6e5a-4a59-9c04-a7470c559cb9" alt=""><figcaption></figcaption></figure></div>

**Step 2:**

* In the theme editor -> Select **Header**  ->  **Add block** -> `Click MM Modern`
* Add Link Name, Menu Link, Select Menu, Select Columns, Set Banner Images(Optional).

<div align="left"><figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FGZcX8XPQQOzbGEHOWODA%2Fmm-modern2.jpg?alt=media&#x26;token=72acd9ac-d8ba-4575-8810-beb499cbf6fc" alt=""><figcaption></figcaption></figure></div>

### <mark style="color:blue;">Megamenu Products</mark>

{% hint style="info" %}
* Display products up to 6 column
* Display featured banner on left or fullwidth (optional)
{% endhint %}

<div align="left"><figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FuGbqmKI89jo0lbrSpTWV%2FMM-PRODUCTS.jpg?alt=media&#x26;token=69a55b2b-d0f2-4447-9fb4-5fcc0d19e44c" alt=""><figcaption><p>Preview</p></figcaption></figure></div>

{% hint style="success" %}
&#x20;**Steps:**

* In the theme editor –> Select **Header**  ->  **Add block** ->  Click **MM Products**
* Set Links Name, Menu Link and Select Collection to display featured products
* Set Products Limit, Number of Columns for products and button
* Set Featured Column with image, title, subtitle, buttons and link
{% endhint %}

<div align="left"><figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2Fl0qwZ8VQ9hjfb91VhRXo%2FMM-PRODUCTS-2.jpg?alt=media&#x26;token=12c4bd79-2686-4bf5-876f-565856ae12c0" alt=""><figcaption></figcaption></figure></div>

### <mark style="color:blue;">Megamenu Top Image Columns</mark>

{% hint style="info" %}
* Display Up to 5 Columns with Image On Top
* Display Up to 5 Images Banner with Title and Links
{% endhint %}

<figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FF8rnXFCfKN5HlOWkxO2s%2Fmm-topimage-1.jpg?alt=media&#x26;token=27772fbb-0312-4dee-8563-829f9970a5a8" alt=""><figcaption></figcaption></figure>

**Step 1:**

From your shopify store admin -> Click **Online Store** -> Conten -> [<mark style="color:green;">**Menus**</mark> ](https://shopify.com/admin/admin/menus)-> Click C**reate menu**

Add Menu with Sub Menu Items. To use this Megamenu, Please create different menus for each columns.

I.e. If you want to display 4 columns to Display Women, Men, Kids, and Accessories collection then create 4 different menus. [**How to create Menu?**](https://help.shopify.com/en/manual/sell-online/online-store/menus-and-links#adding-a-new-menu)

**Step 2:**&#x20;

{% hint style="success" %}
* In the theme editor –> Select **Header**  ->  **Add block** ->  Click **MM Top Image Columns**
* Set Link Name, Menu Link
* Set title, image, image link and select menu for each column you want to display
{% endhint %}

<figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2F9aqJddP5ey7C50RZ0eA1%2Fmm-topimage-2.jpg?alt=media&#x26;token=2e7fadd5-d824-4bde-a552-404be2b03c16" alt=""><figcaption></figcaption></figure>

### <mark style="color:blue;">Megamenu Background Image</mark>

{% hint style="info" %}
* Display menu items up to 6 column in one row Or Display menu item in multiple row
* Add menu background image
{% endhint %}

**Steps 1:**&#x20;

To use this megamenu on your store, first you need to create a menu with sub menu items from your shopify [store admi](https://shopify.com/admin/admin/menus)n&#x20;

Add Menu items with Sub Menu Items As display below ( screenshot is only for reference )

<div align="left"><figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2F7P36LMW5ypxo9BMMKO7v%2Fmm-modern1.jpg?alt=media&#x26;token=4d9e212c-6e5a-4a59-9c04-a7470c559cb9" alt=""><figcaption></figcaption></figure></div>

**Step 2:**

* In the theme editor -> Select **Header**  ->  **Add block** -> **MM Background Image**
* Add Link Name, Menu Link, Select Menu, Select Columns, Set Banner Images(Optional).

<figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FqRJvy8oDgqDR3I3lXeuu%2Fmmbg-2.jpg?alt=media&#x26;token=d540a77f-b6d4-4aa3-a4a8-e99d93067353" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FrmPl3OoobRgecYLyJxIh%2Fmmbg-3.jpg?alt=media&#x26;token=93f9dfb2-724a-4a7d-ae04-7aa3ceaf80b5" alt=""><figcaption></figcaption></figure>

### <mark style="color:blue;">Megamenu Advanced</mark>

{% hint style="info" %}
* Display menu with sub menu items on left or fullwidth
* Display products from collection. Select collections to display products on right side
{% endhint %}

<div align="left"><figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2Fx5jpLsZaXrLTbuI2MNpu%2Fmm-advanced1.jpg?alt=media&#x26;token=6ccdf2ed-2835-4776-8d00-f4e46f1dd71a" alt=""><figcaption><p>Preview style</p></figcaption></figure></div>

**Steps 1:**&#x20;

To display this megamenu on your store, first you need to create a menu with sub menu items from your shopify [store admi](https://shopify.com/admin/admin/menus)n&#x20;

Add Menu items with Sub Menu Items As display below ( screenshot is only for reference )

<div align="left"><figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2Fsec6evUsXWcGWfmeTxDG%2Fmm-advanced2.jpg?alt=media&#x26;token=113b0d92-9f45-45ae-914c-f661027ea176" alt=""><figcaption><p>Preview menu</p></figcaption></figure></div>

**Step 2:**

* In the theme editor -> Select **Header**  ->  **Add block** -> `Click MM Advanced`
* Add Link Name, Menu Link, Select Menu, Select Columns, Select collection to display products on right side and click save

<div align="left"><figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FezWA9fPRkgvPY8Pf01G6%2Fmm-advanced3.jpg?alt=media&#x26;token=6875b128-e1dc-4c7a-ba7b-de7944a7acc8" alt=""><figcaption><p>preview style</p></figcaption></figure></div>

### <mark style="color:blue;">Megamenu Categories</mark>

{% hint style="info" %}
* Display menu items in vertical
* Auto retrieve products from main menu item(collection) and display on right side.&#x20;

you can hide products if you do not want to highlight products in menu popup
{% endhint %}

<figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FxAPH3Y442NW5sLcaW2rW%2Fmm-category1.jpg?alt=media&#x26;token=dfed0784-3a34-4cf9-b17b-ebe195cc9e2e" alt=""><figcaption></figcaption></figure>

**Steps 1:**&#x20;

To display megamenu categories on your store, first you need to create a menu with sub menu items from your shopify [store admi](https://shopify.com/admin/admin/menus)n

Add Menu items with Sub Menu Items As display below ( screenshot is only for reference ).

Select collection(category) for each main menu item you create.

<div align="left"><figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FglsuDksc8fqbkfQKJaKb%2Fmm-category2.jpg?alt=media&#x26;token=395775a0-e034-4d03-abd3-9eb8c4874b02" alt=""><figcaption></figcaption></figure></div>

**Step 2:**

* In the theme editor -> Select **Header**  ->  **Add block** -> `Click MM Categories`
* Add Link Name, Menu Link, Select Menu.
* You can show icons for each menu items.&#x20;
* Set main links and sub links look and set columns for sub links
* Enable options to show products from main link item. Set option to show products in popup
* click save

<figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FqW51UPNor6V4ThF19UbX%2Fmm-category3.jpg?alt=media&#x26;token=ae7162c9-065a-43bc-af70-a2b093d87c15" alt=""><figcaption></figcaption></figure>

### <mark style="color:blue;">Megamenu Collections</mark>

{% hint style="info" %}
* Display collections with image and title
* Display collections up to 10 columns Or with multiple row&#x20;
{% endhint %}

<div align="left"><figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2FhWvuI8Kdu947fTzpaDCc%2Fmm-collections1.jpg?alt=media&#x26;token=8b85f4f4-801a-4952-8084-a5284334fc80" alt=""><figcaption></figcaption></figure></div>

**Steps 1:**&#x20;

To display megamenu collections on your store, first you need to create a menu from your shopify [store admi](https://shopify.com/admin/admin/menus)n

Add Menu items. Select collection link for each menu item you create. ( screenshot is only for reference ).

<div align="left"><figure><img src="https://1708375644-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrsFZ0qmgr873lDxCKvMZ%2Fuploads%2F3eXdi4Y4sq7iyJD6l9st%2Fmm-collections2.jpg?alt=media&#x26;token=acbe3c48-73df-4d46-9b13-7e059a9393d3" alt=""><figcaption></figcaption></figure></div>

**Step 2:**

* In the theme editor -> Select **Header**  ->  **Add block** -> `Click MM collections`
* Add Link Name, Menu Link, Select Menu.
* Show collection image and manage look.&#x20;
* Set font size for collection title and select columns for collections
* click save



{% embed url="https://youtu.be/AG4knloLWXU" %}

### How to Set Menu Labels?



{% embed url="https://www.youtube.com/watch?index=20&list=PLMxCmXo1JExNqDbGICYYZyhMBxUvlFltS&t=10s&v=jglLrh54tok" %}
