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