Header

Overview:

The Header section is used to provide the main navigation and storefront controls at the top of the website. It supports logo configuration, navigation menus, account access, search, predictive search, cart access, optional sale navigation, multiple header layout styles, sticky behavior, responsive spacing, container layouts, borders, and color schemes. The section is enabled within the Header group.

Section Configuration

Logo Settings:

Setting Description
Logo Allows adding the main storefront logo.
Hide Logo Hides the logo when enabled. This option is available for View 1 layout only.
Logo Position Controls the logo position as Center or Left. This option is available for View 1 layout only.
Desktop Logo Width Controls the logo width on desktop devices. Default: 120px.
Mobile Logo Width Controls the logo width on mobile devices. Default: 120px.

The desktop logo width can be configured from 100px to 300px, while the mobile logo width can be configured from 80px to 200px.

Drawer Logo:

These settings control the logo displayed inside the navigation drawer.

Setting Description
Drawer Logo Allows adding a separate logo for the drawer.
Drawer Desktop Logo Width Controls the drawer logo width on desktop devices. Default: 120px.
Drawer Mobile Logo Width Controls the drawer logo width on mobile devices. Default: 120px.

The desktop drawer logo width can be configured from 100px to 300px, while the mobile drawer logo width can be configured from 80px to 200px.

Setting Description
Menu Selects the navigation menu displayed in the Header. The default menu is Main Menu.
Menu Weight Controls the font thickness of menu links from Thin (100) to Black (900).
Menu Case Controls the text case of menu links, including Default, Uppercase, Capitalize, or Lowercase.
Menu Font Family Allows switching between the Default and Heading font family.
Show Menu Separator Displays separators between menu items when enabled. This option is available for View 1 layout only.
Menu Dropdown Color Scheme Applies a predefined color scheme to the menu dropdown.

The default menu font weight is 400 (Normal) and the default menu case is Uppercase. Menu separators are enabled by default.

Account Settings:

Setting Description
Show Account Displays or hides the account option in the Header.
Desktop Account Label Defines the text label displayed for the account option on desktop. Default: Account.

The Account option is enabled by default. The desktop label is available for View 1 layout only.

Search Settings:

Setting Description
Enable Search Enables or disables the search functionality in the Header.
Desktop Search Label Defines the text label displayed for search on desktop. Default: Search.
Enable Predictive Search Enables or disables predictive search functionality.
Predictive Search Collections Allows selecting collections to be used within predictive search.
Predictive Search Heading Defines the heading displayed in the predictive search area. Default: Products.

Search and predictive search are enabled by default.

Predictive Search Configuration

Predictive Search Heading:

Setting Description
Heading Defines the heading text displayed in the predictive search area.
Heading Size Controls the heading size from H1–H6 or predefined Large, Medium, and Small text sizes.
Heading Weight Controls the heading font weight from Thin (100) to Black (900).
Heading Case Controls the heading text case, including Default, Uppercase, Capitalize, or Lowercase.
Heading Font Family Allows switching between the Default and Body font family.

The default predictive search heading is Products, with H4 size, 700 (Bold) weight, Default case, and Default font family.

Predictive Search Tabs:

Setting Description
Tab Text Size Controls the size of text displayed within predictive search tabs.
Tab Text Weight Controls the font thickness of predictive search tab text from Thin (100) to Black (900).
Tab Font Family Allows switching between the Default and Heading font family.
Tab Text Case Controls the text transformation style of predictive search tabs.

The default tab text size is Medium, weight is 400 (Normal), font family is Default, and text case is Uppercase.

Cart Settings:

Setting Description
Show Cart Displays or hides the cart option in the Header.
Desktop Cart Label Defines the text label displayed for the cart on desktop. Default: Bag.

The cart option is enabled by default. The desktop cart label is available for View 1 layout only.

Sale Settings:

The Sale settings are available only when View 2 is selected.

Setting Description
Show Sale Displays or hides the Sale option in the Header.
Sale Icon Allows adding an icon for the Sale option.
Sale Label Defines the text displayed for the Sale option. Default: Sale.
Sale Text Case Controls the text case of the Sale label.
Sale URL Defines the destination URL for the Sale option.
Open in New Tab Opens the Sale link in a new browser tab when enabled.

The Sale option is enabled by default, with Capitalize as the default text case.

Layout:

Setting Description
Layout Style Provides two Header layout styles: View 1 and View 2.
Sticky Header Controls the Header sticky behavior using None, On Scroll Up, or On Scroll.
Container Layout Determines whether the Header uses Page Width, Contained Content, or Container Fluid layout.
Border Style Controls whether the Header has No Border, Top Border, Bottom Border, or Top & Bottom Border.
Container Size Controls the maximum desktop container width from 50% to 100%.
Color Scheme Applies a predefined color scheme to the Header.

Inner Spacing:

These settings control spacing inside the Header.

Setting Description
Top Padding (Desktop) Adds spacing inside the top area of the Header on desktop devices.
Bottom Padding (Desktop) Adds spacing inside the bottom area of the Header on desktop devices.
Left Padding (Desktop) Controls inner left spacing on desktop devices.
Right Padding (Desktop) Controls inner right spacing on desktop devices.
Top Padding (Mobile) Adds spacing inside the top area of the Header on mobile devices.
Bottom Padding (Mobile) Adds spacing inside the bottom area of the Header on mobile devices.
Left Padding (Mobile) Controls inner left spacing on mobile devices.
Right Padding (Mobile) Controls inner right spacing on mobile devices.

Default Values:

Desktop:

  • Top: 4px
  • Bottom: 4px
  • Left: 75px
  • Right: 75px

Mobile:

  • Top: 4px
  • Bottom: 4px
  • Left: 15px
  • Right: 15px

Outer Spacing:

These settings control spacing outside the Header.

Setting Description
Top Margin (Desktop) Adds spacing outside the top area of the Header on desktop devices.
Bottom Margin (Desktop) Adds spacing outside the bottom area of the Header on desktop devices.
Left Margin (Desktop) Controls outer left spacing on desktop devices.
Right Margin (Desktop) Controls outer right spacing on desktop devices.
Top Margin (Mobile) Adds spacing outside the top area of the Header on mobile devices.
Bottom Margin (Mobile) Adds spacing outside the bottom area of the Header on mobile devices.
Left Margin (Mobile) Controls outer left spacing on mobile devices.
Right Margin (Mobile) Controls outer right spacing on mobile devices.

All outer spacing values are 0px by default.

Blocks Configuration

Mega Menu Block:

The Mega Menu block allows a menu item to be configured as a mega menu and supports an optional banner image.

Setting Description
Menu Item Position Defines the position/index of the menu item where the mega menu should be applied.
Menu Selects the navigation menu used for the mega menu.
Banner Image Allows adding a banner image to the mega menu.

The default menu selected for the Mega Menu block is Main Menu.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us