# Vertical menu

## The Vertical menu appearance

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2F9pHm5gZflMmngK4AwbWH%2Fvertical-menu.png?alt=media&#x26;token=4dcf373c-30c4-4da9-a204-48a91296c749" alt=""><figcaption></figcaption></figure>

***

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FGVID1FP1eMCO3bQzR8RV%2Fvertical-menu-2.png?alt=media&#x26;token=b717a486-c2c6-43d1-aa15-49b34db82989" alt=""><figcaption></figcaption></figure>

### Vertical menu settings

{% hint style="info" %}
**It will work if the menu bar and logo are 2 lines**
{% endhint %}

| Settings                                        | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Enable                                          | You can enable/disable it.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| Menu                                            | <p>-> <strong>You can change any menu for the vertical menu.</strong></p><p></p><p><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2F4hDFAKW7O2FKYqq7rIkC%2Fchange-menu-verticale.png?alt=media&#x26;token=86c630fc-86b6-4b5b-9d3e-e564ccaa313a" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                               |
| Button label                                    | <p>You can change the label of the "Category" button -</p><p><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FT9QjEVTgpSPXcKlILZaX%2Fcategory-button-label.png?alt=media&#x26;token=3f038ff5-d711-4f45-ba30-f9591cec97f0" alt="" data-size="original"><br></p>                                                                                                                                                                                                                                                                                                                                                                 |
|                                                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| Layout                                          | <ul><li>Masonry</li><li>Grid</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| Number of menu columns                          | You can set a column from the following options for the vertical menu - 1,2,3,4                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| Show collection thumbnail for sidebar menu item | <p><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FUjC5BjnIDgZDK2BHl5y0%2Fsidebar-icon.png?alt=media&#x26;token=625bacd5-7f91-4de3-bec4-8687739d199f" alt=""><br><br>You must add a collection link to the menu item.<br><br><strong>Collection thumbnail</strong>: By default, the first product image will be displayed if you do not upload an image to the specific collection. A collection metafield can be used to set your custom collection thumbnail. To add a metafield follow the instructions. \[<a href="#collection-thumbnail-metafield-setup"><strong>Click here</strong></a>]</p>                            |
| Show collection thumbnail for submenu item      | <p><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2Fn1oM8UQs6oodwBUaLNqj%2Fsubmenu-icons.png?alt=media&#x26;token=fa9d3b9d-f588-4ce8-95e3-100aaefc806d" alt="" data-size="original"></p><p></p><p>You must add a collection link to the menu item<br><br><strong>Collection thumbnail</strong>: By default, the first product image will be displayed if you do not upload an image to the specific collection. A collection metafield can be used to set your custom collection thumbnail. To add a metafield follow the instructions. \[<a href="#collection-thumbnail-metafield-setup"><strong>Click here</strong></a>]</p> |
| <p></p><p>Submenu image icon position</p>       | You can change the icon position of the submenu item.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| **Submenu image icon metafield**                | **Collection thumbnail:** By default, the first product image will be displayed if you do not upload an image to the specific collection. A collection metafield can be used to set your custom collection thumbnail.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| Vertical menu color scheme                      | You can change color of the vertical menu.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |

## **Collection thumbnail Metafield setup:**

{% hint style="success" %}
**Take the following steps:**

1. Go to the **admin > settings**
2. Then click on the **Custom data**
3. Then you will get the option to add a **Metafield**
4. After adding a metafield, you will be able to add an image to the collection
   {% endhint %}

### Step 1 <a href="#step-1" id="step-1"></a>

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FMjXqX2yVmeqnYNfwM18E%2F1.png?alt=media&#x26;token=ff4a4ad3-7067-4330-be3a-706f8cbcb150" alt=""><figcaption></figcaption></figure>

### Step 2 <a href="#step-1" id="step-1"></a>

<div><figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2F48fHkcplV0liCBZxUgQZ%2F2.png?alt=media&#x26;token=5613e172-40b5-45ea-996a-83666def9f1b" alt=""><figcaption></figcaption></figure> <figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FlJGF3TVbpsCEK9yknAwO%2F3.png?alt=media&#x26;token=58b112cd-7e64-460c-82a6-3e214eea5ff3" alt=""><figcaption></figcaption></figure></div>

### Step 3 <a href="#step-3" id="step-3"></a>

{% hint style="success" %}
**Metafiled details**

1. **Name:** Collection custom thumbnail (**You can add any name**)
2. **Namespace and key:** <mark style="background-color:blue;">`meta.catalog_thumbnail`</mark> (It's a **mandatory name**, you must add exactly this name)
3. Select-type: **File > Accet - Only Image**
   {% endhint %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FRrOGLXtYIZ65p4eytkfW%2F4.png?alt=media&#x26;token=a85e62ed-2846-4f30-80b7-c1c0dba7612a" alt=""><figcaption></figcaption></figure>

### Step 4 <a href="#step-4" id="step-4"></a>

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2Fjp9axQA2E2cm98SzDRLG%2F5.png?alt=media&#x26;token=b65b213e-6793-4e3e-92ed-b0e2ebf0b4ef" alt=""><figcaption></figcaption></figure>

### Step 5 <a href="#step-5" id="step-5"></a>

<div><figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FqXcYHcnNXvDRvhnSiL2q%2F6.png?alt=media&#x26;token=08e2feb3-7071-4630-8172-8d05c8aca454" alt=""><figcaption></figcaption></figure> <figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2F3N2wy7UH26XfFJPbZxTv%2F7.png?alt=media&#x26;token=bbb4acf1-3f22-4c9b-912d-82ebc521603b" alt=""><figcaption></figcaption></figure></div>

## Demo

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FUjC5BjnIDgZDK2BHl5y0%2Fsidebar-icon.png?alt=media&#x26;token=625bacd5-7f91-4de3-bec4-8687739d199f" alt=""><figcaption></figcaption></figure>

\\
