Change the header layout

You can choose between different header layouts for your shop. Find the one that best fits your needs and change the look and feel of your shop, for example by prominently showing your logo or shop name.

How to change the header layout

  1. In the sidebar of the administration, navigate to Editor.
  2. Select header areain the bottom bar.
  3. Select the tab header layout.
  4. Choose the header layout that best fits your needs. You can hover with your mouse over a header layout or select its visual to learn more about the alignment and properties. Furthermore, you can see a preview of the header on the page in the background as soon as you select a header layout.
    You can hold down the drag icon in the upper right corner of the header layout overlay and move the overlay to see different parts of the page in the background.
  5. Select Save, once you've decided on a header layout.

The different header layouts

In all headers, the USPs and/or announcement bar of your shop (if set) will be shown at the very top of your shop. In addition, the shopping basket and the icon for the customer login will always be displayed in the top right corner.

Of course, you don't need to worry about responsiveness. All headers are prepared for responsive design. Your header will always be displayed in a version that is optimised for the device used by the visitor. Note that this also means that the header might look slightly different on smaller devices.

You are unsure which header layout best fits your business? Let's have a closer look at the different headers and their layout.

It's up to you if you would like to show your logo or your shop name in the header. Be aware that your logo settings can affect your selected header layout. You can adjust the logo alignment in the respective logo settings. For further information, refer to the article Logo.

Info

For most header layouts you can choose between two menu types. For further information, refer to Pick a menu type.

Option 1

image of option 1

General Brand Menu Search

The search icon, the logo / shop name, and the main menu are displayed on one line.

The logo / shop name is centered and displayed between the menu and the search icon. To the very left, the visitor can select the menu icon  Open main menu to open the menu. This header layout only offers this menu type. To the right, the visitor can select a search icon image of search icon to open the search bar.

With this narrow header, you can display your logo / shop name, menu, and search icon in one line. As the menu is folded, the focus of this layout is on your brand. Furthermore, the folded menu is a good choice for large menu structures, as it is only visible when selected and thus allows your visitors to focus on your website content without being overwhelmed by a large number of menu items.

Option 2

image of option 2

General Brand Search
The logo / shop name, the main menu, and the search icon are displayed on one line. The logo / shop name is displayed on the very left. To the right, the visitor can select a search icon image of search icon to open the search bar.

As this narrow header displays the main menu very prominently, it is recommended for small menu structures. Using this layout for structures with a large number of items in the main menu might overwhelm your visitors and make your header look cluttered.

Option 3

image of option 3

General Brand Search
The logo / shop name and the search icon are displayed on one line. The main menu is displayed on a separate line below. The logo / shop name is centered. To the right, the visitor can select a search icon image of search icon to open the search bar.

With this header layout, you can highlight your logo and menu.

As the main menu is displayed on a separate line, this layout is suitable for small, medium and large menu structures. For very large menu structures, option 1 is more suitable, as displaying a large number of main menu items prominently might overwhelm your visitors and make your header look cluttered.

Option 4

image of option 4

General Brand Search
The logo / shop name and the search bar are displayed on one line. The main menu is displayed on a separate line below. The logo / shop name is displayed on the very left. The search bar is displayed on the right.

This left-aligned header provides an extended search field, highlighting your brand and the search functionality. This might be helpful if you offer a large product range, so your visitors can easily use the search functionality to find what they are looking for.

As the main menu is displayed on a separate line, this layout is suitable for small, medium, and large menu structures. For very large menu structures, option 1 is more suitable, as displaying a large number of main menu items prominently might overwhelm your visitors and make your header look cluttered.

Option 5

image of option 5

General Brand Search
The search bar, the logo / shop name, and the main menu are each displayed on a dedicated line. The logo / shop name is displayed on the very left. It is positioned below the search bar but above the menu. The search bar is displayed at the top left.

This wide header highlights your brand as it prominently shows the logo area. It also highlights the search functionality. This might be helpful if you offer a large product range, so your visitors can quickly find and use the search functionality to find what they are looking for.

As the main menu is displayed on a separate line, this layout is suitable for small, medium, and large menu structures. For very large menu structures, option 1 is more suitable, as displaying a large number of main menu items prominently might overwhelm your visitors and make your header look cluttered.

Was this article helpful?