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

# Available Blocks

The elements you can place inside a header row. Add any block to either row, in any order, and choose which column it sits in with its **Position** setting.

***

## Position

Every block has a **Position** setting — Left, Center, or Right. It decides which column of the row the block goes into. See [Header Structure](/helix/header-group/header/header-structure.md) for how columns work.

***

## Quick Reference

| Block                               | What it does                                        |
| ----------------------------------- | --------------------------------------------------- |
| [Logo](#logo)                       | Shows your store logo                               |
| [Menu](#menu)                       | Main navigation bar with dropdowns and mega menus   |
| [Search](#search)                   | Search icon, label, or an always-visible search bar |
| [Cart](#cart)                       | Opens the cart drawer                               |
| [Account](#account)                 | Links to the customer account or login              |
| [Recently Viewed](#recently-viewed) | Opens a drawer of recently viewed products          |
| [Quick Links](#quick-links)         | A row of inline shortcut links                      |
| [Localization](#localization)       | Currency and language selectors                     |
| [Divider](#divider)                 | A vertical line to separate blocks                  |

***

## Logo

Shows your store logo in the header. The image itself is uploaded in [Logo and Favicon](/helix/theme-settings/logo-and-favicon.md).

* **Width** — The logo's display width in the header.

In transparent header mode the theme automatically swaps to your transparent logo. See [Transparent Header](/helix/header-group/header/transparent-header.md).

***

## Menu

Displays a Shopify navigation menu as a horizontal bar with dropdowns and mega menus.

* **Menu** — the Shopify navigation menu to display. Menus are managed in **Shopify admin → Online Store → Navigation** — see [Navigation and menus](https://help.shopify.com/en/manual/online-store/menus-and-links).
* **Gap** — spacing between top-level items.
* **Dropdown icon** — shows a chevron next to items that have a submenu.
* **Dropdown trigger** — whether submenus open on hover or on click.

### Menu Typography

Sets the font, size, letter spacing, and text case for the top-level menu items.

### Submenu Typography

Sets the font, size, text case, and text color for the dropdown submenu items.

To add banners, collection images, or a product list to a dropdown, see [Mega Menu](/helix/header-group/header/mega-menu.md).

***

## Search

Shows the store search in the header. Choose how it appears with the **Type** setting.

{% tabs %}
{% tab title="Icon" %}
![Search — icon only](/files/jMFgkJ5QKcW87YK66MWe)

Shows the search icon only. Icon size follows the header setting in [Header Styling](/helix/header-group/header/header-styling.md).
{% endtab %}

{% tab title="Text" %}
![Search — text label only](/files/vr97LcGX203aZghn7Vbt)

Shows a text label instead of an icon. Set the label text and its font, size, and letter spacing.
{% endtab %}

{% tab title="Icon with text" %}
![Search — icon and label](/files/szYyE2P0dy3e05G2MPbl)

Shows the icon and a text label together. Set the label text and its font, size, and letter spacing.
{% endtab %}

{% tab title="Search bar" %}
![Search — inline search bar](/files/3bQWtJCIyGu6blFtOnDt)

Shows an always-visible input field in the header. Set the field **Height** and its **Max width**.
{% endtab %}
{% endtabs %}

***

## Cart

Opens the cart drawer. A live item-count badge appears on the icon when the cart has items.

Choose how the block appears with the **Type** setting. When the type is **Icon**, the **Badge type** setting controls the look of the count badge.

{% tabs %}
{% tab title="Icon" %}
![Cart — icon only](/files/xryRTc1GOKxW9Mxki7mi)

Shows the cart icon only.
{% endtab %}

{% tab title="Text" %}
![Cart — text label only](/files/rsWECVmvwo4nA59EmDMs)

Shows a text label instead of an icon. Set the label text and its font, size, and letter spacing.
{% endtab %}

{% tab title="Icon with text" %}
![Cart — icon and label](/files/v0PusoUI4xP4sZtUYbt3)

Shows the icon and a text label together. Set the label text and its font, size, and letter spacing.
{% endtab %}
{% endtabs %}

***

## Account

Opens the account panel — a sign-in panel for guests, or the customer's account and menu once they are signed in. Choose how the block appears with the **Type** setting.

{% tabs %}
{% tab title="Icon" %}
![Account — icon only](/files/NfONhC3iJxk2ZKQyJ5Y7)

Shows the account icon only.
{% endtab %}

{% tab title="Text" %}
![Account — text label only](/files/gdKp30K4Pn7sNdxlhTPP)

Shows a text label instead of an icon. Set the label text and its font, size, and letter spacing.
{% endtab %}

{% tab title="Icon with text" %}
![Account — icon and label](/files/4CBeSYYmUSXWGA7aM8cR)

Shows the icon and a text label together. Set the label text and its font, size, and letter spacing.
{% endtab %}
{% endtabs %}

{% hint style="info" %}
Once a customer signs in, the block shows their avatar in place of the icon or label, whichever **Type** you chose.
{% endhint %}

{% hint style="info" %}
The menu inside the account panel is set in [**Theme Settings → Customer account**](/helix/theme-settings/customer-account.md). The block only shows when customer accounts are turned on in **Shopify admin → Settings → Customer accounts**.
{% endhint %}

***

## Recently Viewed

Opens a drawer of the products the customer has recently viewed. The list updates on its own — no setup needed.

Choose how the block appears with the **Type** setting (icon, text, or icon with text). For the text options, set the label and its font, size, and letter spacing. Use **Page link** to point to your recently viewed page.

{% hint style="info" %}
For setup, see [How to set up a recently viewed page](/helix/how-to-guides/how-to-set-up-a-recently-viewed-page.md).
{% endhint %}

***

## Quick Links

A compact row of inline text links placed straight into the header.

* **Menu** — the Shopify navigation menu to use. Manage menus in **Shopify admin → Online Store → Navigation**.
* **Gap** — spacing between links.
* **Typography** — font, size, letter spacing, text case, and text color for the links.

***

## Localization

Shows a currency selector, a language selector, or both. Each one shows the customer's current choice and lets them switch without leaving the page.

* **Dropdown trigger** — whether the selectors open on hover or on click.
* **Show country / region selector** — turns on the currency selector. **Show country name** adds the country name, and **Show country flag** adds the flag.
* **Show language selector** — turns on the language selector.
* **Font size** — the text size of the selectors.

Set up your markets and languages in **Shopify admin → Markets**.

***

## Divider

A thin vertical line for separating blocks within a column — for example, to set the Localization selectors apart from the Cart and Account icons. Place it between two blocks and give it the same **Position** as them.

* **Full height** — stretches the line to the full height of the row. Turn it off to set a fixed line **Height** instead.
* **Type** (under **Color**) — **Inherit** matches the line to the header's color scheme, or **Custom** lets you pick your own **Border** color and opacity.