Header

1. What is Header?

The Header serves as a pivotal section providing a quick overview of the entire online store. It establishes a strong first impression, setting the tone for a compelling shopping experience.

2. How to Set up Theme mode?

The Theme Mode Toggle feature provides users with the flexibility to customize the appearance of the theme, allowing for a personalized and comfortable viewing experience. Follow the steps below to enable and manage the theme mode settings:

Open the Theme Editor and go to Theme mode sections in Theme Settings.

a) Enable Theme Mode:

Enabling this option activates both light and dark modes, while disabling it retains only the light mode.

b) Select Mode:

After enabling the theme mode, users can choose their preferred mode by following the options below:

• If you want the theme mode to automatically adjust based on users device settings, select “Use Device Settings”. This ensures that the theme seamlessly switches between light and dark modes according to the overall device preferences.
• Users can manually switch between light and dark modes using a toggle conveniently placed in the header of the interface if you choose “Allow manual switch".
• “Default mode” will only take effect when "Allow manual switch" is selected above: Set your default mode to either Light or Dark, depending on your preference.

Conclusion:

By following these simple steps, users can tailor the theme mode to their liking, ensuring an enjoyable and personalized visual experience. Whether you prefer the clarity of light mode or the reduced eye strain of dark mode, this feature puts you in control. Experiment with the settings to find the perfect theme mode that suits your needs.

3. How to Set up a Sticky header?

The Sticky Header feature enhances your website's navigation experience by ensuring that the header remains visible as users scroll through the content. Follow the steps below to set up and customize the Sticky Header according to your preferences.

Within the Header section in Theme Editing, locate the Sticky Header settings.

You'll find a dropdown menu that allows you to select how the sticky header appears on your website. You can choose from:

• Disable (None) : Turn off sticky header.
• Enable: Opt for scroll-triggered sticky, always sticky, or always sticky with a reduced logo size.

4. How to Set up a Transparent header?

The Transparent Header feature adds a touch of elegance to your website by allowing a see-through effect for the header. Follow these simple steps to set up and customize the Transparent Header on specific pages of your site.

Admin => Online Store => Theme => Sections => Header 

Transparent Header:

You can customize the transparent header by ticking the "Enable on homepage" checkbox for a transparent effect on the homepage and/or the "Enable on collection page" checkbox to extend this feature to collection pages. 

Uploading Transparent Logo:

Still within the Transparent Header settings, look for the "Logo (transparent)" option.

Upload your desired transparent logo file to ensure a seamless and aesthetically pleasing appearance.

Tips:

Ensure your logo has a transparent background for optimal results.

Experiment with different logo variations to see which complements the transparent header effect the best.

Conclusion:

With these straightforward steps, you can effortlessly enhance the visual appeal of your website by incorporating a Transparent Header.