Configuring the Shopping Experiences Header

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®.

In themes like ThemeWare® Exquisite, ThemeWare® Lights or ThemeWare® Outdoor the "Shopping Experiences Header" is already configured. The corresponding look you may have a look at in the corresponding demo shops:

1. Theme configuration

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".

  1. 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.

  2. 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 "Images" => Field "Logo (Shopping Experiences Header)".

2. 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.


Last updated


© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH