Header

The header area of the shop

Header

Colors

Example:

Logo

Using Logo position (1) you position the logo in the header either on the left, right or in the middle. All other elements of the header such as search, shop navigation, etc. are arranged automatically.

The Logo size mobile (2) and Logo size (3) describe the size of the logo in percent in relation to the Height mobile (4) or Height (5) of the header. This ensures that the logo cannot break out of the header - unless you use values above 100% to intentionally achieve this effect.

Example: If the header in desktop view has a height of 100px and the logo is set to 40% of this, it results in a logo size of 40 pixels.

Heights & Spacings

The height (1, 2) of the header can be set separately for mobile display and the variant for larger devices. Additionally, spacing top (3, 4) as well as spacing bottom (4,5) can be set. This can create layouts like in the example.

Example:

Border-radius

Example:

Border bottom

The entire header can be given a lower border to separate it more from the content.

Drop shadow

The entire header can be given a lower drop shadow to separate it more from the content.

The drop shadow can be set differently for three different header states. Drop shadow (1) activates the drop shadow for the header in the normal state. Drop shadow:hover (2) activates the dropshadow only when the mouse is hovered over the header. And Drop shadow:sticky (3) activates the shadow whenever the user scrolls down and the header is displayed fixed. This function only works if the header is also configured as a sticky header, as explained below.

For the Color (2, 5, 8) of the drop shadow, a partially transparent color is usually best suited. In this example, the value is given in rgba, which you can select in the color picker using the alpha transparency. So the value rgba(0,0,0,0.1) is a pure black with 10% visibility.

The Width (3, 6, 9) is to be specified in pixels and indicates how large the shadow is in pixels.

Sticky header

The theme includes the Sticky header feature, which fixes the header to the top of the screen when scrolling down the page. Using the display areas (1) you can specify on which devices the fixed header should be used.

Screen space (viewport) is a resource that must be used wisely, so one should not assume from a misunderstood usability approach that sticky navigation will automatically lead to better usability. Fixed headers consume valuable vertical screen space on the mobile device and do not offer the user enormous added value.

The manual offset (2) value defines the distance from top from when the header should be fixed. Leave the field empty if you want the distance of the header to the top of the browser to be determined automatically. The header will become sticky as soon as the header gets outside the visible area due to scrolling - thereupon the header will appear with an animation and will be fixed.

Option 1: Leyve blank to use automatic calculation
Option 2: If you specify an offset value of 0 fixed, the header will be fixed immediately - without animation.
Option 3: The offset value is always useful when the flyout menu or dropdown menu contains so many entries that the entries will disappear below the browsers fold. If you enter an manuel offset value an additional distance e.g. 600, the user must have at least 600 pixel scrolled down until the header will be fixed. This makes the menu items that disappeared below the browsers fold accessible again when scrolling. The header is not fixed until a later scroll distance.

The Auto hide (3) feature ensures that the complete header is only visible again when the user is about to scroll up.

The Auto hide (3) function improves usability, as it means that even with multi-line headers or very high single-line headers, the viewport is not permanently reduced artificially.

The Different header height:sticky (4) lets you specify an additional (usually lower) Header height:sticky (5). The header can shrink (or grow) to this different height in the sticky state. The setting is intended to give layouts with a large header in particular the opportunity to use the sticky function in a user-friendly manner without covering too many areas with the sticky header.

Search

Depending on the setting of the search (Overlay search, expandable search and standard search), the color fields have a different function. Learn more about the respective function of the color under the help labels.

The basic appearance settings of the search can be found in the tab "General".

Top bar

The basic appearance settings of the Top Bar can be found in the tab "General". There you can set whether the top bar should be displayed as such or converted to an offcanvas element, see examples below.

Colors

Basic configuration

Language switcher text (3): You can distinguish between the representation of the language. Language selection flag (4): Show or hide the country flag. Display service navigation (5): Displays the service navigation in the top bar. The service navigation is also optionally located in the footer bottom area. The service navigation is always displayed in the checkout footer.

Example:

Logo

Logo size (1) defines the height of the logo that will be displayed in the optional offcanvas top bar. If the top bar is shown as a classic line above the header, the logo is omitted.

Example:

Border bottom

Using the option Full width (2) you can stretch the line to the full header width. This way, depending on the chosen basic layout, the line runs to the browsers edges and is not limited by the maximum content width of the online shop.

Colors

In addition to the general settings for the background and foreground colors of the individual elements, you can define a Badge color (1). This affects the badge for logged in users and the badge for the number of items in the wishlist.

Additional you can add a Border (1) to the items and configure their colors with the Border (3) und Boder:hover (4) color fields.

Example:

Basic configuration

Font size (1) & Font weight (2) - Especially when displaying the two-line header, these settings are applied to the language selection, currency selection and service navigation. Tooltips (3) & Tooltips placement (4) - In addition to the icons, tooltips can be positioned and displayed, which clearly explain the function of the icons when mouse-over. Minimize badges (5) - Wishlist, account and shopping cart have so-called badges. These are small labels, which e.g. show the number of products in the wish list. These labels can be minimized to a small point and only show the number when mouseover. This makes the area appear cleaner and tidier in the spirit of a minimal design.

