> 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" %}
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" %}
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" %}
Shows the icon and a text label together. Set the label text and its font, size, and letter spacing.
{% endtab %}
{% tab title="Search bar" %}
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" %}
Shows the cart icon only.
{% endtab %}
{% tab title="Text" %}
Shows a text label instead of an icon. Set the label text and its font, size, and letter spacing.
**Cart count style** sets how the item count appears beside the label:
* **Text** — the count sits in brackets after the label.
* **Badge** — the count sits in a small badge that is grey while the cart is empty and turns solid once something is added.
{% endtab %}
{% tab title="Icon with text" %}
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" %}
Shows the account icon only.
{% endtab %}
{% tab title="Text" %}
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" %}
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.
***
{% hint style="info" icon="headset" %}
**Need help?**
Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.
Chat with us Submit a ticket
{% endhint %}