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)