Skip to content
Header
Section overview
The header section controls the site navigation, logo, search functionality, and cart display across both mobile and desktop views.
Common use cases
- Main site navigation with dropdown menu capabilities
- Brand identity representation with customizable logo
- Access points for search, account, and cart functionality
Usage tips
- Keep navigation labels concise for better mobile display
- Use appropriate icon or text buttons based on your brand style
- Consider dropdown content carefully to avoid overwhelming users
- Test header layout in both desktop and mobile views to ensure optimal display
Section settings
| Setting | Description |
|---|---|
| Dropdown menu | Select the menu to display in the header navigation |
| Search recommendations | Select a menu for search recommendations |
| Logo | Upload your store logo |
| Desktop logo height | Set the height of your logo on desktop (in pixels) |
| Mobile logo height | Set the height of your logo on mobile (in pixels) |
| Color scheme | Select the color scheme for the header bar |
| Color border | Choose the border style for the header |
| Bar layout desktop | Select how the header elements are arranged on desktop |
| Cart button | Choose whether to display cart as icon or text |
| Search button | Choose whether to display search as icon or text |
| Login button | Choose whether to display login as icon, text, or hide it |
| Menu button | Choose whether to display menu as icon or text (mobile only) |
| Show search button | Enable or disable search functionality |
| Show search icon mobile | Choose to show search icon on mobile |
| Enable click dropdown | Enable dropdown menus to open on click instead of hover |
| Dropdown color scheme | Select the color scheme for dropdown menus |
| Dropdown color border | Choose the border style for dropdown menus |
| Search color scheme | Select the color scheme for the search overlay |
| Search color border | Choose the border style for the search overlay |
| Visibility | Control which devices display this section |
Block settings
Content
This block allows you to add promotional content within dropdown menus to enhance navigation with images and text.
Block limit: 10
| Setting | Description |
|---|---|
| Header menu | Enter the menu handle this content should appear under |
| URL | Set a link for the entire block |
| Heading | Add a title for this content block |
| Content | Add text content using rich text editor |
| Image | Upload an image (recommended width: 400px) |