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
- Überlappung mit dem Hero — Fudge wartet mit dem Fixieren, bis am Hero vorbeigescrollt wurde.
- Mobile — Fudge kümmert sich darum: Ein Sticky Header verbraucht mobil weniger vertikalen Platz.
- Beim Runterscrollen ausblenden — Fudge kümmert sich darum: Optionales Verhalten, bei dem sich der Header beim Runterscrollen ausblendet und beim Hochscrollen zurückkehrt.
- Performance — Fudge kümmert sich darum: reines CSS wo möglich; winziges 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
- Beim Scrollen verkleinert — kleineres Logo, sekundäre Navigation ausblenden.
- Warenkorb, Suche, Account immer sichtbar — oft genutzte Icons.
- Dezenter Schatten beim Fixieren — optische Tiefe ohne Ablenkung.
- Sanfter Übergang — kein abruptes Einrasten.
Kombiniere das mit einer prominenten Suchleiste in der Navigation und einem Mega-Menü.