Transparent header

Activating the transparent header is Story is one from the Header section setting:
Enable in the Header settings
Alternate logo
Use the Alternate logo option to provide an image that works best with your transparent header. 
Enable on pages
Choose which type of pages to display the transparent header. Most stores will display on the home page. You have to ability to also display on collection pages and blog post pages (article pages).
Sticky header
When using the sticky header feature, your customers will always have access to the header area while scrolling down the page. When you combine the transparent header feature with a sticky header, you can use two different logo images. The alternate logo image is used in the transparent header and the main primary logo image is used in the sticky header while your customer is scrolling:
Darker logo appears when scrolling down the page
In the above example, the main logo is dark and appears in the sticky header:
Primary logo - Used while scrolling down
The alternate logo which is white, appears in the transparent header:
Alternate logo - Used in the transparent header
Additional tips when using a dark background as the header color:
Video: Dark headers with light hero images

Last modified 1mo ago

Copy link

Contents

Sticky header