Sticky Header einrichten – ganz ohne Plugin

Gerade im Standard-Theme von Shopware 6 fehlt eine kleine, aber sehr hilfreiche Funktion: ein sogenannter „Sticky Header“. Dabei bleibt die Hauptnavigation beim Scrollen oben am Bildschirm fixiert. Das verbessert die Nutzererfahrung enorm – und sorgt dafür, dass Besucher länger im Shop bleiben, da sie jederzeit bequem zu anderen Kategorien oder Seiten wechseln können.

In diesem Tutorial zeige ich Dir, wie Du mit dem Plugin „Custom JavaScript/CSS Manager“ ganz einfach einen Sticky Header umsetzt – auch wenn Dein aktuelles Theme diese Funktion nicht unterstützt.

Videoanleitung

Warum ein Sticky Header sinnvoll ist

Wenn ein Kunde durch Deinen Shop scrollt, verschwindet normalerweise die Navigation aus dem Sichtfeld. Das ist ungünstig, denn um zur nächsten Kategorie zu wechseln oder zur Startseite zurückzukehren, muss er wieder ganz nach oben scrollen. Das kostet Zeit und kann dazu führen, dass Nutzer den Shop aus Frust früher verlassen.

Ein Sticky Header bleibt hingegen immer sichtbar – das Menü „klebt“ oben am Bildschirm, egal wie weit nach unten gescrollt wird. Das ist nicht nur nutzerfreundlich, sondern erhöht auch die Verweildauer im Shop.

Schritt-für-Schritt-Anleitung: Sticky Header einrichten

Damit das Ganze funktioniert, brauchst Du das Plugin „Custom JavaScript/CSS Manager“, das ganz einfach über den Store installiert werden kann. Damit kannst Du individuelle CSS- oder JavaScript-Regeln ohne eigenes Theme hinterlegen – ideal für solche Anpassungen.

Schritt 1: Plugin öffnen und neuen Container anlegen

1. Öffne im Shopware-Adminmenü den Bereich Erweiterungen -> „Custom CSS / JS“.
2. Klicke auf „Container hinzufügen“.
3. Vergib einen sinnvollen Namen – zum Beispiel „Sticky Header“.

Schritt 2: CSS-Code einfügen

Füge nun den folgenden CSS-Code in das große Textfeld ein:

.nav-main {
    position  : sticky;
    top       : 0;
    z-index   : 10;
    background: $sw-color-brand-primary;
}

Dieser kleine Codeschnipsel sorgt dafür, dass das Navigationselement .nav-main immer oben am Bildschirm bleibt, sobald ein Besucher scrollt. Die z-index-Angabe stellt sicher, dass der Header über anderen Elementen bleibt, und der background weist der Navigationszeile die Primärfarbe des Shops zu. Das hilft, visuelle Fehler zu vermeiden, wenn sich der Hintergrund beim Scrollen ändert.

Weitere Beispiele für eine passende Hintergrundfarbe:

• $sw-color-brand-secondary = Sekundärfarbe des Verkaufskanals
• $sw-text-color = Textfarbe des Verkaufskanals
• $sw-background-color = Hintergrundfarbe des Verkaufskanals
• $sw-border-color = Rahmenfarbe des Verkaufskanals

All diese Farbcodes sind im Theme eingetragen, welche deinem Shop zugewiesen sind.

Natürlich kannst du auch einen ganz eigenen Farbcode hinterlegen, dann sieht die background Angabe entsprechend so aus:

background: #eee;

Hier wurde der feste Farbwert eee hinterlegt, was einem dezenten grau entspricht und auch im Screenshot zu sehen ist.

Schritt 3: Speichern und testen

Klicke nun auf Speichern und Kompilieren, damit die Änderungen in deinem Theme hinterlegt werden. Sofort danach kannst Du Deinen Shop im Frontend neu laden und testen: Sobald Du scrollst, bleibt die Navigation nun oben kleben.

Fazit

Mit nur wenigen Handgriffen hast Du eine Funktion in Deinen Shop integriert, die in vielen Themes fehlt – und das ganz ohne zusätzliches Plugin oder Theme-Anpassung. Der Sticky Header sorgt dafür, dass Deine Besucher sich besser zurechtfinden und mehr Zeit im Shop verbringen, weil sie jederzeit auf die Navigation zugreifen können.

Diese Methode ist besonders praktisch, wenn Du ein Standard-Theme nutzt oder keine größeren Design-Anpassungen vornehmen möchtest. Und das Beste: Du brauchst keine Agentur dafür – ein paar Klicks und ein bisschen CSS reichen völlig aus.