Transparent header

Header

Make your store's header transparent on your Home page and collection pages to display the full height of your Slideshow or Video hero.

STEPS

In your theme editor (Customize):

  1. Click the Header section and scroll down the the Transparent header settings.

  2. Check the Enable on home page checkbox to turn on the transparent header.

    Ensure that you have a Slideshow or Video hero section as the first section on your homepage.

  3. Choose the colors (Text color, Icon color, Cart count color, and Border color) that should be used for the header content.

    These colors will need to contrast with your slides or video to ensure visibility.

  4. Use the Border opacity slider to make the border more or less visible.

    0 is completely invisible and 10 is completely opaque.

  5. Add a Logo image to be used specifically with the transparent header.

    Use an edited logo image with alternate colors to contrast with your slideshow images. For example, you may need a dark-colored version of your logo to look good on light-colored backgrounds.

    This image only displays when the header is transparent. Your main logo image will automatically display when the header is no longer transparent.

  6. Click Save.

Settings reference

Click on the Header section to find the following settings:


Related links

Header

Last updated