Transparent Header

Enabling the Transparent Header feature allows your header to blend seamlessly with the page background, creating a more immersive first-screen experience.

📌 Feature Overview

• Upload Logo Upload a brand logo to be displayed when the transparent header is enabled. We recommend using a high-contrast or light-colored version to ensure visibility against the background.

• Foreground Color Define the text color for transparent header mode, including menu items and buttons. Choose a color that maintains strong contrast with your background for better readability.

---

📍 Pages Where Transparent Header Can Be Enabled

You can enable the transparent header on the following page types. Use manual template name entries to specify where it should apply:

1. Homepage Enables the transparent header at the top of the homepage.

2. Collection Pages

   • Enter specific collection template names separated by commas to activate transparent headers. For example: collection-sale,collection-new

   • To apply only to the default collection template, enter default. Other templates will not use the transparent header in this case.

3. Collection List Page Enables transparent header on the page that lists multiple collections.

4. Search Page Enables transparent header on the search results page.

5. Standard Pages (Page Templates)

   • Enter the template names of pages (separated by commas) where you want the transparent header enabled. For example: support-center,about-us

   • To apply only to the default page template, enter default. Other custom templates will not show a transparent header.

---

✅ Usage Tips

• Visual Consistency: Ensure the logo and header text contrast well with the background image to maintain brand clarity and readability.

• Ideal Scenarios: Best used with full-width hero images or banners to create immersive first impressions.

• Readability: For busy backgrounds, consider adding a shadow or semi-transparent overlay to keep navigation elements legible.