Zenit Design - Themes
Buy themeThemesSupport
EN
EN
  • First steps
  • Start Guides
    • Atmos - Demo 1
    • Atmos - Demo 2
    • Atmos - Demo 3
    • Atmos - Demo 4
    • Gravity - Demo 1
    • Gravity - Demo 2
    • Horizon - Demo 1
    • Horizon - Demo 2
    • Sphere - Demo 1
    • Sphere - Demo 2
    • Stratus - Demo 1
    • Stratus - Demo 2
    • Stratus - Demo 3
    • Stratus - Demo 4
  • Tips
    • Dashboard
    • Theme configuration
    • Dictionary
    • Multiple sales channels
  • Configuration sets
  • Support
    • Read errors
    • Find cause
  • 🎨Styling
    • General
      • Basic layout
      • Product images
      • Produkt Layout-Typ
      • Global background
      • Preloader
      • Accent line
      • Scroll animation
    • Typo & Colors
      • Theme colors
      • Status messages
      • Fonts
      • Typography
      • E-Commerce
      • Buttons
    • Logos
    • Header
      • Header
      • Search
      • Top bar
      • Shop navigation
      • Main navigation
      • Flyout navigation
      • Dropdown navigation
    • Footer
      • Footer
      • Content
      • Columns
      • Columns styling
      • Footer bottom
    • Components
      • Sidebar
      • Sidebar navigation
      • Forms
      • Image & gallery slider
      • Produkt slider
      • Category Listing Slider
      • Pagination
      • Breadcrumbs
      • Cookie banner
      • Offcanvas
      • Backdrop
      • Scroll-Up button
    • Category
      • Category header
      • Hero section
      • Filter
      • Listing actions
      • Product boxes
      • Quickview
    • Product
      • Detail
      • Gallery
      • Description
      • Description navigation
      • Description content
    • Checkout
      • Cart
      • Checkout
  • ⚙️SETTINGS
    • Basic settings
    • Custom field assignment
      • Custom fields for product page details
      • Custom fields for product datasheets
    • Social media icons
    • Marketing text slider
    • Custom tab details page
    • Custom footer columns
    • Custom code
  • 📂Contents
    • Shopping experiences
      • Sections
      • Blocks
        • Elements
          • Image text slider
          • Search banner
          • Text banner
          • Teaser
          • Features
          • Breadcrumbs
          • Code
          • Divider
          • Category-navigation
          • Footer navigation
          • Placeholder
        • Commerce
          • Image gallery and buy box with product name & manufacturer logo
          • Image gallery and buy box with product name & manufacturer logo & description
          • Image gallery and buy box with description
          • Image gallery with description and buy box with product name & manufacturer logo
        • Category
          • Category listing
        • Columns
        • Layouts
      • Block inner spacings
      • Block outer spacings
      • Animations
      • CSS Variables
    • Category
      • Hero section
      • Category header
      • CSS classes
      • Category badges
      • Category Icons
      • Products per row
    • Product page
      • Layouts
      • Default layout
      • Gallery mode
      • Custom tabs
      • Videos tab
      • Datasheets
    • Product images
      • Image sizes
      • Aspect ratio
      • File format
      • Product image background
    • Layout type
    • Responsive tables
    • Multilingualism
  • 🎓Tutorials
    • Demodata import
    • Demo theme configuration import
    • Duplicate Child-Theme
    • Customizations
    • Configuration export/import
    • Custom Fields export/import
    • Embed fonts locally
    • Embed fonts locally with child-theme
  • 🛠️Update Guides
    • Child theme update
    • Shopware 6.7.0.0
    • Shopware 6.6.9.0
    • Shopware 6.6.0.0
    • Shopware 6.5.0.0
    • Theme 3.5.3
    • Theme 2.11.0
  • ❓FAQ
    • Overview
    • Accessibility
      • Typography
      • Colors
      • Images
      • Video
      • Accessibility checker and resources
    • General
      • Copyright notice
      • Wishlist
    • Product layout
    • Licenses
      • Trial version vs full version
      • Changing the licence domain
    • Derivations
      • Child theme
      • Theme duplicate
      • Child theme vs theme duplicate
    • Updates
      • Theme is displayed as incompatible
      • Update is not displayed
    • Known issues
      • Could not assign child-theme
      • Text modules show technical name
      • Theme save error
      • SVG logo is not displayed
      • Search / Input mobile zoom
      • Text is not visible / readable
