The Header is the bar at the top of your store with your logo, menu, search, cart, and country selector. This article explains every header setting and its five blocks.
Where to find it
Open the builder and click the header in the preview, or pick Header in the Sections tab. To add one, click Add new section and pick Header in the Layout group. You can have one header per page, on any page. Each page keeps its own copy, so use Apply to all pages after you finish, see Sections and blocks.
The header always has the same five blocks: Logo, Menu, Search, Cart, and Localization. You cannot add, remove, or reorder them. You place them with their own Position and Row settings.
Header settings
- Sticky header: On scroll up hides the header when shoppers scroll down and brings it back when they scroll up. Always keeps it at the top. Sticky with reduced logo keeps it at the top and makes it smaller (less padding, smaller logo) once shoppers scroll. Never lets it scroll away with the page.
- Width: Page keeps the content in your page width, Full stretches it edge to edge.
- Color scheme: the header background, text, and link colors.
- Transparent header: removes the header background so the hero image shows through. See below.
- Padding (top, left, right, bottom) and the Custom CSS tab.
Transparent header
This only works when a Hero is the first visible section right below the header, because the header borrows the hero's color scheme for its text and icons. It drops its background, border, and shadow, and lightly blurs what is behind it. When shoppers scroll past the hero, the header gets its own colors back. The search panel and the country list keep the header's own colors. Hero settings are in Hero section.
Logo
- Logo: pick your logo image. With no image, your store name shows as text.
- Position: Left, Center, or Right. Width and Height: the logo box size in pixels.
- Desktop padding: space around the logo on computers only.
The logo opens your home page when clicked. To stop that, turn on Prevent clicking the logo to go home, see Prohibitions settings.
Menu
Pick one of your menus in Menu. The other settings appear once a menu is picked. Menus are created in How do I create navigation menus and add them to my header and footer?.
- Type: Mega (large panels with columns), Dropdown (simple lists), or Drawer (a side panel opened by a menu button).
- Position and Row: where the menu sits. Top is the main row with the logo, Bottom adds a second row below it. Not shown for Drawer.
- Color scheme: the colors of the open menu panel.
- Mobile layout: on phones and tablets the menu moves into a drawer. Turn on Navigation bar to show it as a bar under the header instead, with its own Navigation bar color scheme. Not shown for Drawer.
Search, cart, and localization
- Search: a search icon that opens a search field. Set Position (Left or Right) and Row.
- Cart: the cart icon with an item count. Cart type is Drawer (side panel), Dropdown (mini cart under the icon), or Page (opens the cart page). Color scheme styles the drawer or dropdown. Drawer and Dropdown also have a Free shipping bar switch, see How does the free shipping bar work?.
- Localization: a button that lists your markets so shoppers can switch country. Turn on Country selector to show it. Show flags shows the current country's flag on the button, otherwise a globe icon. Set Position and Row.
Good to know
- Transparent header does nothing: check that the Hero sits directly under the header. An announcement bar or another section in between stops it.
- Country selector does not show: it needs at least two markets, see How do I set up markets to sell in several countries?.
- Menu items missing: edit the menu itself, not the header.