Header
The header is one of the most important parts of your store — it controls navigation, branding, search, and the first impression visitors have of your site.
With Stylescape, you can customize:
- Logo layout and position
- Sticky header behavior
- Transparent header styles
- Mega menu navigation
- Search visibility
- Separator lines and visual structure
Everything is editable directly from the Theme Editor.
You’ll find the Header inside the Header group in the Theme Editor.
Header — Section settings
🎨 Color scheme
Choose a preset to control background, text, and icons for the entire header.
Use high contrast so links remain readable across devices.
Logo position (desktop only)
Mobile layout is automatically optimized.
On desktop, you can choose where the logo and menu appear.
Options include:
- Logo left — menu centered
- Logo left — menu aligned left
- Logo left — menu displayed in a bottom row
- Logo centered — menu in bottom row
- Logo centered — menu aligned left
Choose the structure that best matches your brand style and catalog size.
Sticky header (on scroll)
Control how the header behaves while scrolling.
| Option | What it does |
|---|---|
| None | Sticky header disabled |
| On scroll up | Header appears only when scrolling upward |
| Always | Header remains visible at all times |
| Blurry sticky header | Adds a glass-style blur behind the header |
Sticky headers improve navigation — especially on mobile.
Navigation settings
These options control menus and search.
| Setting | Description |
|---|---|
| Show mega menu | Automatically displays multi-level menus in a mega menu layout |
| Enable search | Shows the search icon and store-wide search |
| Menu | Select which navigation menu to display |
Transparent header
Use this feature on hero images, banners, or landing pages for a premium look.
You can control:
- Text & icon color (transparent state only)
- Enable on homepage
- Enable on collection pages
- Enable on article/blog pages
- Enable on custom pages
Always test your transparent header on mobile — avoid white text on light backgrounds.
Separator lines
Separator lines help visually organize the header.
| Option | Description |
|---|---|
| Header separator | Adds a line at the bottom of header |
| Navigation separator | Appears when menu is positioned at the bottom |
| Toolbar separator | Adds dividers when using toolbar elements |
Header blocks
The header supports two powerful block types that help improve navigation, localization, and promotions:
- Toolbar
- Menu promotion
These blocks give you more control over usability and conversion without editing code.
🧭 Toolbar
The Toolbar is displayed above the main header and is perfect for localization tools, quick links, and social icons.
Toolbar settings
| Setting | Description |
|---|---|
| Color scheme | Controls the background and text colors. |
| Text size (mobile & desktop) | Adjusts font size separately per device. |
| Uppercase text | Converts toolbar text to uppercase. |
| Transparent toolbar | Matches the transparent header style (only applies when header is transparent). |
| Dividers | Adds separators between toolbar content. |
Language selector (optional)
| Setting | Description |
|---|---|
| Show language selector | Displays available languages. |
| Show language icon | Shows a language globe icon. |
| Show ISO code | Displays codes like EN, FR, ES. |
Country / Region selector
| Setting | Description |
|---|---|
| Show country selector | Lets customers choose region. |
| Show flag | Displays country flag. |
| Show ISO code | Shows codes like US, CA, UK. |
| Show only currency | Hides country name, shows only currency. |
Toolbar navigation
Add an additional navigation menu specifically for the toolbar.
Choose a simple menu (2–5 items). Avoid long navigation lists here.
Social media
| Setting | Description |
|---|---|
| Show social icons | Enables/disables social links. |
| Icon position | Align icons left or right. |
🛍️ Menu promotion block
The Menu promotion block allows you to add promotional cards inside your mega menu — great for campaigns, featured collections, and seasonal offers.
Menu promotion settings
| Setting | Description |
|---|---|
| Menu item | Must match the exact menu link name you want to attach the promotion to. |
| Image | Upload a promotional image. |
| Heading | Title text for the promotion. |
| Heading size | Adjusts heading scale. |
| Text | Optional description or promo message. |
| Link | Where visitors go when they click. |
Style options
| Setting | Description |
|---|---|
| Color scheme | Controls background and text style. |
| Text alignment | Left, center, or right. |
| Vertical position | Top, center, or bottom (for overlay layouts). |
| Overlay text | Enable text over the image. |
| Overlay opacity | Controls overlay visibility. |
For best results, use high-contrast text and optimized images (1200×800 recommended).
Best practices (UX + SEO)
- Keep menus simple — avoid too many levels
- Use short, clear navigation labels
- Keep the header height minimal
- Ensure good contrast for accessibility
- Make search visible (most shoppers use it)
- Avoid placing too many buttons or icons
Good example:
Shop — New Arrivals — Best Sellers — Collections — About — Contact
Bad example:
Shop Everything — Discounts — Shoes — Clothes — News — FAQ — Support — Blog — Tutorials — More
Summary
With the Header settings you can:
- Control layout and branding
- Improve navigation with mega menus
- Add sticky + transparent effects
- Keep everything clean and user-friendly
A well-designed header improves navigation, reduces bounce rate, and helps search engines understand your site structure.