Powered by GitBook
On this page
  • Configuration per category
  • Overlay header
  • Header contrast
  • Global configuration
  • Overlay header
  • Header contrast
  • Combine overly header and category image

Was this helpful?

  1. Contents
  2. Category

Category header

You can create a very special design by overlaying the shopping experiences with a transparent or partially transparent header.

Last updated 10 months ago

Was this helpful?

The effect looks best when the header overlays elements of the shopping experience. This can be, for example, simple images or even slider elements as well as videos.

Examples:

Configuration per category

If you want to apply this effect to control each category individually, we have implemented custom fields in the category - this setting is located in the custom fields of your category: Catalogues > Categories > [select category]

Overlay header

  • Header overlay (1) [ Inherit | Yes | No ]

  • Header background opacity (2) [ Percentage value ]

  • Main navigation background opacity (3) [ Percentage value ]

Header contrast

Header contrast (4) If the header is set in such a way that it overlays the elements of the shopping experience, contrast problems may arise due to the selected foreground color of the elements of the header. Therefore, choose a contrast header type:

  • Default header: The header remains colored as defined in the theme configuration.

  • Light header - dark text: The foreground colors become dark. Improves the contrast when bright images / elements of the shopping experiences are to be overlaid.

  • Dark header - light Text: The foreground colors become bright. Improves the contrast when dark images / elements of the shopping experiences are to be overlaid.

  • Inverted header: Foreground colors and background colors are swapped. The result depends heavily on the colors set in the header configuration. Depending on the colors you have set, the result varies greatly. Whether the contrast improves with light or dark images / elements of the shopping experiences also depends on your header configuration.

Examples:

Global configuration

Using the theme configuration, the settings for displaying the overlay header can also be set globally for all categories and partially overridden in the respective category.

The additional fields in the category inherit this setting by default and can also overwrite it again. This also makes it possible to exclude individual categories from these functionality.

If you want to display an overlay header on all but a few categories, then you don't have to repeat these settings in each category.

Overlay header

  • Header overlay (1) [ Inherit | Yes | No ]

  • Header background opacity (2) [ Percentage value ]

  • Main navigation background opacity (3) [ Percentage value ]

Header contrast

Header contrast (1) If the header is set in such a way that it overlays the elements of the shopping experience, contrast problems may arise due to the selected foreground color of the elements of the header. Therefore, choose a contrast header type:

  • Default header: The header remains colored as defined in the theme configuration.

  • Light header - dark text: The foreground colors become dark. Improves the contrast when bright images / elements of the shopping experiences are to be overlaid.

  • Dark header - light Text: The foreground colors become bright. Improves the contrast when dark images / elements of the shopping experiences are to be overlaid.

  • Inverted header: Foreground colors and background colors are swapped. The result depends heavily on the colors set in the header configuration. Depending on the colors you have set, the result varies greatly. Whether the contrast improves with light or dark images / elements of the shopping experiences also depends on your header configuration.

Examples:

Combine overly header and category image

In this context, you often want to display a category image under the overlay header and possibly also display the category description (example 2). Learn more about this in the article about category images:

📂
Hero section
Partially transparent header overlays a slider element of the shopping experience world
Transparent header overlays a section of the shopping experience world
Catalogues > Categories > [select category] > Custom fields > header
Default header
Dark header - light text
Theme configuration > Tab: Category > Section: Category header > Block: Overlay header
Theme configuration > Tab: Category > Section: Category header > Block: Header contrast
Default header
Dark header - light text