# 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)              |