Transparent header

Header

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

STEPS

In your theme editor (Customize):

Click the Header section and scroll down the the Transparent header settings.
Check the Enable on home page checkbox to turn on the transparent header.
Ensure that you have a Slideshow, Video hero, or Image hero section as the first section on your homepage.
To enable the transparent header on other pages, enter the template names separated by commas in the Enable on additional templates field.
You can enable the transparent header for a type of template: collection, page, product, article, blog.
Or you can enter specific templates by entering the full template name with the template type and suffix (ex. page.about).
The following are all default template names in Lorenza:
```
404
cart
collection.collection-flash-sale
collection.collection-landing
collection.collection-sale
collection.subcollection
list-collections
page.about
page.brand-story
page.contact
page.faq
page.lookbook-1
page.lookbook-2
page.stockists
password
product.gift-card
product.landing
product.preorder
product.with-tabs
search
```
Add a Logo image to be used specifically with the transparent header.
Use an edited logo image with alternate colors to contrast with your images or video. For example, if your default logo is black, upload a white transparent header logo to contrast with darker images or videos.
Set the Text color and Cart count text color to look good opposite the colors of your images or video.
Use light colors for darker images and dark colors for lighter images to make sure they are clear and readable.
Click Save.

Settings reference

Click on the Header section to find the following settings:

Setting	Description
Enable on home page	Select this checkbox to enable the transparent header feature.
Logo image	Select or upload a logo image when the transparent header is used. This logo is only used when the header is shown as a transparent header. Scroll up to the normal header settings to pick the normal logo.
Text color	Select a color of all header text. Make sure the text is readable against your top-most home page section's background colors, images, or video.
Border color	Select a color for the borders and lines used in the header.
Border opacity	Set the border opacity between 0 (hidden) and 10 (opaque).

Setting

Description

Enable on home page

Select this checkbox to enable the transparent header feature.

Logo image

Select or upload a logo image when the transparent header is used. This logo is only used when the header is shown as a transparent header. Scroll up to the normal header settings to pick the normal logo.

Text color

Select a color of all header text. Make sure the text is readable against your top-most home page section's background colors, images, or video.

Border color

Select a color for the borders and lines used in the header.

Border opacity

Set the border opacity between 0 (hidden) and 10 (opaque).

Related links
Header

Last updated 1 month ago