So machen Sie Header und Footer-Menü in Shopify sticky (ohne Code-Bearbeitung)

Schnellantwort: Header und Footer-Menü sticky machen

Um den Header sticky zu machen, öffnen Sie Theme-Einstellungen > Header und wählen Sie eine Sticky-Header-Option (Dawn bietet Keine, Beim Nach-oben-Scrollen, Immer und Immer, Logo verkleinern). Da die meisten Themes kein Sticky-Footer-Menü besitzen, fügen Sie eine untere Tab-Bar per CSS oder App hinzu und testen Sie auf einem echten Smartphone.

Befolgen Sie diese drei Schritte, um die Navigation an beiden Bildschirmenden zu fixieren:

1. Header-Einstellung aktivieren: Gehen Sie im Shopify-Adminbereich zu Online Store > Themes > Anpassen. Öffnen Sie den Bereich Header (oder Theme-Einstellungen > Header), wählen Sie das gewünschte Sticky-Header-Verhalten und speichern Sie.
2. Mobile Bottom Tab Bar ergänzen: Da Standard-Themes den Footer als statischen Seitenabschluss behandeln, ergänzen Sie ein fixiertes Menü am unteren Bildschirmrand per CSS oder Navigations-App.
3. Auf echten Geräten prüfen: Testen Sie Ihren Store auf einem Smartphone, um sicherzustellen, dass weder Header noch Fußleiste wichtige Inhalte, Buttons oder System-Gestenleisten verdecken.

Sticky Header vs. Sticky Footer-Menü: Unterschiede und Funktionen

Ein Sticky Header bleibt beim Scrollen dauerhaft am oberen Rand des Browser-Viewports verankert. Er stellt sicher, dass wesentliche Navigationswerkzeuge—wie Markenlogo, Hauptmenülinks, Live-Suche und Warenkorb-Symbol—stets erreichbar bleiben, ohne dass Besucher lange Kategorieseiten wieder ganz nach oben scrollen müssen.

Ein Sticky Footer-Menü hingegen ist keineswegs der reguläre Seiten-Footer mit Impressum, AGB und Zahlungssymbolen. Im modernen Webdesign bezeichnet dieser Begriff eine mobile Bottom Navigation Bar (Tab-Bar), die am unteren Displayrand fixiert ist und einige Kernfunktionen (Startseite, Suche, Menü-Drawer, Wunschliste, Warenkorb) direkt in bequemer Daumenreichweite bündelt.

Sticky vs. Fixed in CSS

In CSS verbleibt ein Element mit position: sticky im regulären Dokumentenfluss, bis eine bestimmte Scroll-Schwelle erreicht wird. Gemäß MDN Web Docs zu CSS position erfordert ein Sticky-Element mindestens einen Schwellenwert (top, bottom, left oder right), um zu greifen. Da das Element seinen Platz im Layout vor dem Anheften behält, verhindert es plötzliche Sprünge.

Im Gegensatz dazu wird ein Element mit position: fixed vollständig aus dem normalen Dokumentenfluss entfernt. Wie MDN Web Docs erläutert, wird im Seitenlayout kein Platz für das Element reserviert, wodurch nachfolgende Inhalte nach oben rutschen und hinter dem fixierten Element verschwinden. Zudem erzeugen sowohl fixed als auch sticky neue Stacking Contexts (Stapelkontexte), was die Wirkung von z-index verändert.

Methode 1: Sticky Header in den Theme-Einstellungen aktivieren

Wenn Ihr Shop auf Shopifys Standard-Theme Dawn oder einem modernen Online Store 2.0 Theme basiert, müssen Sie keinen Code bearbeiten. Die Funktion ist direkt in den visuellen Theme-Editor integriert.

1. Navigieren Sie im Shopify-Adminbereich zu Online Store > Themes.
2. Suchen Sie Ihr Theme und klicken Sie auf Anpassen (Customize).
3. Klicken Sie in der linken Seitenleiste auf den Abschnitt Header (oder öffnen Sie Theme-Einstellungen > Header).
4. Wählen Sie im Dropdown-Menü Sticky Header die gewünschte Option aus und klicken Sie auf Speichern.

Die vier Sticky-Header-Optionen in Dawn

Im Shopify-Theme Dawn stehen vier fest definierte Optionen für den Header zur Verfügung:

