[P] Transparent header

The transparent header allows you to create an impactful design where the header blends with the first section:

To use the transparent header, you must ensure that the first section on your page is compatible with the transparent header. Not all sections can be used in combination with the transparent header feature.

Here are the sections that support transparent header:

  • Slideshow
  • Image with text overlay
  • Collection banner (only on collection pages)

After adding one of those sections as the first section on the page, click on the section and enable the Allow transparent header setting:

Configuring header color and logo

You often want to use a different logo and text color when the header becomes transparent. To do that, open the theme editor and click on the "Header" section:

Scroll down to the Transparent header settings, and adjust the text and logo image to

The transparent logo size must exactly match the non-transparent logo size. If the size is different, then the transition between the transparent and non-transparent logo won't look good.