Header
Sticky header with a cart badge, search overlay, multi-level menus, and a localization form. Built from Logo, Icons, Menu, Country and language, and Menu promotion blocks.
- Merchant-addable
- Yes
- Settings
- 47
- Block types
- 5
- File
sections/header.liquid
Screenshots pending
Captures for Header at desktop and mobile widths are generated from a live store by
npm run shots. They appear here automatically once that has run.
When to use it
Every page. It lives in the header section group and cannot be removed.
Setting it up
- Edit it from any template — changes apply store-wide.
- Add the Logo block and upload your logo. It survives varying aspect ratios.
- Add a Menu block and point it at your main menu, created under Content → Menus in Shopify admin.
- Add Icons for search, account, and cart.
- Add Country and language if you sell in more than one market.
- Add a Menu promotion block if you want featured content inside a dropdown.
Where the content comes from
Shopify menus, cart, and localization. Blocks own the arrangement.
Notes and cautions
- Menus are built in Shopify admin, not here. The block only chooses which menu renders.
- Dropdowns open on Enter and Space, move through with Tab, and close on Escape returning focus to the launcher.
Section settings
Every setting on the section itself, in the order it appears in the theme editor. Group headings match the editor's own grouping.
Studio bar uses a two-level editorial structure. Split dock appears only above a full-bleed hero or Product stage; every other page uses the solid Fine outline Studio header.
Navigation rail shows the main menu below the brand. Menu drawer keeps the Studio bar to one row.
Choose how the full menu opens from the header.
Choose how the full menu opens from the header.
Controls Studio bar depth and boundaries. Corners follow Theme settings → Layout → Corner style.
Use a short phrase that complements the logo. Leave blank to hide it.
Applies the Studio bar soft-shadow treatment to the Split dock surfaces.
Choose the Secondary menu in the Menu block to populate this rail. Leave that menu blank to keep the rail hidden.
Uses the same Secondary menu and maximum link count as the desktop routine rail.
Also limits secondary menu links in mobile navigation.
Solid uses your color scheme. Transparent overlays the first home-page hero. Split dock retains readable floating surfaces over the hero. Every other page stays solid.
Softly blurs the page behind the menu, dropdowns, search, and country selector while they are open.
Blocks
Blocks are added, reordered, duplicated, and removed inside the section. Each type has its own settings.
Logo logo_block max 1
Set the logo image and width in Theme settings → Logo. This block controls the shop-name text shown when no logo is set.
Icons icons_block max 1
Icon style
Applies to all header icons. They follow your color scheme.
Country and language currency_selector max 1
Follows your color scheme.
What shows in the country selector. Currency follows the selected country.