Overlay options
Header Overlay Settings
Use the Header / Overlay Settings block to adjust overlay options for the header.
When the overlay is enabled, the header appears on top of the first section with a transparent background.
Overlay can be enabled on:
- Home page
- Collection pages
- Product pages
- Specific pages, defined in the Advanced section of block settings:
Style options
Inverted colors
When inverted colors are enabled, the overlay's background and text colors are swapped.
Logo for inverted colors
You can upload an optional logo to be used when Inverted Colors are active.
- It is recommended to use the same image dimensions and file format as the main logo under Header / Logo.
Opacity and Blur
Adjust the background opacity and overlay blur to ensure the header is visually clear and aligns seamlessly with your store's design.
Note
When the overlay is enabled, the header might cover some elements in your first template section. This is especially true with large menu structures, so test all templates that use the overlay header at different screen sizes. Adding extra top padding or top margin to the first section with the Custom spacing block can help resolve any issues where the header obstructs the first section’s content.