The site header is a block that is present on all pages of the site. It is essentially the first thing a customer notices when looking for information about the store, so it is important to make the header visually appealing and convenient for site visitors.

You can configure the structure and visual display of this block in Website → Design → Design Editor → block Header.

The header settings section contains several tabs where you can configure the placement of interface elements, their visual style, and the visual style of the header blocks.

Quantity badges indicate the number of products displayed in header elements, such as favorites, the comparison list, and the cart.
In the Header Style panel, you can configure the icon background and the color of the number displayed inside it.

On the first tab Header Style, you can pin the header while scrolling by checking the Sticky header checkbox.

In the image below, you can see a schematic representation of the header on the site in Cartum.

The header is composed of three horizontal lines, each containing multiple sections.

Sections occupy a certain position in the line and are responsible for aligning the components inside.

The top and bottom lines each contain three sections. The main line contains four sections, one of which is double-height, allowing elements to be arranged in two rows.

To better understand how the structure lines look, we provide an example of a real site header with a schematic overlay of the lines.

For each header line, you can configure its visual style: height, background, element color, padding, etc. All available settings can be seen on the corresponding tab.

In the screenshots below, you can see the header settings of one of the designs from our design gallery. You can also find other header layout options there.

This is the widest line of the header, where large elements are usually located — logo, working hours, contact block, cart, search field, etc.

Configured in Design Editor → Header → tab Main section.

Configured in Design Editor → Header → tab Top section.

Configured in Design Editor → Header → tab Bottom section.

You can include and exclude interface elements in the header, as well as change their placement in the header in Design Editor → Header in the Header layout tab.

Here we provide an example of element placement that corresponds to the header in the example. Some elements are excluded and will not be displayed.

Elements placed in the double section will align to the left edge, and those inserted in different parts of the double section are arranged in two rows, one below the other.

Elements in a single central section will align to the center.

If you want to change the placement of a specific element in the header, simply drag it to the desired section and save the changes.

In the design editor, you can change the display style of an element. For each header element, additional settings are available and can be accessed by expanding its panel.

More examples of different header layouts, visual line designs, and element placements can be seen in our Design Gallery.

All available elements of the site header:

The visual display and placement of elements in the mobile version header are configured separately