# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.smind.io/sections/header.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.