Skip to content
Header
Section overview
The theme header section is responsible for rendering the site header, including the logo, navigation, cart, and other interactive elements that appear at the top of every page.
Common use cases
- Primary navigation for the entire store
- Displaying brand identity through logo and color scheme
- Providing quick access to cart, search, and account functionality
- Supporting dropdown menus with additional content blocks
Usage tips
- Choose the appropriate layout (left or center aligned) based on your brand's aesthetic
- Configure color schemes that complement your site's design, especially when using transparent headers over banners
- Test dropdown navigation on mobile to ensure it's easily accessible
- Consider using both default and overlay logos to improve visibility when the header overlaps with image banners
Section settings
| Setting | Description |
|---|---|
| Logo default | The primary logo image displayed in the header |
| Logo overlay | Alternative logo displayed when the header overlaps with a banner |
| Desktop logo height | Height of the logo in pixels on desktop devices |
| Mobile logo height | Height of the logo in pixels on mobile devices |
| Desktop layout | Alignment of header elements (left or center) |
| Default color scheme | Color scheme applied to the header in its default state |
| Overlay color scheme | Color scheme applied when the header overlaps with a banner |
| Default color border | Border color in the header's default state |
| Overlay color border | Border color when the header overlaps with a banner |
| Cart button | Display options for the cart button (none, icon and text, icon, or text) |
| Search button | Display options for the search button (none, icon and text, icon, or text) |
| Login button | Display options for the login button (none, icon and text, icon, or text) |
| Menu button | Display options for the menu button (none, icon and text, icon, or text) |
| Text capitalization | Text case style for header elements (standard, uppercase, or lowercase) |
| Font family | Font choice for header text (standard, heading, or navigation) |
| Link as button | Determines if parent links with dropdown menus behave as buttons |
| Show localization | Option to display language/currency selector |
| Enable margin | Adds horizontal margin to the header container |
| Dropdown color scheme | Color scheme for dropdown navigation menus |
| Dropdown color border | Border color for dropdown navigation menus |
| Visibility | Controls whether the header is visible on all devices, mobile only, or desktop only |
Block settings
Button
This block adds a featured call-to-action button to the header, helping highlight important pages or promotions.
Block limit: 1
| Setting | Description |
|---|---|
| Button label | Text displayed on the button |
| Button url | The destination page when the button is clicked |
| Color button | Style and color scheme applied to the button |
Content
This block creates rich content areas within dropdown navigation menus, allowing for promotional content, images, or videos.
Block limit: 10
| Setting | Description |
|---|---|
| Linked menu | Menu handle to associate this content with a specific dropdown |
| Heading | Title text displayed at the top of the content block |
| Content | Rich text content for the block |
| Button label | Text displayed on the call-to-action button |
| Url | Destination page when the button is clicked |
| Image | Optional image to display in the content block |
| Show image as background | Option to use the image as a background instead of inline |
| Video | Optional video to display in the content block |
| Enable autoplay | Automatically plays the video when visible |
| Enable mute toggle | Shows a button to toggle video sound |
| Enable loop | Continuously loops the video playback |
| Minimum height | Minimum height of the content block in pixels |
| Enable padding | Adds internal padding to the content block |
| Color scheme | Color scheme applied to the content block |
| Color border | Border style for the content block |
| Color button | Style and color scheme for the button |
| Enable gradient | Applies a gradient effect to the background |
| Text position | Places text either above or below the media content |
| Y alignment | Vertical alignment of content (top, middle, or bottom) |
| X alignment | Horizontal alignment of content (left, center, justify, or right) |