Transparent header
Header
Make the header background transparent to display the full height of featured media sections. You can enable the transparent header on the home page and other selected pages.
Supported sections
The transparent header requires a full-width section at the top of the page. Supported sections include:
Important
Set the Top padding to 0px. Click the section and scroll to the bottom the find the settings.
Enable on home page
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.
Enable on other pages
To enable the transparent header on other pages, enter the template names separated by commas in the Enable on additional templates field.
Enter the full template name with the template type and name, with a period in between (ex. page.about).
The following are default templates in Eclipse:
Add alternate logo
You may want to use a different colored logo if the section image is darker or lighter than the default header color. For example, if your default logo is black, upload a white transparent header logo to contrast with darker images or videos.
If the sticky header option is enabled, the header will change to the default logo and colors when the page is scrolled.
Click Header section to find settings
Logo image
Upload a PNG image to display as your store logo when the header is transparent.
Text color
If no logo is uploaded, change the text color of the store title for when the header is transparent.
Cart count color
Set the color of the cart icon for when the header is transparent. Use light colors for darker images and dark colors for lighter images to make sure they are clear and readable.
Related links
Last updated