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:

Logo widthAdjusts the size of the logo on desktop devices (above 768px screen width).
Logo width (mobile)Same as above, but for mobile devices.
Desktop layoutControls the position of the logo and the navigation menu on desktop devices.
Mobile layoutControls 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:

  1. Open Theme settings in the Theme Editor.
  2. Click Colors.
  3. Find the Header section.
  4. Adjust the Background and Text colors as desired.

Transparent Header Effect

Transparent header

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:

  1. Select the first section on the page in the Theme Editor. Make sure it's one of the supported sections.
  2. Tick Enable transparent header.
  3. To change the logo and text color on the transparent header, select the Header section and locate the Transparent header settings.
This effect will not work if there is an announcement bar or promotion bar placed below the header.