Header
Where you can add it
Not in the Add section list: it comes with its template or section group.
Blocks
Section titled “Blocks”- Mega menu
- Menu drawer — part of this section; fixed: always present, can’t be removed or moved
Menu drawer
| Setting | Type | Default | Options and range |
|---|---|---|---|
| Color scheme Shown when the section’s Mobile menu style is Drawer. | Color scheme | Scheme 1 | |
| Color scheme Shown when the section’s Mobile menu style is Full screen. | Color scheme | Scheme 3 | |
| Page overlay opacity Shown when the section’s Mobile menu style is Drawer. | Range | 30 % | 0–60 %, step 5 |
| Opening motion How the drawer and its contents come in. Turning motion off in Theme settings, or a visitor’s reduced-motion preference, always shows it without motion. | Select | Full | |
| Navigation | |||
| Show search | Checkbox | On | |
| Show thumbnails Shows each link’s image in the second and third levels: a collection’s or product’s image, or a blog’s newest article image. Shown when the section’s Mobile menu style is Drawer. | Checkbox | On | |
| Show image cards Menu links without links of their own become image cards, using the link’s own image: a collection’s or product’s image, or a blog’s newest article image. Shown when the section’s Mobile menu style is Full screen. | Checkbox | On | |
| Links marked “New” Menu link titles that get a New label, separated by commas. Example: New in, Knitwear | Text | — | |
| Featured card | |||
| Show featured card Shown when the section’s Mobile menu style is Drawer. | Checkbox | On | |
| Image Shown when the section’s Mobile menu style is Drawer and Show featured card is on. | Image | — | |
| Eyebrow Shown when the section’s Mobile menu style is Drawer and Show featured card is on. | Text | — | |
| Heading Shown when the section’s Mobile menu style is Drawer and Show featured card is on. | Text | — | |
| Button label Shown when the section’s Mobile menu style is Drawer and Show featured card is on. | Text | Shop now | |
| Link Shown when the section’s Mobile menu style is Drawer and Show featured card is on. | Link | — | |
| Text on glass Auto picks dark or light text for each glass element from the brightness of the photo behind it. Shown when the section’s Mobile menu style is Drawer and Show featured card is on and Button label is set. | Select | Auto | |
| Localization | |||
| Enable country/region selector | Checkbox | On | |
| Enable language selector | Checkbox | On | |
Settings
Section titled “Settings”| Setting | Type | Default | Options and range |
|---|---|---|---|
| Layout | |||
| Color scheme | Color scheme | Scheme 1 | |
| Layout on desktop | Select | Logo first, menu beside it | |
| Layout on mobile | Select | Logo centered, menu beside it | |
| Make the header full width | Checkbox | Off | |
| Show a bottom border Shown when Layout on desktop is not Floating capsule. | Checkbox | On | |
| Header height | Range | 20 px | 8–48 px, step 2 |
| Sticky header Keeps the header on screen as customers scroll. | Select | Show when scrolling up | |
| Transparent header The header sits over the first section until the customer scrolls, then it turns solid. Pair it with a section that starts with an image, and set the colors below. | Select | Off | |
| Color scheme while transparent Only the text and icon colors are used. The background stays transparent, so pick a scheme that stays readable over your first section’s image. Shown when Transparent header is not Off. | Color scheme | Scheme 1 | |
| Color scheme while transparent on other pages Used on every page except the home page, over the page’s own background. A collection banner set to Image behind uses the scheme above. Shown when Transparent header is All pages. | Color scheme | Scheme 1 | |
| Shade behind the transparent header A soft fade in the color scheme’s background color, so the menu stays readable over a busy image. Set it to 0% to remove it. Shown when Transparent header is not Off and Layout on desktop is not Floating capsule. | Range | 25 % | 0–60 %, step 5 |
| Logo | |||
| Set the logo and its width in Theme settings > Logo. | |||
| Navigation | |||
| Menu | Menu | main-menu | |
| Menu text size Sizes the menu in the header bar. The mobile menu keeps its own size. | Range | 15 px | 12–20 px, step 0.5 |
| Show menu in uppercase | Checkbox | Off | |
| Menu link effect Applies to the top-level menu links. Customers who prefer reduced motion see no movement. | Select | Underline | |
| Open submenus on With click, the first press opens the submenu and the second follows the link. | Select | Hover | |
| Mobile menu style Drawer slides in from the side over the page. Full screen grows the header into a full-screen sheet: parent links become tabs, the other links image cards. | Select | Drawer | |
| Mobile menu position End is the side the cart icon is on: right in left-to-right languages, left in right-to-left languages. Shown when Mobile menu style is Drawer. | Select | Start | |
| Actions | |||
| Show search link | Checkbox | On | |
| Show account link | Checkbox | On | |
| Customer account menu Shown when Show account link is on. | Menu | customer-account-main-menu | |
| Show cart link | Checkbox | On | |
| Cart icon Shown when Show cart link is on. | Select | Bag | |
| Show item count on the cart Shown when Show cart link is on. | Checkbox | On | |
| Localization | |||
| Enable language selector To add a language, go to your language settings. | Checkbox | On | |
| Enable country/region selector To add a country/region, go to your market settings. | Checkbox | On | |
| Language selector style A toggle shows every language as a button and suits stores with two or three languages. Shown when Enable language selector is on. | Select | Dropdown | |
| Show flag Flags are drawn with emoji. Devices without flag emoji, such as Windows, show the country code instead, so the country name is always shown beside it. Shown when Enable country/region selector is on. | Checkbox | On | |