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.
5. How to set up Desktop Menu Selection
With Eurus, you can control how your desktop menu interacts with users. To set it up, do as follows:
Step 1:
In Shopify admin, go to the Theme Editor by clicking on Online store > Themes > Customize.
Step 2:
Find the Header area and tap on the Header section, you will see a new panel appear,
Step 3:
Within the menu setting, you should find a setting labeled Desktop Menu Selection.
Step 4:
Choose between two options:
- On click: When a first-level menu item or tabbed menu items (for tabbed menu) is clicked, the entire menu expands. If that item contains a link, clicking it again will navigate the user to the linked page. Submenus are only revealed when clicked.
- On hover: The same behavior as "On click," but it all happens when the user hovers over the menu items instead of clicking.
Simply pick the option that fits your store’s navigation style!
Step 5:
Once you've made your selection, click the Save button to implement the changes.
6. How to change the layout of the header?
🖥️ On desktop:
Tap on the Header section, find the Desktop header layout setting, you can choose the layout you want for the header section in the drop down list:
- Logo left, menu left
- Logo left, menu center
- Logo above, menu center
- Logo center, menu left
- Logo left, menu right
📱 On mobile:
Tap on the Header section, find the Mobile header layout setting, you can choose the layout you want for the header section in the drop down list:
- Logo center, menu left
- Logo center, menu right
- Logo left