Example:

Cart

The shopping cart can be highlighted using a custom color configurations (1-6).

Depending on the background color you choose, it may make sense to adapt the Badge color (7) to the “number of products in the shopping cart”. The text color of the badge is automatically determined with the optimal contrast in black or white.

Additional you can add a Border (8) to the items and configure their colors with the Border (9) und Boder:hover (10) color fields.

Example:

Basic configuration

Enable or disable the often redundant Home-Link (1) in the menu to save space. You can also decide if the home-link should get an initial active status (2) when visiting the home page of the store.

With the alignment (3) you can align and distribute the menu items horizontally. The separator (4) setting divides the single menu items with a separator.

Choose from 13+ Hover Animation (5) select the appropriate animation for your store.

The Scroller (6) optionally ensures that main navigation categories cannot wrap - no matter how many main categories you want to map. On mobile devices with touch input can be scrolled horizontally, on desktop devices can be reached with the help of arrows (1, 2).

Example:

The option subnavigation appearance (7) provides the ability to replace the standard flyout navigation with a simple dropdown navigation.

Further settings for dropdown navigation can be made in the section Header > Main navigation > Dropdown Navigation

Example:

Border top

Optionally, the main navigation can be separated from the upper header area by a border.

With the help of the setting Full width (1) you can stretch the line to the full header width. This way, depending on the basic layout you choose, the line will run to the edge of the browser and will not be limited by the maximum content width of your online shop.

Example:

With the option arrows (1) you can display small arrows next to the categories which will be displayed if a category has subcategories, see example 1.

Extern-link icon (4) displays the familiar "External Link" icon for categories of type "Link" when it is checked by "Open in new tab". This way your visitors will know exactly what happens when they click on such a link, see example 2.

You set the spacings between each category with Padding left/right (3). Should you use a lot of categories, reduce the spacing between your categories.

Example 1:

Example 2:

Activate the flyout navigation under Header > Main navigation > Basic configuration > Subnavigation appearance

Colors

The background color (1) of the flyout navigation can also be a partially transparent color. Via the colorpicker the visibility can be deposited in the alpha channel.

Text (2) and text:hover (3) colors do not have to be different. When moving the mouse over, the individual entries move a few pixels to the side.

Basic configuration

The flyout navigation is the mega menu in Shopware 6, which displays the subcategories when hovering over them. With full width (1) you set whether the menu should use the full width of the theme. Header line (2) the header containg the text "To category XY >" can be hidden to create a distraction-free design. Various selectable animations (5) round off the concept.

The category image can be disabled by the flyout teaser (3) configuration. Often you want the category image to be the category image in the header of the category, but not visible in the flyout navigation.

Grouping-border left (6) helps to highlight a delimitation of columns for many subcategories, see example 3.

Navigation levels (7) specify how many levels of the category tree should be displayed. Counted is from the main category level.

Caution: In the sales channel settings, the number of main navigation levels must be at least as high as specified here.

This setting fixes the Shopware bugs NEXT-9461 and NEXT-13203.

Cols (8) specifies how many columns the menu items should be arranged in the flyout menu.

Using dynamic column filling (9), the columns are built based on their available space. This means that several main categories can be accommodated in one column.

Category 1 Subcategory Subcategory Subcategory Category 2 Category 3

Category 4 Subcategory Subcategory Subcategory Subcategory Subcategory Subcategory Subcategory

Category 5 Subcategory Subcategory Category 6 Subcategory Subcategory Subcategory

If you activate the Content scrollable (10) option, you define the limit of the flyout and the display of the scroll bars with the maximum height (11). This allows you to ensure that your customers can easily reach all navigation points, even with more extensive navigation - even if the header is sticky.

Items

You can format the individual entries of the flyout navigation.

Example 1:

The background color can also be transparent. With the rgba function a opacoty can be specified in addition to the color.

rgba($sw-color-brand-primary, 90%)

Example 2:

Example 3:

Activate the flyout navigation under Header > Main navigation > Basic configuration > Subnavigation appearance

Colors

The colors for the background (1) as well as foreground (2) of the dropdown navigation can be set independently from the flyout navigation. An additional border (3) can make the dropdown navigation stand out more from the background - there is no :hover color here, as the frame is placed around the whole list.

Basic configuration

A dropdown navigation can basically be triggered by a MouseOver event (Hover event) or a Click event. Via the setting Dropdown trigger (1) you can determine yourself how the dropdown opens.

Die Navigation levels (2) specify how many levels of the category tree should be displayed. Counted is from the main category level.

Since a click event on the parent category (1) does not let this open itself, the dropdown will show the parent category in the dropdown with the additional text "show {category name}" if it is not a structural category.

Unlike the dropdown triggered by a click event, there is no need to include the parent category in the dropdown again.