Hero-Overlay (boutique-hero-overlay)

Mit der Klasse boutique-hero-overlay läuft ein Bild randlos hinter der durchscheinenden, klebenden Navigation durch — der typische „Nav über Hero"-Look: Das Foto beginnt ganz oben am Viewport, die Navigation schwebt transparent darüber und die Nav-Schrift kippt auf eine helle Farbe.

Die Klasse wirkt auf die oberste Section und funktioniert mit dem Hero-Slider ebenso wie mit dem Parallax-Zitat. Beim Parallax-Zitat bestimmt dessen Einstellung Bandhöhe, wie weit das Bild nach unten reicht — bei 100 % füllt es den Bildschirm wie ein Hero.

Voraussetzung: Theme-Einstellung

Der Effekt greift nur, wenn im Theme-Manager unter „Container & Hero" die Einstellung auf „Nav über Hero" steht (Standard). Steht sie auf „Nav unter Hero", bleibt die Navigation als deckende Leiste oben — die Klasse hat dann keine Wirkung.

So trägt man sie ein

1. Im Page-Builder die oberste Section auswählen, die das Hero-Bild enthält.
2. Zahnrad/Einstellungen → Feld „CSS-Klasse".
3. boutique-hero-overlay eintragen. Lässt du die Klasse weg, beginnt das Bild normal unterhalb der Navigation.

Was passiert

• Das Bild wird um die Nav-Höhe nach oben gezogen und füllt den Bereich bis ganz oben.
• Die Navigation wird transparent mit leichtem Frosted-Glass-Effekt; Wortmarke, Tools und Menü-Links kippen auf die helle Seitenfarbe.
• Sobald man am Hero vorbeiscrollt, schaltet die Navigation per JavaScript wieder in den deckenden Zustand mit dunkler Schrift zurück (Umschaltpunkt: Hero zu ~60 % aus dem Bild).

Logo auf dunklem Hero

Ist kein helles Logo hinterlegt, wird das dunkle Wortmarken-Logo automatisch hell gefiltert. Für sauberste Darstellung kann im Theme-Manager eine helle Logo-Variante hinterlegt werden — sie wird im Overlay-Zustand automatisch eingeblendet.

Zusammenspiel mit der Breadcrumb

Auf Kategorieseiten würde die Standard-Breadcrumb mit dem randlosen Hero kollidieren. Deshalb blendet das Theme die Breadcrumb auf Seiten mit einer Hero-Overlay-Section automatisch aus (display: none). Die strukturierten Daten (BreadcrumbList) für SEO bleiben davon unberührt.

Breadcrumb generell ausblenden

Unabhängig vom Hero gibt es die Theme-Einstellung „Core-Breadcrumb ausblenden" (boutique-hide-core-breadcrumb), die die Standard-Breadcrumb shopweit unterdrückt. Wer trotzdem eine Breadcrumb möchte, platziert das CMS-Element Boutique-Breadcrumb gezielt im Layout.