Wie im offiziellen Shopify Dawn GitHub Repository dokumentiert, verwendet Dawn on-scroll-up als Standard für sticky_header_type und setzt dies über position: sticky um.

Usability-Forschungen der Nielsen Norman Group zu Sticky Headern bestätigen dieses Konzept: Teilweise persistente Header gehen davon aus, dass jede Aufwärtsbewegung die Absicht signalisiert, zu navigieren oder den Warenkorb aufzurufen. Durch das Ausblenden beim Lesen nach unten bleibt der Blick auf die Produkte frei.

Andere Online Store 2.0 Themes

Andere Online-Store-2.0-Themes bieten möglicherweise eine ähnliche Einstellung, doch Name und Optionen können von Dawn abweichen. Prüfen Sie immer zuerst die nativen Header-Einstellungen; gibt es keine solche Einstellung, nutzen Sie die CSS-Methode weiter unten. Wenn Sie Ihren Store mit Dawn aufbauen, lesen Sie unsere detaillierte Analyse zu Navi+ auf dem Dawn Theme.

Möchten Sie den Ablauf als Video sehen? Dieser Walkthrough zeigt die Einstellung im Theme-Editor:

Methode 2: Header mit benutzerdefiniertem CSS sticky machen

Falls Ihr Theme keine integrierte Einstellung für einen fixierten Header mitbringt, können Sie die Fixierung per CSS erreichen, ohne theme.liquid oder Template-Dateien bearbeiten zu müssen.

Theme zuerst duplizieren

Bevor Sie Stile anpassen, erstellen Sie stets ein Backup Ihres Live-Themes. Wie das Shopify Help Center zum Duplizieren von Themes betont: “Before you customize a theme, it’s a good idea to make a backup copy so that you can discard your changes.”

Gehen Sie zu Online Store > Themes, klicken Sie neben Ihrem aktiven Theme auf die drei Punkte (...) und wählen Sie Duplizieren. Nehmen Sie alle Anpassungen zunächst auf dieser Kopie vor.

Wo das CSS eingefügt wird

Shopify bietet ein eigenes Feld für Benutzerdefiniertes CSS direkt im visuellen Theme-Editor. Öffnen Sie Online Store > Themes > Anpassen, klicken Sie auf das Zahnrad-Symbol (Theme-Einstellungen) und wählen Sie Benutzerdefiniertes CSS.

Laut Shopify-Dokumentation zu benutzerdefiniertem CSS gelten themenweite Regeln für den gesamten Store und sind auf 1.500 Zeichen limitiert. Fügen Sie CSS stattdessen in einem einzelnen Abschnitt ein, wird es isoliert auf diesen beschränkt.

/* Beispiel — Selektoren an Theme anpassen und auf Theme-Kopie testen */
.section-header {
  position: sticky;
  top: 0;
  z-index: 3;
}

Dieser Code wendet position: sticky auf den Header-Container an. Wie auf MDN Web Docs beschrieben, benötigt ein Sticky-Element eine Richtungsschwelle—hier sorgt top: 0 dafür, dass der Header beim Erreichen des oberen Fensterrands andockt. Der Wert z-index: 3 stellt sicher, dass der Header über normalem Text und Bildern liegt.

Vorsicht vor veralteten Foren-Tutorials: Viele ältere Anleitungen in der Shopify Community—etwa für das Debut-Theme (Shopify Community)—nutzen jQuery und manuelle Skripte. Der Beitrag selbst weist darauf hin, dass es sich um eine fortgeschrittene Anleitung handelt, die von Shopify nicht unterstützt wird; übernehmen Sie deren Skripte daher nicht in ein aktuelles Theme. Dieser Leitfaden nutzt nur Theme-Einstellungen und CSS.

Häufige Probleme mit Sticky Headern beheben

Abbildung 1: Konzeptillustration — Behebung von Inhaltsüberlappungen und Stapelkonflikten mit scroll-padding-top.

Das Fixieren einer Menüleiste greift in das Rendering und die Schichtenhierarchie des Browsers ein. Typische Probleme lassen sich fast immer auf vier bekannte CSS-Ursachen zurückführen.

Inhalt wird unter dem Header verdeckt

Das häufigste Problem nach der manuellen Fixierung ist, dass Banner oder Produktüberschriften beim Laden der Seite hinter dem Header verschwinden (Shopify Community Diskussion).

