Skip to content
Header
Section overview
The theme header section renders the site header with navigation, logo, search, and action buttons like cart and account login. It provides a fully responsive experience with separate layouts for desktop and mobile views.
Common use cases
- Main site navigation with dropdown menus
- Store branding with customizable logo
- Quick access to cart, account, and search functionality
- Feature promotional content within dropdown menus
Usage tips
- Keep menu items concise to prevent overcrowding on mobile devices
- Use consistent button styles (icon, text, or both) for a unified look
- Consider logo size carefully for both desktop and mobile views
- Test dropdown menus with various content types to ensure proper layout
Section settings
| Setting | Description |
|---|---|
| Dropdown menu | The menu to use for navigation items with dropdown functionality |
| Logo | The primary logo image displayed in the header |
| Desktop logo height | Height of the logo on desktop devices (in pixels) |
| Mobile logo height | Height of the logo on mobile devices (in pixels) |
| Enable logo on desktop | Option to show or hide the logo on desktop views |
| Default color scheme | The background and text color scheme for the header |
| Default color border | The border color style for the header |
| Search input | Controls when the search input is displayed (always, desktop only, mobile only, or never) |
| Cart button | Display style for the cart button (none, icon and text, icon only, or text only) |
| Login button | Display style for the login button (none, icon and text, icon only, or text only) |
| Menu button desktop | Display style for the menu button on desktop (none, icon and text, icon only, or text only) |
| Menu button mobile | Display style for the menu button on mobile (none, icon and text, icon only, or text only) |
| Text capitalization | Text style for capitalization (standard, uppercase, or lowercase) |
| Font family | Font style to use in the header (standard, heading, or navigation) |
| Link as button | Option to make dropdown links function as buttons instead of normal links |
| Enable margin | Option to apply horizontal margin to the header |
| Color scheme | Background and text color scheme for dropdown menus |
| Color border | Border color style for dropdown menus |
| Visibility | Controls when the header is displayed (all devices, mobile only, or desktop only) |
Block settings
Button
This block adds a featured button to the header's right side, useful for highlighting important promotions or actions.
Limit: 1 button per header
| Setting | Description |
|---|---|
| Button label | Text displayed on the button |
| Button URL | The page the button links to when clicked |
| Color button | Style and color scheme for the button |
Content
This block adds rich content to dropdown menus, allowing for enhanced navigation with images, videos, and promotional content.
Limit: 10 content blocks per header
| Setting | Description |
|---|---|
| Linked menu | The menu handle this content should appear in |
| Heading | Title text for the content block |
| Content | Rich text content for the block |
| Button label | Text for the optional button |
| URL | The link destination for the block or button |
| Image | Primary image to display in the content block |
| Image background | Background image for the content block |
| Video | Video file to display in the content block |
| Enable video autoplay | Option to automatically play the video |
| Enable mute button | Option to show a mute toggle for the video |
| Enable video loop | Option to loop the video playback |
| Minimum height | Sets the minimum height for the content block (in pixels) |
| Enable padding | Option to add padding to the content |
| Color scheme | Background and text color scheme for the content block |
| Color text | Text color treatment (default, force light, or force dark) |
| Color border | Border styling for the content block |
| Color button | Style and color for the content block button |
| Enable gradient | Option to add a gradient effect to the background |
| Y alignment | Vertical alignment of content (top, middle, or bottom) |
| X alignment | Horizontal alignment of content (left, center, justify, or right) |
| Text position | Placement of text relative to media (above or below) |