Skip to main content
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
%}
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

​
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 %}
Settings:
  • enable_transparent_header_home - Enable transparency on homepage
  • home_color_scheme - Choose default or inverse color scheme
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 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

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 %}

​
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

{
  "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

​
Related Components

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

Build docs developers (and LLMs) love

Get started for freeTalk to us