Dies geschieht, wenn versehentlich position: fixed statt position: sticky eingesetzt wurde. Da fixed den Platz im Layout auflöst (MDN Web Docs), rückt der Seiteninhalt nach oben. Der Wechsel zu position: sticky behebt dies in der Regel sofort, da der Platz vor dem Scrollen reserviert bleibt.

Wenn Ihr Layout dennoch ein fixes Element erfordert oder interne Anker-Links (wie #reviews) unter dem Header landen, definieren Sie scroll-padding-top für das HTML-Element. Gemäß MDN Web Docs schließt diese Eigenschaft den verdeckten oberen Viewport-Bereich beim Scrollen aus:

/* Beispiel — Selektoren an Theme anpassen und auf Theme-Kopie testen */
html {
  scroll-padding-top: 80px; /* Platzhalter: durch die gemessene Höhe Ihres eigenen Headers ersetzen */
}

Messen Sie stets die exakte Höhe Ihres Headers mit den Browser-Entwicklertools aus, anstatt statische Zahlenwerte aus Forenbeiträgen ungeprüft zu übernehmen.

Sticky Header haftet nicht (Overflow-Problem)

Ein wiederkehrendes Phänomen ist ein Sticky Header, der nach der Installation einer Slider- oder Banner-App plötzlich nicht mehr am oberen Rand haften bleibt.

Die Ursache liegt in den CSS-Spezifikationen (MDN Web Docs): Ein Sticky-Element haftet an seinem nächsten übergeordneten Element (Ancestor), das einen Scroll-Mechanismus besitzt. Enthält ein Eltern-Element (html, body oder ein Container) die Eigenschaft overflow: hidden, overflow: auto oder scroll, bindet sich der Header an diesen Container statt an das Browserfenster. Entfernen Sie ungewollte overflow: hidden-Angaben an übergeordneten Containern.

Header verschwindet unter anderen Elementen (z-Index)

Beim Scrollen an Videos oder Kundenbewertungs-Widgets vorbei kann der Header hinter diesen Elementen verschwinden. Umgekehrt können Dropdown-Menüs oder Warenkorb-Drawer abgeschnitten werden.

Da fixe und sticky Elemente neue Stapelkontexte (Stacking Contexts) erzeugen (MDN Web Docs), werden Kind-Elemente relativ dazu berechnet. Vergeben Sie für den Header einen angemessenen z-index und stellen Sie sicher, dass Overlays und Cart-Drawer einen höheren Wert als der Header besitzen.

Sticky-Effekt nur auf Mobilgeräten deaktivieren

Auf kleinen Smartphone-Displays kann ein dauerhafter Header zu viel wertvollen Platz beanspruchen. Sie können den Sticky-Effekt über Media Queries auf Desktop-Bildschirme beschränken:

/* Beispiel — Selektoren und Breakpoint (hier 750px) an Theme anpassen und auf Theme-Kopie testen */
@media (min-width: 750px) {
  .section-header {
    position: sticky;
    top: 0;
    z-index: 3;
  }
}

Shopifys Custom-CSS-Feld unterstützt @media-Abfragen (Shopify Help Center). In Dawn können Sie den Header mobil auch auf Keine oder Beim Nach-oben-Scrollen setzen. Vermeiden Sie verzögertes Nachladen von CSS-Klassen per JavaScript, da dies Layout-Sprünge erzeugt. Laut Google web.dev zu Cumulative Layout Shift sollte ein CLS-Wert von 0,1 oder weniger angestrebt werden.

Die folgende Matrix fasst typische Fehlerbilder und deren Behebung übersichtlich zusammen:

Warum die meisten Shopify-Themes kein Sticky Footer-Menü haben

Während Sticky Header weit verbreitet sind, zeigt die zweite Hälfte der Suchanfrage—ein Sticky Footer-Menü—eine deutliche Lücke in der Theme-Architektur.

In Shopify-Themes ist der ‘Footer’ als statischer Inhaltsblock ganz am Ende der Seite konzipiert. Er umfasst mehrere Spalten mit Texten, rechtlichen Hinweisen, Richtlinien und Zahlungssymbolen. Würde man einen vollständigen Theme-Footer am unteren Bildschirmrand fixieren, wäre das Smartphone-Display vollständig blockiert.

Was Shop-Betreiber mit einem ‘Sticky Footer-Menü’ tatsächlich meinen, ist eine mobile Bottom Tab Bar—eine schlanke Navigationsleiste am unteren Bildschirmrand. Da Standard-Themes dies meist nicht mitbringen, wählen Händler zwischen individuellem CSS mit Liquid-Sektionen oder einer spezialisierten App.

Eine Sticky Bottom Bar mit eigenem CSS umsetzen

Bei einer reinen CSS-Umsetzung bildet eine fixierte Leiste am unteren Viewport-Rand die Grundlage:

/* Beispiel — Selektoren an Theme anpassen und auf Theme-Kopie testen */
.my-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #ffffff;
  border-top: 1px solid #e5e7eb;
  z-index: 10;
}

