Storefront identity
Transparent header on homepage
Make the header float on top of your homepage hero so the image extends all the way to the top of the viewport.
How to enable
- Customize → Header section → scroll down to Header overlay on Homepage.
- Check Make header overlay Homepage content.
- Adjust the four configurable values to taste.
The 4 settings
- Header background color (Homepage) — the base color of the header bar when on the homepage. Often white, but can be any brand color.
- Background opacity — 0% (fully transparent) to 100% (fully solid). 0-30% is typical when you want the hero image to read through.
- Background blur (frosted glass) — only applies when opacity is below 100%. 0-30px. 15-25px creates a beautiful glass effect.
- Header text color (Homepage) — contrast partner for the chosen background. Default white — use black if your hero image is light.
Recommended combinations
| Look | BG color | Opacity | Blur | Text |
|---|---|---|---|---|
| Fully transparent | any | 0% | 0 | white |
| Frosted glass dark | #000 | 30% | 20px | white |
| Frosted glass light | #fff | 30% | 25px | black |
| Semi-solid editorial | #FAF7F0 | 75% | 15px | black |
What pages does it apply to?
The setting applies only to your store’s homepage (template index). On collection, product, page, and account templates the header keeps its normal (non-overlay) appearance.
Compatibility note
The first section after the announcement marquee should be visually “full-bleed” (Image banner, Video banner, large hero image). If the first section has padding or a light background, the overlay effect still works but is less dramatic.