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)