Header

The Header section controls the main navigation area of your store, including logo position, menu type, language selector, color schemes, and layout options.

You can fully customize how your header looks and behaves on both desktop and mobile.

Logo & Layout

Desktop logo position

Controls where the logo appears on desktop.

Options:

  • Top left
  • Top center
  • Middle left
  • Middle center
  • Hidden

Revert mobile logo & icons

Reverses the position of the logo and icons on mobile view.

Useful if you want:

  • Logo on the right
  • Icons on the left

Select which navigation menu will be used.

This menu is managed from:

Online Store → Navigation

Desktop menu type

Defines how the menu behaves on desktop.

Options:

  • Dropdown → Classic dropdown menu
  • Mega menu → Advanced multi-column layout
  • Drawer → Slide-in side menu

Mega Menu Orientation

(Visible only when Mega menu is selected)

  • Default → Opens below the header
  • Left Drawer → Opens from the left side

Show separator line

Adds a thin divider line under the header.

Header Style

Header style

Controls the visual style of the header.

Example:

  • Normal → Standard static header
  • (Other styles may include sticky or transparent depending on theme)

Overlay Header

Enable overlay header on home page

Places the header on top of the hero/banner section.

Enable overlay header on collection

Applies overlay style on collection pages (only if collection image exists).

Color Settings

Color scheme

Controls the background and text colors of the header.

Controls only the menu dropdown / mega menu colors.

This allows you to:

  • Keep header light
  • But make mega menu dark (or vice versa)

Language & Region

Enable country/region selector

Displays country selector in header.

Requires setup from:

Settings → Markets

Enable language selector

Displays language switcher in header.

Requires setup from:

Settings → Languages

Spacing & Padding

Bottom margin

Adds spacing below the header.

Section padding

Controls internal spacing:

  • Top padding
  • Bottom padding

Useful when:

  • Header feels too tight
  • Or overlaps with content

Header Blocks

The Header section supports block-based content.

Currently, the available block type is:

Promo Card

You can add promotional content inside your Mega Menu by using Header blocks.



How to add a Header block

Go to:

Online Store → Themes → Customize → Header

Click:

Add Promo Card

This will create a new Promo Card block inside the Header.

Block type: Promo Card

Promo Card blocks are used to display image-based promotions inside the Mega Menu.

Each block includes:

  • Menu Item Name → Links the card to a specific menu item
  • Image → Visual shown in the menu
  • Title → Text label under the image
  • Link → Destination URL

How blocks work

Header blocks are:

  • Rendered only when Mega Menu is active
  • Injected into the corresponding menu panel
  • Fully optional and can be added or removed anytime

They do not affect:

  • Header layout
  • Logo or icons
  • Mobile menu behavior

Limitations

  • Only one block type is currently supported in Header.
  • Blocks are not shown in Dropdown or Drawer menu types.
  • Blocks are desktop-only features.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.