> 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

## 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="/files/68qCdwwyMTobrsXcGcw2" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/W1H0ExoIWWbKkROE4Vpj" 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="/files/rWcfB4kdynNzdYcDn9qQ" 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="/files/u38KSHrmLo0ChEfNvfqi" 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="/files/mQTyBheDhHREIbvGkkeM" 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="/files/2vK9rbI4Slkradg32WvN" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/vPT4ylx88frDxswfPtfn" 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="/files/VFTOyeCriUbtAaqzcCpF" alt=""><figcaption></figcaption></figure>

## Mega menu (Products)

<figure><img src="/files/kRQJvrZnujpJ8skpZ8PP" 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="/files/wrotw1L8qrOz2zDG2uka" 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="/files/Urn6bXpPtMYDVDnb9zdI" 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="/files/CtRFTeOukK5zAA6QR9Eh" alt=""><figcaption></figcaption></figure>

## Mega menu (Product tabs)

<figure><img src="/files/fw0rwSR3ZXJtm6AXYk96" 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="/files/D0hBNeuQalAjjau4Q19f" 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="/files/sEgNiAjRNsLar1hJui7Q" alt=""><figcaption></figcaption></figure>

## Menu label

<figure><img src="/files/V1jOt6joJpUw2CGmIE3c" 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="/files/AuZcW7FMFgWbh5xAeYLp" 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="/files/Wc0K29tznwMS7lHXyDNO" alt=""><figcaption></figcaption></figure>

## Search suggestions

<figure><img src="/files/KUjSBPTj1KfU57HeepVT" 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="/files/MEKZWm5SJtEIFPUyM5bs" 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="/files/TMtuxWIV33nF8gq3l6hw" 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 %}