Header Features

The Horizon header is a highly customizable component that supports multiple layouts, transparent overlays, sticky positioning, and responsive behavior.

Key Features

Flexible Positioning: Position logo, menu, search, and localization in custom layouts
Transparent Header: Support for transparent headers on home, product, and collection pages
Sticky Header: Choose between always sticky, scroll-up sticky, or never sticky
Two-Row Layout: Split header elements across top and bottom rows
Mobile Navigation Bar: Optional horizontal scrolling navigation for mobile
Mega Menu Support: Rich dropdown menus with images, products, and collections

Header Configuration

Layout Settings

The header uses a three-column grid system (left, center, right) that you can configure:

{% liquid
  assign order = 'logo,menu,localization,search,drawer_search,actions'
  
  if shop.customer_accounts_enabled
    assign order = 'drawer_search,logo,menu,localization,search,actions'
  endif
%}

Logo Position
Menu Position
Search Position

Configure where the logo appears in the header:Options:

left - Logo on the left side
center - Logo in the center (default)
right - Logo on the right side

Setting ID: logo_position

Position the search icon:Options:

left - Search on left
right - Search on right (default)

Setting ID: search_position

Two-Row Header

Split header elements across two rows for more layout flexibility:

{% assign rows = 'top,bottom' | split: ',' %}
{% for row in rows %}
  <div class="header__row header__row--{{ row }} color-{{ section.settings.color_scheme }}">
    {% render 'header-row',
      row: row,
      order: order,
      settings: section.settings
    %}
  </div>
{% endfor %}

Row Options:

menu_row: Place menu in top or bottom row
search_row: Place search in top or bottom row
localization_row: Place language/country selector in top or bottom row

Transparent Header

Enable transparent headers that overlay page content:

{% if section.settings.enable_transparent_header_home and template.name == 'index' %}
  assign transparent = 'always'
  assign transparent_color_scheme = section.settings.home_color_scheme
{% elsif section.settings.enable_transparent_header_product and template.name == 'product' %}
  assign transparent = 'always'
  assign transparent_color_scheme = section.settings.product_color_scheme
{% elsif section.settings.enable_transparent_header_collection and template.name == 'collection' %}
  assign transparent = 'always'
  assign transparent_color_scheme = section.settings.collection_color_scheme
{% endif %}

Home Page
Product Page
Collection Page

Settings:

enable_transparent_header_home - Enable transparency on homepage
home_color_scheme - Choose default or inverse color scheme

Settings:

enable_transparent_header_product - Enable on product pages
product_color_scheme - Color scheme option

Settings:

enable_transparent_header_collection - Enable on collection pages
collection_color_scheme - Color scheme option

When both transparent and sticky headers are enabled, transparency is disabled when the header becomes sticky.

Sticky Header

Control when the header sticks to the top of the viewport:

{% if section.settings.enable_sticky_header == 'always' %}
  assign sticky = 'always'
{% elsif section.settings.enable_sticky_header == 'scroll-up' %}
  assign sticky = 'scroll-up'
{% endif %}

Options (enable_sticky_header):

always - Header always stays at top (default)
scroll-up - Header appears when scrolling up
never - Header scrolls normally

<header-component
  sticky="always"
  data-sticky-state="active"
>

<header-component
  sticky="scroll-up"
  data-scroll-direction="up"
>

Header Actions

The header actions include search, cart, and account icons.

Action Display Styles

Choose between icon or text display:

{% capture actions %}
  {% render 'header-actions',
    customer_account_menu: section.settings.customer_account_menu,
    display_style: section.settings.actions_display_style,
    section: section
  %}
{% endcapture %}

Settings:

actions_display_style: icon or text
actions_font_size: 12px to 18px (when using text)
actions_font: Choose font family
actions_text_case: none or uppercase

Localization

Display language and country/currency selectors:

{% assign show_language = section.settings.show_language %}
{% if localization.available_languages.size <= 1 %}
  {% assign show_language = false %}
{% endif %}

{% assign show_country = section.settings.show_country %}
{% if localization.available_countries.size <= 1 %}
  {% assign show_country = false %}
{% endif %}

Localization Settings

Country/Currency
Language
Typography

Settings:

show_country - Display country/currency selector
country_selector_style - Show flag icon

Code:

{% if show_country %}
  {% if section.settings.country_selector_style == true %}
    <span class="icon-flag" style="
      background-image: url({{ localization.country | image_url: width: 32 }});
    "></span>
  {% endif %}
  <span class="currency-code">
    {{ localization.country.currency.iso_code }}
  </span>
{% endif %}

Settings:

show_language - Display language selector

Code:

{% if show_language %}
  <span>
    {{ localization.language.iso_code | upcase }}
  </span>
{% endif %}

Font Settings:

localization_font: heading, subheading, body, or accent
localization_font_size: 10px to 18px
localization_position: left or right

Appearance Settings

Section Dimensions

section_width:
  - page-width
  - full-width

section_height:
  - compact (smaller padding)
  - standard (default padding)

Borders and Dividers

Bottom Border:

style="--border-bottom-width: {{ section.settings.border_width }}px;"

border_width: 0-5px, 0.5px increments

Row Divider (when using two rows):

divider_width: Thickness between top and bottom rows (0-5px)
divider_size: page-width or full-width

Color Schemes

color_scheme_top: Color scheme for top row
color_scheme_bottom: Color scheme for bottom row (when using two rows)
color_scheme_transparent: Inverse color scheme for transparent state

Mobile Behavior

On mobile devices (< 750px), the header automatically switches to a drawer menu:

{% capture drawer_menu %}
  {% content_for 'block',
    type: '_header-menu',
    id: 'header-menu',
    variant: 'mobile'
  %}
{% endcapture %}

Mobile Grid Layout

The mobile header uses a 5-column grid:

grid-template-columns:
  var(--header-mobile-bookend)  /* leftA: menu icon */
  var(--header-mobile-bookend)  /* leftB: search */
  1fr                           /* center: logo */
  var(--header-mobile-bookend)  /* rightA: search/account */
  var(--header-mobile-bookend)  /* rightB: cart */

The mobile layout automatically reorganizes elements. Custom positioning settings may not apply on mobile.

Schema Settings

Complete Settings List

{
  "logo_position": "center",
  "menu_position": "left",
  "menu_row": "top",
  "customer_account_menu": "customer-account-main-menu",
  "show_search": true,
  "search_position": "right",
  "search_row": "top",
  "show_country": true,
  "country_selector_style": true,
  "show_language": true,
  "localization_font": "heading",
  "localization_font_size": "1rem",
  "localization_position": "right",
  "localization_row": "top",
  "section_width": "page-width",
  "section_height": "standard",
  "enable_sticky_header": "always",
  "divider_width": 0,
  "border_width": 0,
  "actions_display_style": "icon",
  "color_scheme_top": "primary",
  "enable_transparent_header_home": false,
  "enable_transparent_header_product": false,
  "enable_transparent_header_collection": false
}

JavaScript API

The header component is loaded at header.js and provides:

import { hydrate } from '@theme/section-hydration';
const url = new URL(window.location.href);
url.searchParams.delete('page');
hydrate('{{ section.id }}', url);

Custom Events

The header responds to scroll events and manages:

Sticky state transitions
Transparent to solid color transitions
Submenu height calculations
Mobile drawer state

Navigation - Menu and mega menu configuration
Search - Search modal and predictive search

Overview

Core Concepts

Development

Customization

Features

Header Features

Key Features

Header Configuration

Layout Settings

Two-Row Header

Transparent Header

Sticky Header

Header Actions

Action Display Styles

Localization

Localization Settings

Appearance Settings

Section Dimensions

Borders and Dividers

Color Schemes

Mobile Behavior

Mobile Grid Layout

Schema Settings

JavaScript API

Custom Events

​Key Features

​Header Configuration

​Layout Settings

​Two-Row Header

​Transparent Header

​Sticky Header

​Header Actions

​Action Display Styles

​Localization

​Localization Settings

​Appearance Settings

​Section Dimensions

​Borders and Dividers

​Color Schemes

​Mobile Behavior

​Mobile Grid Layout

​Schema Settings

​JavaScript API

​Custom Events

​Related Components

Key Features

Header Configuration

Layout Settings

Two-Row Header

Transparent Header

Sticky Header

Header Actions

Action Display Styles

Localization

Localization Settings

Appearance Settings

Section Dimensions

Borders and Dividers

Color Schemes

Mobile Behavior

Mobile Grid Layout

Schema Settings

JavaScript API

Custom Events

Related Components