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

# Header 2

The Header section offers a clean and intuitive navigation experience, helping customers easily explore and access key areas of your store.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FGGcYTXgCyqdEIlvQXACl%2Fimage.png?alt=media&amp;token=dfbf30d0-89b1-485f-8562-04e85d515a7c" alt=""><figcaption></figcaption></figure>

To customize the Header 2 in our theme please follow the steps:

{% hint style="success" %}
Steps

1. In the theme editor (Customize), go to **Header Group**, then click **Add section**.
2. Locate **Header 2**
3. **Save**
   {% endhint %}

Before setting up the Header section, make sure you’ve configured it properly in **Theme Settings**.&#x20;

👉 The Header has two configuration parts: one in **Theme Settings** and another in the **Section**. Please follow the link below to set up the Header in Theme Settings first, then return here to complete the Section setup.

{% content-ref url="/pages/mEkjmhieuNysmLlPRdO9" %}
[Header](/vshop/theme-settings/header.md)
{% endcontent-ref %}

## **Section Settings**

Header 2 provides additional customization options with separated color schemes for the top and bottom areas.\
You can adjust colors, add a hotline, and display an image or contact information.

**Settings include:**

* **Color scheme top / bottom:** Choose color styles for the top and bottom parts of the header.
* **Color sub menu:** Set the background color for the dropdown submenu.
* **Show info 2:** Enable to display an extra information area.
* **Image info 2:** Add an icon or small image (e.g., phone icon, chat icon).
* **Title info 2:** Enter a label such as *Hotline*, *Support*, or *Contact us*.
* **Description info 2:** Add contact text or a phone number.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FMMeYtenYhTUNHWYx58LF%2Fimage.png?alt=media&amp;token=98c072c7-8766-431c-b7c7-8cc87f6a93c5" alt=""><figcaption></figcaption></figure>

***

💡 **Tips:**\
Use this section if your store needs a **two-layer header** (e.g., top bar for contact info and bottom bar for navigation).

## Block Settings

The Header section includes multiple block types that allow you to build flexible navigation layouts. When adding a block, select the **block type** that fits your menu design and purpose.

* **Block: Menu Normal** – Use this block to create a **standard dropdown menu** with navigation links.
* **Block: Single Link** – Use for **a single navigation link** such as *Buy Now*, *Contact*, or *Track Order*.
* **Block: Multi Column** – Use this block to create a **mega menu** with multiple columns, product lists, or banner images.
* **Block: Banner Parent & Banner Child** – Use these blocks together to build **a banner-style mega menu**.
  * Add **Banner Parent** first as the main container.
  * Then add one or more **Banner Child** blocks inside it to display each banner item.

After selecting the desired block type, customize its content, links, and layout options according to your header design.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FpY3BWDqxjOqTZXl3MHb3%2Fimage.png?alt=media&amp;token=2361c2e0-20f7-41a5-8b77-ffe7687a1676" alt=""><figcaption></figcaption></figure>

### **Block: Menu Normal** <a href="#block-menu-normal" id="block-menu-normal"></a>

The Menu Normal block lets you add a simple dropdown menu with a title and link. You can also assign a label like Hot or New to highlight it.

👉Click the link below to view the detailed setup instructions for the **Menu Normal** block.

{% content-ref url="/pages/b69rzmDn0FjWKR7AtkjZ" %}
[Block: Menu Normal](/vshop/header-group/header/block-header/block-menu-normal.md)
{% endcontent-ref %}

***

### Block: Single Link <a href="#block-single-link" id="block-single-link"></a>

Adds a single navigation item or button to the header, typically used for quick-access links such as *Buy Now*, *Contact*, or *Track Order*.

👉Click the link below to view the detailed setup instructions for the **Single Link** block.

{% content-ref url="/pages/epZw8kNyR767Z8kUE4KE" %}
[Block: Single Link](/vshop/header-group/header/block-header/block-single-link.md)
{% endcontent-ref %}

***

### **Block: Multi Column** <a href="#block-multi-column" id="block-multi-column"></a>

Creates a **mega menu** layout with multiple columns, banners, and product links — ideal for stores with large product categories.

👉Click the link below to view the detailed setup instructions for the **Multi Column** block.

{% content-ref url="/pages/nRRRoAmLH66Nd8nk4iAB" %}
[Block: Multi Column](/vshop/header-group/header/block-header/block-multi-column.md)
{% endcontent-ref %}

***

### Block: Banner Parent & Banner Child <a href="#block-banner-parent-and-banner-child" id="block-banner-parent-and-banner-child"></a>

These two blocks work **together** to create a *banner-style mega menu*.

* **Banner Parent** is the **main container** — it defines the overall layout and holds all the child banners.
* **Banner Child** represents each **individual banner item** inside the parent block (e.g., a single demo or category image).

👉Click the link below to view the detailed setup instructions for the **Banner Parent & Banner Child** block.

{% content-ref url="/pages/Go349UY94N2KZoKdiETK" %}
[Block: Banner Parent & Banner Child](/vshop/header-group/header/block-header/block-banner-parent-and-banner-child.md)
{% endcontent-ref %}

***

### Block: Vertical Menu

The Vertical Menu block allows you to create a multi-level dropdown menu with custom icons and banners.

👉Click the link below to view the detailed setup instructions for the **Vertical Menu** block.

{% content-ref url="/pages/k8Fh4A4M9sVaAR3Ssgv8" %}
[Block: Vertical Menu](/vshop/header-group/header/block-header/block-vertical-menu.md)
{% endcontent-ref %}