In this tutorial you will learn all about the ThemeWare® Shopping Experiences Header.
In the so-called ThemeWare® Shopping Experiences Header, the header overlays the Shopping Experience on the main page or on selected category pages. This is a configurable effect to enable a particular look in ThemeWare®.
You are able to de-/activate the "Shopping Experiences Header" via the ThemeWare® configuration.
The corresponding configuration is available in the Tab "Header" => Block "Shopping Experiences Header" => Field "Shopping Experiences Header".
Option "don't apply (default)":
This option virtually is the default header representation.
The Shopping Experience is placed after the header. The header does not overlay the Shopping Experience.
In order that the "ThemeWare® Shopping Experiences Header" can develop its full effect, the Shopping Experience on your main page needs a suitable Shopping Experience element in the first place. Especially suitable are blocks like "Image, full-sized" or "Image slider" out of the block category "Image".
The images used should be sufficiently large (e.g. 1920x1024px) and thus compressed as well as possible. In addition, you should choose or create motifs in which as little as possible "happens" in the upper area of the image, in order that the logo, buttons and navigation are still easily recognizable.
Screenshots
Option "apply (Header overlays the Shopping Experience)":
This option is the "ThemeWare® Shopping Experiences Header".
The Shopping Experience will be pushed behind the header, in order that the header overlays the Shopping Experience.
For the perfect look of the "Shopping Experiences Header" it is important to configure the background color of the actual header "transparent".
Furthermore, you may create a separate logo for the "ThemeWare® Shopping Experiences Header": Tab "Layout" => Block "Media" => Field "Logo (Shopping Experiences Header)".
ThemeWare® "Shopping Experiences Header" in the Outdoor theme
ThemeWare® Outdoor without "Shopping Experiences Header"
Highlighting a category in the navigation
With ThemeWare® you highlight a single category in the top navigation with colour – for example your sale, new arrivals or promotion category. This way you deliberately draw your customers' attention to the menu item that matters most to you.
Note: A category is only highlighted if the "Highlight category" custom field is set to "yes" for it. The theme configuration only controls the appearance of the highlighting.
Requirements
a category you want to highlight in the top navigation
the "Top navigation" layout type in the header (the highlighting does not apply to the "Entry point main navigation")
Define here how a highlighted menu item should look – for example via the "Text colour (highlighted)", "Background colour (highlighted)" and "Icon colour (highlighted)" (each also for the @hover and @active state). Save your changes.
Set the option in the "Highlight category" custom field to "yes" and save the category.
The selected category now appears in the chosen look in the top navigation. If the highlighting does not show up, clear the Shopware cache once.
You can find all configuration options and the custom field in detail in the ThemeWare® manual:
Step 2: Highlight the category
Note: You will find the custom field in the category editor on the "General" tab. Repeat this step for every additional category you want to highlight.
Result
ThemeWare® Tip: Use the highlighting sparingly – a single highlighted menu item catches the eye far more than several at once.
With ThemeWare® you extend the flyout of your top navigation with up to three teasers featuring an image, text and link. Highlight promotions, topic worlds or top products right in the mega menu and guide your customers straight from the navigation to the matching destination.
Note: The teasers are maintained per category via custom fields and appear next to the subcategories in the "ThemeWare® Flyout" as soon as you select the matching flyout type in the theme configuration.
Requirements
a category in the top navigation whose flyout you want to extend with teasers
one to three images for the teasers in the Shopware media manager
optionally the target URLs (links) for the teasers
The "Top navigation flyout" field offers several ways to display the submenus (see the "More flyout modes" section below). For the teasers, choose "ThemeWare® Flyout with teasers" and save your changes.
"Catalogues" => "Categories" => select category => "General" tab => "Custom fields" block => "Flyout (... Pro)" custom field set
Fill in the following custom fields per teaser (up to 3 teasers are available):
Flyout teaser 1–3 – Image – the teaser image from the media manager
Flyout teaser 1–3 – Text – the text below the image
Flyout teaser 1–3 – Link – the target URL; the whole teaser is clickable
Save the category.
When you open the category's flyout in the top navigation, the teasers now appear next to the subcategories. If nothing shows up, clear the Shopware cache once.
The "Top navigation flyout" field generally controls how the submenus of your top navigation are displayed – the teasers are just one of several modes:
Shopware default – the native Shopware navigation (without the ThemeWare® flyout)
ThemeWare® Flyout – the standard flyout with the subcategories
ThemeWare® Dropdown – the submenus as a compact dropdown
Regardless of the mode, you decide how the individual menu items in the submenu look.
"Theme manager" => your ThemeWare® theme => "Header" tab => "Top navigation flyout" area => "Basic configuration 'ThemeWare® Flyout'" section => "Style" field
List (Shopware 6) – a line to the left of the categories
List – arrows in front of the categories
List in columns (Shopware 5) – the arrangement from Shopware 5's "Advanced Menu"; only applies to the "ThemeWare® Flyout" mode
The dropdown has its own selection in the "Basic configuration 'ThemeWare® Dropdown'" section: "List", "Buttons (compact)" and "Buttons".
You set the colours of the surfaces and the glass effect in the same area in the "Colour configuration" section – via "Background colour (menu items)" including @hover and @active as well as "Glass effect [px] (panel)".
You can find all layout types and styles with example images in the ThemeWare® manual:
All configuration fields of the flyout in detail:
The teaser custom fields in detail:
ThemeWare® Flyout with cards – shows the direct subcategories as image cards
ThemeWare® Flyout with sidebar – flyout with a side navigation bar
ThemeWare® Flyout with teasers – the flyout with teasers described in this guide
Buttons – every category gets its own surface with rounded corners
Step 1: Choose the flyout type in the theme
Step 2: Add the teasers to the category
Note: Leave the image empty to hide a teaser. The image's alternative text is taken from the media manager.
Result
ThemeWare® Tip: Use meaningful alternative texts in the media manager – they improve accessibility and SEO. If you want to set the flyout type differently for a single category, use the category custom field "Top navigation flyout".
More flyout modes
Note: You set the mode globally in the theme configuration. Using the category custom field "Top navigation flyout" you can override it per category – this only takes effect if the global setting is not "Shopware default".
Layout examples
Appearance of the menu items
ThemeWare® tip: The glass effect blurs the page content behind the submenu. It only becomes visible once you choose a semi-transparent colour for the "Background colour (panel)" – a value of 10 is a good starting point.
