Header

The header carries your logo, your menu, the search, the account and cart links, and the language, country and dark mode switches. It comes in three layouts and adapts to any screen.

In the editor

Header

Where it goes

The Header group, on every page

In the presets

Index: Header group; Poster: Header group; Petal: Header group

Settings

40

Blocks

link, dropdown

App blocks

No

The header lives in the Header group and appears on every page. For a walk-through of menus, dropdowns and the shop panel, see the Header and footer guide.

Choose a layout

On phones, the centered and split layouts put the logo in the middle of the row, between the menu button and the cart.

Logo

The header uses the logo from Theme settings › Logo and favicon unless you upload a different one here – useful when the header needs a horizontal version of your logo. Set its width for desktop and mobile separately. Show store name next to the logo adds your store name beside a logo mark, in the text logo size.

Transparent header

Transparent header lays the header over a full-width Image banner, Slideshow or Video at the top of the page – on the home page only, or on every page, with light or dark text. It turns solid the moment it is needed: on hover, when a menu opens and as soon as the page scrolls. Upload a Logo on the transparent header (a white version, for example) so the logo stays legible over the photo.

Sticky header

• Always: the header stays at the top of the screen.
• On scroll up: it slides away while shoppers scroll down to read and returns as soon as they scroll up – the most room for content.
• None: the header scrolls away with the page.

Menu

Pick the menu from Online Store › Navigation in Menu. Index reads its structure:

• Links with one level of sub-links open a compact dropdown.
• Links with two levels open the full-width shop panel – one column per second-level link, with its own links below. Open every dropdown as the full-width panel uses the panel for every dropdown.
• Images in full-width panels puts the image of each column's collection, product or blog post above it.
• Show product counts next to collection links adds a quiet count after each collection.
• Show a shop all link in the panel closes the panel with a Shop all link to the top-level page.
• Space between links sets the gap between the top-level links.

Build menus with images and promo cards right in the editor with Dropdown blocks, and add single links or buttons with Link blocks.

Mobile menu

Switch to the mobile menu below decides the screen width under which the menu links fold into a menu button and a drawer: 640, 768, 990, 1024, 1280 or 1536 px, or a custom width. Pick a larger width when your menu has many links, so it never wraps onto two lines. The same width is what Hide on mobile and Hide on desktop mean in every section.

The drawer shows the menu with its sub-levels, the account link, the dark mode switch and the language and country selectors. Its colors come from Menu and search color scheme.

Search

• Search on desktop: a Search bar in the header, or an Icon that opens the search.
• Search bar width and Search results width: the results panel can be wider than the bar and always stays on screen.
• Show the / key hint: a small / in the bar, reminding shoppers that the key opens the search from anywhere.
• Show search bar below the header on mobile: gives search its own row on phones.
• Backdrop while searching: dims and/or blurs the page behind the open search, with your choice of darkness and blur.
• Type popular searches in the placeholder: the empty field types your popular searches, one after another, as a gentle prompt.

Suggestions, popular searches and the products shown before typing are set in Theme settings › Search.

Account, cart and switches

• Style: show the account and cart as words (Account, Cart 2) or as icons.
• Show account and log in link: hide it if you do not use customer accounts.
• Show light and dark mode switch: the sun and moon button. Turn dark mode on in Theme settings › Colors.
• Show selectors next to the cart: language and country selectors, shown once the store has more than one language or country.
• Language: shown as a name, a code, or hidden, with or without a flag. Show country and currency adds the market selector.

All settings

Every setting in the order of the theme editor, with its options and its default value.

Block settings

link block – no settings, place it where you want it.

dropdown block – no settings, place it where you want it.

Related