Sticky & transparent header

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

The header transitions between scrolled and at-rest states. CSS hooks: .header-wrapper--sticky and (when scrolled) .header-wrapper--scrolled.

Transparent header

Header settings → Transparent header on homepage (checkbox).

When enabled and you're on the index template and the homepage's first section uses imagery (hero, slideshow, video hero), the header overlays that section transparently. As soon as the user scrolls past the hero, the header reverts to its solid background.

Transparent text colour

Transparent mode requires a different text colour for legibility (typically white text on dark imagery). Settings:

• Transparent text colour — applied while transparent
• Transparent sticky background — solid background colour used when the header becomes sticky after the hero

The theme detects whether the next section after the header is a media-heavy one and only enables transparency in that case. Other templates (product, collection, blog) always render with the solid background.

Combining sticky + transparent

Both can be enabled simultaneously:

• Page loads → header is transparent
• User scrolls past the hero → header sticks AND swaps to solid background
• User scrolls down further (with on-scroll-up mode) → header hides
• User scrolls up → header reveals (still solid)

Limitations

• Transparent mode is homepage-only. PDP and collection pages need a clear background for legibility — the theme intentionally doesn't allow transparent there.
• If your first homepage section is a Rich text or Newsletter (no imagery), transparent mode won't visually engage; the header just sits over the page background.