Sticky & transparent header
Two independent settings that control header behavior on scroll and over a hero image.
Updated 2026-05-09
Sticky header
Header settings → Sticky header (checkbox) + Sticky style.
| Style | Behavior |
|---|---|
always | Header stays fixed at the top during scroll |
on-scroll-up | Hides on scroll-down (creates more reading space), reveals on scroll-up |
How sticky is implemented
When header_sticky is on, the body inline-adds the class header-is-sticky at first paint. The header itself is hoisted into a dedicated sticky wrapper so the announcement bar can scroll away independently:
<body class="… header-is-sticky">
<div id="announcement-host"></div> <!-- announcement bar moved here at load -->
<div id="header-sticky"> <!-- sticky wrapper, position: sticky; top: 0 -->
<div id="header-group">{ section group renders here }</div>
</div>
</body>
State is exposed on .header-wrapper as attributes (not classes):
| Attribute | When it's set |
|---|---|
data-scrolled="true" | Page has scrolled past the top (~8px threshold). Use this in custom CSS, not .header-wrapper--scrolled. |
header-wrapper--hidden (class on the inner wrapper, on-scroll-up only) | Header is currently hidden after a downward scroll past 80px. While hidden, #header-sticky is set to pointer-events: none so clicks reach the page underneath. |
Scroll thresholds: a ~6px delta past 80px triggers hide; any upward scroll reveals.
Transparent header
Header settings → Transparent header on homepage (checkbox).
header_transparent only applies on template.name == 'index'. PDP, collection, and blog pages always render with the solid background — the theme intentionally disallows transparent there for legibility.
How the transparent state behaves
State is exposed on .header-wrapper as attributes:
| Attribute | When it's set |
|---|---|
data-transparent="true" | The header is configured for transparent mode (homepage with media-heavy first section) |
data-transparent-scrolled="true" | Page has scrolled past the threshold (~8px), header swaps to its regular scheme |
- At top (
data-transparent="true"and nodata-transparent-scrolled): header background istransparentand uses thecolor_scheme_transparentsetting. - After scroll:
data-transparent-scrolled="true"is set, header swaps to the regularcolor_scheme, and the hide-on-scroll behavior re-enables (initially suppressed so the transparent state stays put while the visitor is at the top).
color_scheme_transparent
Header section → Transparent scheme (color scheme picker). This is the scheme the header uses only while it's in the transparent at-top state — typically a scheme with white/light text and link colours so it reads over a dark hero image.
Once the user scrolls, the header drops back to its regular color_scheme. There are no separate "transparent text colour" / "transparent sticky background" fields anymore — both come from these two scheme pickers.
Combining sticky + transparent
Both can be enabled simultaneously:
- Page loads → header is transparent (
data-transparent="true", scheme =color_scheme_transparent). - User scrolls past the threshold →
data-transparent-scrolled="true", scheme = regularcolor_scheme, hide-on-scroll re-enables. - User scrolls down further (with
on-scroll-upmode) →header-wrapper--hiddenis added, header slides up,pointer-events: none. - User scrolls up → hidden class is removed, header reveals.
Limitations
- Transparent mode is homepage-only.
- If your first homepage section is Rich text or Newsletter (no imagery), transparent mode won't visually engage; the header just sits over the page background.