Mache den Header beim Scrollen sticky. Verkleinere ihn (kleineres Logo, sekundäre Nav ausblenden) mit einem dezenten Schatten. Halte Warenkorb, Suche und Account sichtbar.
Want more control? See the expanded prompt ›
Mache den Header beim Scrollen sticky. Wenn der Nutzer am Hero vorbeiscrollt, verkleinere den Header (kleineres Logo, sekundäre Navigation ausblenden) und fixiere ihn mit einem dezenten Schatten am oberen Rand. Halte die Icons für Warenkorb, Suche und Account immer sichtbar.
- Bleibt erst sticky, nachdem am Hero vorbeigescrollt wurde.
- Verkleinert sich (kleineres Logo, weniger Nav), um Platz zu sparen.
- Zeigt immer Warenkorb, Suche und Account an.
- Reines CSS wo möglich; IntersectionObserver für den Trigger.
Was du erreichen willst
Auf langen Seiten — und die meisten E-Commerce-Seiten sind lang — verschwindet der Header in dem Moment, in dem Käufer anfangen zu scrollen. Ein Sticky Header hält Warenkorb, Suche und die wichtigste Navigation immer erreichbar und beseitigt die Reibung des „Zurück-nach-oben-Scrollens“, die dich Adds-to-Cart und suchgetriebene Entdeckungen kostet.
Worauf du achten solltest
- Hero-Überlappung: Fudge wartet, bis der Hero-Bereich vorbei ist, bevor der Header sticky wird.
- Mobile: Der Sticky-Header verbraucht auf mobilen Geräten weniger vertikalen Platz.
- Beim Herunterscrollen ausblenden: Optional wird der Header ausgeblendet, wenn Käufer nach unten scrollen, und erscheint wieder, wenn sie nach oben scrollen.
- Performance: Reines CSS, wo immer möglich, mit einem winzigen Skript für die Scroll-Erkennung.
Wie Fudge das macht
Fudge dupliziert dein Live-Theme in einen Entwurf, baut die Section als bearbeitbare Shopify-Section mit der Platzierung und dem Verhalten, das dein Prompt verlangt, und verknüpft sie mit deinen echten Produktdaten und deinem Marken-Styling. Alles startet als Entwurf — schau dir die Vorschau in deinem Store an, nimm Anpassungen über den Theme Editor vor und veröffentliche erst, wenn du bereit bist. Dein Live-Shop bleibt dabei unangetastet.
Warum Sticky Header die Conversion verbessern
Ein Header, der beim Scrollen oben bleibt (Sticky Header), hält Warenkorb, Suche und Account immer zugänglich — das beseitigt die Reibung des „Zurück-nach-oben-Scrollens“, die Conversions kostet. Wenn sich der Header beim Scrollen verkleinert, bleibt er nützlich, ohne den Viewport zu dominieren.
Wann sich der Einbau lohnt
Baue den Sticky Header für jeden Shop mit relevanter Scroll-Tiefe auf Produktdetailseiten (PDPs) oder Kategorie-Seiten. Überspringe das bei winzigen Katalogen, bei denen Kunden nicht scrollen.
Was einen guten ausmacht
- Kompakt beim Scrollen — kleineres Logo, versteckte sekundäre Navigation.
- Warenkorb, Suche, Konto immer sichtbar — häufig genutzte Icons.
- Dezenter Schatten beim Fixieren (Sticky) — optische Tiefe ohne Ablenkung.
- Sanfter Übergang — kein hartes Einrasten.
Kombiniere das mit einer auffälligen Suchleiste in der Navigation und einem Mega-Menü.
Fudge baut das mit seinem Store-Editor.