Header
The header serves as the initial point of interaction for users upon visiting a store. It provides a concise overview of the brand logo, main navigation links, and essential utilities such as search and cart icons. Setting up the header effectively is crucial for good user experience, and ultimately maximizing conversions.
Adjusting the Layout
You can adjust the layout of the header with the following settings:
| Setting | Description |
|---|---|
Logo width | Adjusts the size of the logo on desktop devices (above 768px screen width). |
Logo width (mobile) | Same as above, but for mobile devices. |
Desktop layout | Controls the position of the logo and the navigation menu on desktop devices. |
Mobile layout | Controls the position of the logo and the navigation menu on mobile devices. |
Adjusting the Colors
To adjust the colors of the header, follow these steps:
Instructions
- Open Theme settings in the Theme Editor.
- Click Colors.
- Find the Header section.
- Adjust the Background and Text colors as desired.
Transparent Header Effect
You can achieve a transparent header effect in combination with the following sections:
- Slideshow
- Image with text overlay
- Video with text overlay
- Collection banner
- Blog banner
For the effect to work, the section must be placed as the first section on the page, directly below the header. Follow these steps apply this effect in your store:
Instructions
- Select the first section on the page in the Theme Editor. Make sure it's one of the supported sections.
- Tick Enable transparent header.
- To change the logo and text color on the transparent header, select the Header section and locate the Transparent header settings.
Note
This effect will not work if there is an announcement bar or promotion bar placed below the header.Table of Contents