body {
  padding-bottom: 60px;
}

Weil position: fixed die Leiste aus dem Dokumentenfluss nimmt (MDN Web Docs), ist ein entsprechendes padding-bottom für den body zwingend erforderlich. Ohne diesen Abstand verdeckt die Leiste dauerhaft die echten Footer-Links und Chat-Widgets. Beachten Sie, dass Sie HTML-Struktur und Links selbst pflegen und bei jedem Theme-Update überprüfen müssen.

Safe Area auf dem iPhone berücksichtigen

Moderne Smartphones ohne physischen Home-Button (wie neuere iPhones) besitzen am unteren Bildschirmrand einen Home-Indikator für Wischgesten. Liegt eine Leiste direkt am Rand auf, kollidieren die Menü-Icons mit dieser Systemgeste.

Wie in den MDN Web Docs zu CSS env() dargelegt, lässt sich dieser Hardware-Abstand über standardisierte Umgebungsvariablen absichern:

/* Beispiel — Selektoren an Theme anpassen und auf Theme-Kopie testen */
.my-bottom-bar {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

body {
  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}

Durch env(safe-area-inset-bottom) bleiben Navigationsbuttons auf iPhones stets einwandfrei bedienbar. Vertiefende Details zur Daumenergonomie finden Sie in unserem Leitfaden zu Bottom Navigation und Tab Bar Design auf Shopify.

Header und Bottom Tab Bar gemeinsam auf Mobilgeräten nutzen

Abbildung 2: Konzeptillustration — Harmonische Abstimmung zweier fixer Leisten zur Vermeidung von Checkout-Kollisionen.

Der gleichzeitige Einsatz eines Sticky Headers und einer Bottom Tab Bar erfordert eine ergonomische Balance bezüglich der nutzbaren Bildschirmhöhe.

Auf großen Monitoren ist meist genug Platz für einen Header, auf Smartphones zählt jedoch jeder Pixel. Forschungen der Nielsen Norman Group unterstreichen, dass die sparsame Nutzung des Sichtbereichs auf mobilen Bildschirmen oberste Priorität hat.

Wenn beide Leisten permanent stehen, bleibt Besuchern nur ein kleiner Sehschlitz für Produkte. Beachten Sie daher folgende Gestaltungsregeln:

1. Header schlank halten: Nutzen Sie in Dawn die Einstellung Beim Nach-oben-Scrollen, bei der der Header beim Lesen nach unten weicht, oder Immer, Logo verkleinern, damit ein fixierter Header kleiner bleibt.
2. Kollisionen mit Warenkorb-Buttons vermeiden: Manche Themes besitzen auf Produktseiten einen fixierten ‘In den Warenkorb’-Button. Eine starre Bottom Bar kann diesen Button überlagern. Prüfen Sie Produktseiten stets sorgfältig auf echten Smartphones.
3. Fokus-Sichtbarkeit wahren (WCAG 2.4.11): Der Standard W3C WCAG 2.4.11 (Focus Not Obscured - Minimum) schreibt vor, dass tastaturfokussierte Elemente nicht durch fixierte Leisten verdeckt werden dürfen. Die Definition von scroll-padding-top und scroll-padding-bottom (MDN Web Docs) stellt sicher, dass Fokus-Markierungen sauber ins Blickfeld scrollen.
4. Ausreichende Touch-Flächen sicherstellen (WCAG 2.5.8): Laut W3C WCAG 2.5.8 (Target Size - Minimum) müssen Touch-Ziele mindestens 24 x 24 CSS-Pixel groß sein, um Fehleingaben zu vermeiden.

Weitere architektonische Grundlagen finden Sie in unseren Beiträgen zu mobiler Navigation jenseits des Hamburger-Menüs und im Leitfaden für barrierefreie Navigation.

Kompromisse: Wann Menüs nicht sticky sein sollten

Fixierte Leisten sind nützlich, aber nicht für jede Seitenstruktur die beste Wahl. Page Laubheimer fasst es in der Studie der Nielsen Norman Group treffend zusammen: “Sticky headers can be a positive addition to a site, but only if they truly serve a purpose for your users.”

Prüfen Sie diese Rahmenbedingungen vor der Implementierung:

• Single-Product-Stores und schlanke Landingpages: Bei kurzen Seiten ohne tiefen Katalog benötigen Besucher keinen permanenten Zugriff auf Navigationskategorien. Eine fixierte Leiste nimmt hier nur Sichtfeld weg.
• Bestehende schwebende UI-Elemente: Verfügt Ihr Store bereits über fixierte ATC-Buttons, Verkaufs-Popups oder Chat-Widgets, führt eine zusätzliche Fußleiste schnell zu optischer Überladung.
• Wartungsaufwand bei Theme-Updates: Jede Zeile benutzerdefiniertes CSS erfordert eigene Pflege. Wie Shopify in der CSS-Hilfe betont, können Theme-Aktualisierungen Klassennamen verändern und Nachbesserungen erfordern.

Um das passende Navigationskonzept für Ihren Katalogumfang zu bestimmen, nutzen Sie unsere Entscheidungshilfe zur Auswahl des richtigen Menütyps.

Wo Navi+ hilft: Sticky Bottom Tab Bar ohne Programmierung

Zur Klarstellung: Navi+ erstellt und verwaltet keine Sticky Header. Die nativen Theme-Einstellungen (Methode 1) oder Custom CSS (Methode 2) sind und bleiben die beste Wahl für den oberen Seitenbereich.

Navi+ schließt die Lücke am unteren Bildschirmrand—das Sticky Footer-Menü, das Standard-Themes fehlt. Statt Liquid-Templates von Hand zu erstellen und Viewport-Offsets mühsam im CSS zu berechnen, liefert Navi+ eine Tab Bar: eine am unteren Bildschirmrand fixierte Menüleiste, die Sie in der App aus Vorlagen aufbauen.

Das kann die Tab Bar:

• Dauerhafte Verfügbarkeit über alle Seiten: Die Navi+ Tab Bar bleibt auf allen Shopseiten sichtbar (Navi+ Dokumentation); ihre Menüstruktur unterstützt bis zu drei Ebenen.
• Aktivierung ohne Code-Eingriff: Die Einbindung erfolgt über Shopifys offizielle App-Embed-Schnittstelle. Laut Veröffentlichungsanleitung von Navi+ erstellen Sie Ihr Menü in der App, aktivieren unter Online Store > Themes > Anpassen > App-Einbettungen den Store Connector und klicken auf Speichern.
• Anzeigeregeln: Menüs lassen sich nach Gerät (mobil oder Desktop), nach Seitentyp (etwa Start-, Produkt- oder Kollektionsseite) oder nach URL-Stichwörtern ein- oder ausblenden (Navi+ Dokumentation). So können Sie die Tab Bar zum Beispiel nur mobil anzeigen.

Wie bei jeder Designanpassung empfiehlt es sich, die Konfiguration zuerst auf einem duplizierten Theme zu überprüfen (Shopify Anleitung zum Duplizieren).

If you’d rather not maintain custom CSS for the bottom bar, Navi+ Tab Bar gives you a sticky bottom menu you can set up from templates and limit to mobile — try it on a duplicate theme first. Zur offiziellen Dokumentation geht es hier: Tab Bar auf Shopify veröffentlichen.

Aktions-Checkliste

• Theme duplizieren: Vor Änderungen an Einstellungen oder CSS eine Sicherheitskopie unter Online Store > Themes anlegen.
• Sticky-Header-Modus wählen: Geeignete Option in den Theme-Einstellungen auswählen (z. B. ‘Beim Nach-oben-Scrollen’ oder ‘Immer’).
• Scroll-Verhalten prüfen: Auf Kollektions- und Produktseiten auf- und abscrollen, um weiche Übergänge sicherzustellen.
• Anker-Offsets kontrollieren: Interne Sprungmarken (#reviews, #details) testen; bei Bedarf scroll-padding-top nachjustieren.
• Ebenen-Hierarchie sichten: Dropdowns, Mega-Menüs und Slide-Out-Warenkörbe öffnen, um sicherzustellen, dass sie über dem Header liegen.
• Untere Navigationsleiste einrichten: Mobile Tab Bar per CSS oder App integrieren und env(safe-area-inset-bottom) sowie Body-Padding prüfen.
• Produktseiten auditieren: Mobil sicherstellen, dass die untere Leiste den ‘In den Warenkorb’-Button nicht überdeckt.
• Barrierefreiheit und Hardware testen: Fokus mit der Tab-Taste durchlaufen und das Storefront auf physischen iPhones und Android-Geräten prüfen.

FAQ

Wie mache ich Header und Footer-Menü in Shopify sticky?

Für den Header wählen Sie in den Theme-Einstellungen die Sticky-Option (z. B. ‘Beim Nach-oben-Scrollen’ in Dawn). Da Themes kein fixes Footer-Menü mitbringen, ergänzen Sie eine mobile Tab-Bar per CSS oder über ein App-Embed.

Warum wird mein Seiteninhalt hinter dem Sticky Header verdeckt?

Dies geschieht meist durch position: fixed, da dadurch kein Platz im Layout reserviert wird. Die Umstellung auf position: sticky oder das Hinzufügen von scroll-padding-top zum HTML-Tag löst das Problem.

Warum funktioniert mein Sticky Header plötzlich nicht mehr?

Ein Sticky Header verliert seine Haftung, wenn ein übergeordnetes Layout-Element overflow: hidden, scroll oder auto besitzt. In CSS binden sich Sticky-Elemente an den nächsten scrollbaren Ancestor-Container.

Kann ich den Sticky Header auf dem Desktop behalten, aber mobil deaktivieren?

Ja. Bei eigenem CSS binden Sie die Regeln in eine Desktop-Media-Query wie eine min-width-Abfrage ein, die zum Breakpoint Ihres Themes passt. Bei Apps wie Navi+ für die Tab-Bar legen Sie die Anzeigeregel nach Gerät fest, sodass sie nur mobil erscheint.

Verdeckt eine Sticky Bottom Bar den Home-Balken auf dem iPhone?

Ohne Safe-Area-Abstand kann es zu Überlagerungen kommen. Durch die Einbindung von env(safe-area-inset-bottom) im Padding bleibt die Menüleiste oberhalb der Systemgesten voll bedienbar.

Ist ein Sticky Header schlecht für die UX?

Forschungen der Nielsen Norman Group zeigen, dass Sticky Header nützlich sind, wenn sie wichtige Funktionen bereitstellen. Auf Mobilgeräten müssen sie jedoch kompakt sein oder beim Abwärtsscrollen ausblenden.

Quellen

1. Shopify Dawn Theme Locale Schema: locales/en.default.schema.json
2. Shopify Dawn Header Section Source: sections/header.liquid
3. MDN Web Docs — CSS position: developer.mozilla.org/en-US/docs/Web/CSS/position
4. MDN Web Docs — CSS scroll-padding-top: developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top
5. MDN Web Docs — CSS env(): developer.mozilla.org/en-US/docs/Web/CSS/env
6. W3C Web Accessibility Initiative — WCAG 2.4.11 Focus Not Obscured (Minimum): w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html
7. W3C Web Accessibility Initiative — WCAG 2.5.8 Target Size (Minimum): w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
8. Nielsen Norman Group — Sticky Headers (Page Laubheimer): nngroup.com/articles/sticky-headers/
9. Google web.dev — Cumulative Layout Shift (CLS): web.dev/articles/cls
10. Shopify Help Center — Benutzerdefiniertes CSS zum Theme hinzufügen: help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
11. Shopify Help Center — Themes duplizieren: help.shopify.com/en/manual/online-store/themes/managing-themes/duplicating-themes
12. Shopify Community — Diskussion zu Sticky/Fixed Header Menu: community.shopify.com/t/sticky-fixed-header-menu/308093
13. Shopify Community — Anleitung Sticky/Fixed Header für Debut: community.shopify.com/t/sticky-fixed-header-and-navigation-for-debut-theme/3640
14. Navi+ Help Center — Tab Bar auf Shopify veröffentlichen: help.naviplus.io/docs/usage/tabbar-bottom-navigation/publishing-on-shopify/
15. Navi+ Help Center — Tab Bar Nutzung und Ausrichtung: help.naviplus.io/docs/usage/tabbar-bottom-navigation/how-to-use/