Header

The header is a quiet frame: the navigation, the search, account and cart icons, and the logo, the only large element. It's part of the Header group and appears on every page except the password page.

Name in the editor

Header (FR: En-tête)

Where to add it

Header group (all pages)

Instances

1 per page at most

Accepted blocks

Utility linkMenu promotion

Settings

Logo

If no logo is selected, the store name appears as text, in the heading font. The logo accepts any proportions (horizontal, square, vertical): set its width with Logo width, and on phones with Logo width on mobile (0 uses the desktop width).

Logo position offers three desktop layouts:

Position	Layout
Middle left	Logo, then navigation, then icons
Middle center (default)	Navigation on the left, logo in the center, icons on the right
Top center	Logo centered on a first row, navigation centered on a second row. The logo keeps the width set in Logo width.

Navigation

• Desktop navigation > Inline: the menu items sit in the header bar. Submenus open on hover or click, depending on Open dropdowns on. On touch screens, it's always a tap. Whichever you choose, an open submenu closes as soon as keyboard focus moves on to another item or out of the header.
• Desktop navigation > Drawer: the menu is tucked into a side panel on every screen, opened from the menu icon.

Below 990px wide, the menu is always in the drawer.

To build menus, submenus and the mega menu, see Menus and mega menu.

Utility icons

• Search: shown if Show search link is checked. It opens the search panel or page, depending on Theme settings > Search.
• Account: shown if customer accounts are turned on in SettingsCustomer accounts. It uses Shopify's sign-in component, which shows an account menu; the menu selected in Customer account menu is offered there.
• Cart: shows the number of items. It opens the cart drawer or the cart page, depending on Theme settings > Cart.

Utilities chooses how they're shown on desktop: Icons, or Words, which spell out search, account, and the cart with its count. Phones always show icons.

To add a link of your own, such as "Book an appointment", add a Utility link block to the Header section and fill in Link label and Link: it's shown as words beside the icons on desktop, and at the foot of the menu drawer on phones. A block missing either field shows nothing.

Country and language selectors

The selectors only appear if your store offers several countries (in SettingsMarkets) or several published languages (in SettingsLanguages). Otherwise nothing shows, even with the boxes checked.

On desktop, the selector sits in the header and shows, for example, US · USD · English. Below 990px, it's at the bottom of the menu drawer. See Languages and currencies.

Sticky header

Setting	Behavior
Not sticky	The header scrolls with the page.
Show on scroll up (default)	The header hides when the shopper scrolls down and comes back as soon as they scroll up. It stays visible while a menu is open or keyboard focus is inside it. A link to a place on the same page brings it back before the page moves, so the place lands just below it.
Always visible	The header stays at the top of the screen at all times.

Header padding sets the space above and below the header's content on desktop, and Header padding on mobile on phones. Show bottom border draws a rule under the header.

Transparent header

The header can sit on top of the hero, so the photograph starts at the very top of the screen. The header that ships with the theme has it turned on, so a home page that opens with a hero starts with a transparent header.

Turn it on

Readability

To keep text readable over any photograph, the hero paints a light gradient veil across the top of the photograph, behind the transparent header, mixed from the transparent scheme's background. This veil isn't adjustable. A dark transparent scheme (like scheme 3) gives a dark veil and light text.

The header is transparent only in its place at the top of the page. Once the shopper scrolls, it depends on Sticky header:

• Show on scroll up: the header scrolls away with the photograph, then comes back opaque, with its usual scheme, when the shopper scrolls up. It turns transparent again when the page is back at the top.
• Always visible: the header turns opaque as soon as the page scrolls, and transparent again back at the top.
• Not sticky: the header stays transparent and scrolls away with the photograph.

It also turns opaque while a menu is open. Hovering over it or moving keyboard focus into it doesn't change it.

Accessibility

On the home page, the logo serves as the page's main heading (h1). A "Skip to content" link lets keyboard users jump straight to the content.