Header

Overview

The Header section is the main navigation and utility area of your storefront. It can display your store logo, primary navigation menu, search access, customer account access, and a cart icon. The header also supports configurable layout width, color scheme, sticky behavior, and spacing (padding). Optional Mega menu blocks can enhance specific top-level menu items with richer dropdown content.

Section Configuration:

Account & cart

Setting	Description
Show customer login	Displays a customer account/login link in the header.
Show cart	Displays the cart icon in the header.

Site logo

Setting	Description
Logo	Uploads and displays your store’s logo image in the header.
Logo desktop width	Sets the maximum logo width on desktop devices.
Logo mobile width	Sets the maximum logo width on mobile devices.

Setting	Description
Menu	Selects the navigation menu used for the header’s primary links.
Menu weight	Sets the font weight (thickness) used for the menu text.

Search

Setting	Description
Enable search	Shows or hides the search icon in the header.
Predictive suggestions	Enables predictive search suggestions while customers type.
Search heading	Sets the heading text shown within the search interface.
Heading size	Controls the size/style of the search heading text.
Heading weight	Controls the font weight (thickness) of the search heading text.
Heading case	Controls capitalization styling for the search heading (for example, uppercase or lowercase).
Preset products	Selects up to 4 products to feature within the search experience.

Layout

Setting	Description
Container layout	Controls the header’s width behavior (for example, contained vs full-width styles depending on the option selected).
Container size	Sets the maximum desktop container width as a percentage.
Color scheme	Applies a color palette to the header section.
Sticky header	Controls how the header sticks during scrolling (none, show on scroll up, or stacked).

Inner padding

Setting	Description
Top padding (desktop)	Adds space inside the header at the top on desktop.
Bottom padding (desktop)	Adds space inside the header at the bottom on desktop.
Left padding (desktop)	Adds space inside the header on the left on desktop.
Right padding (desktop)	Adds space inside the header on the right on desktop.
Top padding (mobile)	Adds space inside the header at the top on mobile.
Bottom padding (mobile)	Adds space inside the header at the bottom on mobile.
Left padding (mobile)	Adds space inside the header on the left on mobile.
Right padding (mobile)	Adds space inside the header on the right on mobile.

Outer padding

Setting	Description
Top padding (desktop)	Adds space outside the header at the top on desktop.
Bottom padding (desktop)	Adds space outside the header at the bottom on desktop.
Left padding (desktop)	Adds space outside the header on the left on desktop.
Right padding (desktop)	Adds space outside the header on the right on desktop.
Top padding (mobile)	Adds space outside the header at the top on mobile.
Bottom padding (mobile)	Adds space outside the header at the bottom on mobile.
Left padding (mobile)	Adds space outside the header on the left on mobile.
Right padding (mobile)	Adds space outside the header on the right on mobile.

Blocks Configuration:

Enhances a specific top-level menu item with a dropdown that can include a banner.

Block setting	Description
Menu item index	Connects this mega menu to a specific top-level menu item by its position in the header menu (starting at 1).
Image	Optional banner image displayed inside the mega menu dropdown.
Banner link	Optional link applied to the banner image.
Open link in new tab	Opens the banner link in a new browser tab when enabled.

Adds a grid-style mega menu layout for a specific top-level menu item.

Block setting	Description
Menu item index	Connects this mega menu to a specific top-level menu item by its position in the header menu (starting at 1).