> For the complete documentation index, see [llms.txt](https://docs.smind.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.smind.io/sections/header.md).

# Header

The header is the top section of your store, containing key elements like the logo, navigation menu, search bar, and cart icon to help customers navigate the site easily.

## How To Install ?

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FP9ipUjDz8dgbOtRNwQss%2FHeader%201213.gif?alt=media&token=a79ce1a3-1d75-4403-815b-3b869c03f685>" %}

To install **Header** section in our app. You can follow these steps and the images below:

1. From our app, click Library
2. In the **Sections** tab, search for the keyword **"header"**.
3. Click **Install** and **Customize** the header you want

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FNMcTXrnHwer1VciWJY8b%2FHeader%201.jpg?alt=media&amp;token=418ae056-1000-47c9-b5ce-fc4fd4ec9966" alt=""><figcaption></figcaption></figure>

4. From the Shopify editor sidebar, click **Add Section.**
5. Select the header section you want.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F2qvNQ7fTKZvsLb5PWElQ%2FHeader%202.jpg?alt=media&amp;token=41cc34ef-11fe-43f1-98bf-2afe2d60ea5e" alt=""><figcaption></figcaption></figure>

## How To Use?

#### Follow Our Interactive Guide

{% hint style="success" %}
**HOW TO USE**:

1. Click the hotspot to see the next step. You can also use -> <- on the header tab to follow.
2. To open window in a full screen, click ![](https://docs.avada.io/~gitbook/image?url=https%3A%2F%2F154471318-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FPf5QlibAKQnTygXuMIzw%252Fuploads%252FQBFy0FT3wz6EXP1sadUF%252Fimage.png%3Falt%3Dmedia%26token%3D5ea8f285-c5a7-4dbf-b5f1-04e56f24db02\&width=300\&dpr=4\&quality=100\&sign=89193c3b\&sv=2) for better experience
   {% endhint %}

{% hint style="info" %}
If you would like to add or edit the menu, you can find instructions [here](https://help.shopify.com/en/manual/online-store/menus-and-links/editing-menus).
{% endhint %}

{% @guideflow/guideflow-embed requestedUrl="<https://app.guideflow.com/player/lpnmg6dsjr>" %}

## Mega Menu (Collection)

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F1u0P3ZIR6AdXM1vHotxK%2Fimage.png?alt=media&amp;token=21520d96-95da-4950-a349-6630900a5113" alt=""><figcaption></figcaption></figure>

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FPm5Wtst6BhgSWIm0c8B6%2FMega%20Menu%20Collection.mp4?alt=media&token=79b3429b-9356-45f8-8afd-6bd6136dab6d>" %}

1. Click **Add Block.**
2. Select the **Mega Menu (Collection)** block.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FXkKDEOWswDy4QfzH5cBD%2FMega%20Menu%201.jpg?alt=media&amp;token=d2a466d4-9e64-4ef0-864c-5f1f1dca98bf" alt=""><figcaption></figcaption></figure>

3. Enter the name of menu item. For example, I want to select the **Shop** item.
4. Select the number of column displayed on desktop.
5. Select the **Collections** to display on.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FWrlXfSlMaUwKdjv52xc6%2FMega%20Menu%202.jpg?alt=media&amp;token=4fd79c70-bf21-47ae-b07a-b460cfce42e6" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If you want to use multiple menu items in a mega menu format, you just need to write the menu items you want, separated by commas.
{% endhint %}

## Mega menu (Banner)

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FbXVRXOgimeOTxYsHf1wg%2FMega%20Menu%20Collection.mp4?alt=media&token=4d08948e-e3ff-4b3b-90b5-6dc3743eb7ae>" %}

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FZbrrQCUvV1qJr90kCffm%2Fimage.png?alt=media&amp;token=2eda183f-849b-42dd-aa93-2837afb6f353" alt=""><figcaption></figcaption></figure>

1. Click **Add Block**.
2. Click **Mega Menu (Banner)** block.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2Fwz90qGmklbPjZP34zHpq%2FMega%20Menu%203.jpg?alt=media&amp;token=77bce604-aeb0-4cbc-ae80-7438d99eecdd" alt=""><figcaption></figcaption></figure>

3. Enter the name of menu item. For example, I want to select the **Shop** item.
4. Select the **Number of Column Displayed on Desktop**.
5. Choose the **Banner Position** to left or right side.
6. Select the **Image** you want to set it up as banner.
7. In the **Heading** field, enter the title of banner.
8. Choose the **Heading Size,** and insert the **Link** of banner or URL of product.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FZHPwIaC5qc4yMfPoqW0o%2FMega%20Menu%204.1.jpg?alt=media&amp;token=457d7570-38e1-43ae-a944-8ede719d021d" alt=""><figcaption></figcaption></figure>

## Mega menu (Products)

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FcC9bH6r8m5QQrBPfeMna%2Fimage.png?alt=media&amp;token=cafbdc83-eec2-4d41-9db8-11cf96e18a53" alt=""><figcaption></figcaption></figure>

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2Fj73AB6uh7Po2U1o8yqBN%2FMega%20Menu%20Product.mp4?alt=media&token=f6ba5822-ecae-4e28-9395-2e535749ad0f>" %}

1. Click **Add Block.**
2. Click **Mega Menu (Products)** block.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FIw1pFdpnjuNXfpseqxT4%2FMega%20Menu%205.jpg?alt=media&amp;token=52d0e31b-27c3-4c4e-a8df-5ff73c8a9b82" alt=""><figcaption></figcaption></figure>

3. Enter the name of menu item. For example, I want to select the **Shop** item.
4. Select the **Number of Column Displayed on Desktop**.
5. Enter the **Heading** of product banner.
6. Choose the **Heading Size**.
7. Select the **Products** you want to display on the mega menu

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FDSgEmRbCGpydNU0vW9vd%2FMega%20Menu%206.jpg?alt=media&amp;token=69b049fb-d31c-4ce5-a9e2-303063d8aebf" alt=""><figcaption></figcaption></figure>

8. Choose the **Media Ratio**.
9. Choose the **Media Shape.**
10. Adjust the **Content Alignment.**
11. Enable to show **Add To Cart button.**
12. Enable to show **Price.**
13. Enable to show **The second image on hover.**
14. Enable to show **Vendor.**
15. Enable to show **Color Swatch**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2Fs9zVPd4Dl5qYSQYaer70%2FMega%20Menu%207.jpg?alt=media&amp;token=4b68fb9b-030e-4b6e-a82b-9da63bba0e76" alt=""><figcaption></figcaption></figure>

## Mega menu (Product tabs)

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FtelpmpLGQegs7MzyrsJh%2Fimage.png?alt=media&amp;token=0f681ee2-d206-4110-86fe-5d4dd08c0b96" alt=""><figcaption></figcaption></figure>

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FbDjgIeHn9INxntPDVT4c%2FMega%20Menu%20Product%20Tabs%201.mp4?alt=media&token=f186ffb2-bfec-4fdd-91de-b45999279318>" %}

1. Click **Add Block.**
2. Click **Mega Menu (Product Tabs).**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FnnNweKTJyqqmDd9najlz%2FMega%20Menu%208.jpg?alt=media&amp;token=87e891d3-6141-40b5-81c8-a29f3dbae903" alt=""><figcaption></figcaption></figure>

3. Enter the name of menu item. For example, I want to select the **Shop** item.
4. Select the **Collections** you want to display on the mega menu
5. Select the **Number of Product Column** displayed on desktop.
6. Choose the **Media Ratio**.
7. Choose the **Media Shape.**
8. Adjust the **Content Alignment.**
9. Enable to show **Add To Cart button.**
10. Enable to show **Price.**
11. Enable to show **The second image on hover.**
12. Enable to show **Vendor.**
13. Enable to show **Color Swatch.**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FK3LXshaBrMl8FoExfnlv%2FMega%20Menu%209.jpg?alt=media&amp;token=2fbd15a7-85e5-4b6b-b746-688e7dbcce30" alt=""><figcaption></figcaption></figure>

## Menu label

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FjoYOS4OAnsjRfJapHXRd%2Fimage.png?alt=media&amp;token=363d5db5-037d-4f8b-91f2-fed9a08f7839" alt=""><figcaption></figcaption></figure>

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FqEEhokxGmG05gpe7FIZ0%2FMenu%20Label.mp4?alt=media&token=97d32caa-67d8-47f6-a8ad-5c273d862c36>" %}

1. Click **Add Block.**
2. Click **Menu Label.**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2Flbs4bzxf3djS7hsjpXnV%2FMega%20Menu%2010.jpg?alt=media&amp;token=a42f689b-7232-4638-9854-eed5e61956bf" alt=""><figcaption></figcaption></figure>

3. Enter the **Label** of menu. For example: Hot Items
4. Select the **Color Background** for the label.
5. Select the **Color Text**.
6. Enter the **Menu Name** for the label.
7. Select the **Animation** for the label.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FSbCPSCX4uhUK4ncBMx19%2FMega%20Menu%2011.jpg?alt=media&amp;token=707efe49-a2bb-4be2-9fa6-333eed0b1337" alt=""><figcaption></figcaption></figure>

## Search suggestions

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FmStidZOweCcQzLK9ivJB%2Fimage.png?alt=media&amp;token=3a368fc7-0e79-4dc6-ab12-39c7b8f45702" alt=""><figcaption></figcaption></figure>

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FkhTtiR9gFfJl16LAwYD6%2FSearch%20Suggestion.mp4?alt=media&token=f449cf65-62cb-416d-8bb6-b3b889a346e3>" %}

1. Click **Add Block.**
2. Click **Search Suggestions** block.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FR2T6Nz8id1ShHh3uhwlC%2FMega%20Menu%2011%20(1).jpg?alt=media&amp;token=77a65c70-02e7-4419-a3e1-53c8fec8b73e" alt=""><figcaption></figcaption></figure>

3. Enable **Recent Search** function.
4. Enter the **Popular Search Keywords.**
5. Enter the **Heading** of Product Recommendation.
6. Choose the **Heading Size.**
7. Select the **Produc**t that you want to display on search bar.
8. Display the **Number of Columns** on desktop.
9. Choose the **Media Ratio**.
10. Choose the **Media Shape.**
11. Adjust the **Content Alignment.**
12. Enable to show **Add To Cart button.**
13. Enable to show **Price.**
14. Enable to show **The second image on hover.**
15. Enable to show **Vendor.**
16. Enable to show **Color Swatch.**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FagRLacegWBS5cfxVVUBL%2FMega%20Menu%2012.jpg?alt=media&amp;token=1ce1559b-7e92-409a-8130-ae6001c3967a" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If you don't want 'Popular searches' to be displayed, simply leave the 'Popular search keywords' field empty in the settings.
{% endhint %}