Header and footer
Header
Logo, navigation, utility icons, sticky header and transparent header.
On this page
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
- Menu promotion
Settings
| Setting | Values | What it does |
|---|---|---|
| Menu | MenuDefault: Menu “main-menu” | — |
| Logo | Image | Falls back to the shop name when empty. |
| Logo positionFR: Position du logo |
| — |
| Logo widthFR: Largeur du logo | From 40 to 320px, in steps of 5Default: 120px | — |
| Logo width on mobileFR: Largeur du logo sur mobile | From 0 to 320px, in steps of 5Default: 0px | Set to 0 to use the desktop logo width |
| Desktop navigationFR: Navigation sur ordinateur |
| Inline keeps the menu in the header bar. Drawer moves it to a side panel on every screen, opened from the menu icon. |
| Open menus onFR: Ouvrir les menus au |
| Hover opens a menu as soon as the pointer settles on it. Touch screens always use a tap.Shown when “Desktop navigation” is “Inline”. |
| Utilities | ||
| Show search linkFR: Afficher le lien de recherche | CheckboxDefault: On | — |
| Customer account menuFR: Menu du compte client | MenuDefault: Menu “customer-account-main-menu” | — |
| Localization | ||
| Show country/region selectorFR: Afficher le sélecteur de pays/région | CheckboxDefault: On | — |
| Show language selectorFR: Afficher le sélecteur de langue | CheckboxDefault: On | — |
| Style | ||
| Sticky headerFR: En-tête fixe |
| — |
| Header paddingFR: Marge intérieure de l’en-tête | From 6 to 20px, in steps of 2Default: 20px | — |
| Header padding on mobileFR: Marge intérieure de l’en-tête sur mobile | From 6 to 20px, in steps of 2Default: 12px | — |
| Show bottom borderFR: Afficher la bordure inférieure | CheckboxDefault: On | — |
| Color schemeFR: Palette de couleurs | Color schemeDefault: Scheme 1 | — |
| Transparent header | ||
| Transparent on the home pageFR: Transparent sur la page d’accueil | CheckboxDefault: Off | — |
| Also transparent on these templatesFR: Également transparent sur ces modèles | Text | Comma-separated templates, for example page.lookbook, collection.editorial |
| Transparent color schemeFR: Palette de couleurs transparente | Color schemeDefault: Scheme 1 | — |
| Logo for the transparent stateFR: Logo pour l’état transparent | Image | — |
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 centre (default) | Navigation on the left, logo in the center, icons on the right |
| Top centre | Logo centered on a first row, navigation centered on a second row. The logo is automatically enlarged by 35% on desktop. |
Navigation
- Desktop navigation > Inline: the menu items sit in the header bar. Submenus open on hover or click, depending on Open menus on. On touch screens, it's always a tap.
- 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.
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. |
| Always visible | The header stays at the top of the screen at all times. |
Transparent header
The header can sit on top of the hero, so the photograph starts at the very top of the screen.
Turn it on
Choose the pages
Check Transparent on the home page, and/or enter other templates in Also transparent on these templates, separated by commas. Examples: product (every product page), page.lookbook (an alternate page template), collection.editorial.
Start the page with a hero
The header only becomes transparent if the first section of the page is a hero with at least one slide.
Adjust the appearance
Choose a Transparent color scheme (its foreground colors the text and icons) and, if your logo doesn't read well over a photo, a Logo for the transparent state (for example, a light version).
Readability
To keep text readable over any photograph, the transparent header always paints a light gradient veil behind itself, 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 turns opaque again, with its usual scheme, as soon as the shopper scrolls the page, hovers over it, moves keyboard focus into it or opens a menu.
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.
Maison 1.0.0