Wichtige Erkenntnisse
- Apps, die Inhalte einfügen, können andere Elemente verschieben, die Navigation verdecken oder Layout-Verschiebungen verursachen.
- Diagnose durch Deaktivieren der Apps nacheinander, um zu prüfen, ob das Problem behoben wird.
- Gängige Lösungen: CSS z-index Anpassungen, Margin-Overrides für Sticky-Bars und Deaktivieren kollidierender App Embeds.
- Fudge kann durch App-Code verursachte Layout-Konflikte identifizieren und beheben, ohne dass du CSS manuell schreiben musst.
Eine neue Shopify-App zu installieren und festzustellen, dass sie dein Layout zerschossen hat, ist ein weit verbreitetes Ärgernis. Sticky-Ankündigungsleisten schieben Inhalte hinter deinen Header. Chat-Widgets verdecken deinen Warenkorb-Button auf dem Handy. Der Z-Index eines Popups platziert es hinter deiner Navigation. Dies sind lösbare Probleme – man muss nur wissen, wo man suchen muss.
Wie behebt man den Cumulative Layout Shift?
Cumulative Layout Shift (CLS) ist ein spezifisches Layout-Problem, bei dem sich Elemente nach dem ersten Laden der Seite bewegen – meist weil das Skript einer App spät geladen wurde und Inhalte verschoben hat. Das schadet sowohl der User Experience als auch deinem Google PageSpeed Score.
Die Lösung: Stelle sicher, dass für App-Widgets im Seitenlayout Platz reserviert ist, bevor sie geladen werden. Dies geschieht häufig durch das Festlegen einer min-height für die Container-Elemente der App.
Schritt 1 — Diagnose, welche App das Problem verursacht
Bevor du etwas reparierst, bestätige, welche App verantwortlich ist.
Methode — Apps einzeln deaktivieren:
- Gehe zu Onlineshop → Themes → Anpassen → App-Einbettungen
- Deaktiviere eine App nach der anderen
- Überprüfe dein Storefront nach jedem Umschalten
- Wenn das Problem verschwindet, hast du den Übeltäter gefunden
Bei Apps, die Code über die theme.liquid einfügen (statt über App-Einbettungen), musst du deren Script-Tags finden und auskommentieren, um sie zu testen.
Teste immer in einem Duplikat deines Themes, um zu vermeiden, dass du versehentlich deinen Live-Shop beschädigst.
Häufige Layout-Probleme und Lösungen
Sticky-Ankündigungsleiste verschiebt Seiteninhalt nach unten
Einige Apps fügen oben auf der Seite eine fixierte Leiste ein. Diese kann den Header deines Themes überlappen oder Seiteninhalte dahinter schieben.
Lösung — Header mit CSS versetzen:
.shopify-section-header-sticky,
.header-wrapper {
top: 40px; /* Höhe der Sticky-Bar der App */
}Ersetze 40px durch die tatsächliche Höhe der App-Leiste. Miss diese mit den Browser-Entwicklertools (Untersuchen).
Bessere Lösung: Überprüfe die Einstellungen der App – die meisten Sticky-Bar-Apps erlauben es, die Höhe der Leiste zu konfigurieren, und bieten oft eine Option zur Integration in die Header-Positionierung deines Themes.
Widget überlappt Navigation oder Buttons
Z-Index-Konflikte führen dazu, dass Elemente übereinander erscheinen, wenn sie es nicht sollten.
Lösung — Z-Index anpassen:
.your-nav-element {
position: relative;
z-index: 1000; /* Höher als das Widget der App */
}Finde den Klassennamen des betreffenden App-Elements (Rechtsklick → Untersuchen), prüfe den berechneten Z-Index und setze den Z-Index deines Elements höher.
Chat-Widget verdeckt den Warenkorb-Button auf dem Handy
Chat-Widgets (Gorgias, Tidio, Intercom) sind berüchtigt dafür, Sticky-Buttons zum Warenkorb auf Mobilgeräten zu verdecken.
Lösung — Chat-Widget verschieben:
Die meisten Chat-Apps haben eine Einstellung für die Positionierung (unten links vs. unten rechts). Wenn dein ATC-Button rechts ist, verschiebe das Chat-Widget nach links.
Oder versetze das Widget der App mit CSS:
@media (max-width: 767px) {
/* Die meisten Chat-Apps haben eine vorhersehbare Klasse oder ID */
#chat-widget-container {
bottom: 80px !important; /* Abstand zu deinem ATC-Button */
}
}Das !important ist leider oft notwendig, um von der App injizierte Inline-Styles zu überschreiben.
CLS durch spät ladende App-Inhalte
Wenn eine App Inhalte spät lädt (nachdem die Seite bereits gerendert wurde), kann dies dazu führen, dass Elemente springen.
Lösung — Platz mit min-height reservieren:
.app-widget-container {
min-height: 200px; /* Ungefähre Höhe des Widgets */
}Dies verhindert das Springen der Seite, indem der Platz freigehalten wird, bevor das Widget lädt.
Alternative: Lade das Skript der App früher oder verwende loading="eager" für kritische App-Ressourcen, sofern die App dies unterstützt.
Wenn CSS-Overrides nicht ausreichen
Einige App-Konflikte erfordern mehr als nur CSS – das JavaScript der App kollidiert grundlegend mit dem JavaScript deines Themes oder die App fügt HTML an einer Stelle ein, die die Struktur deines Themes bricht.
Optionen:
- Kontaktiere den App-Entwickler mit einem spezifischen Fehlerbericht – oft haben sie einen Fix oder Workaround.
- Nutze eine andere App, die diesen Konflikt nicht hat.
- Entferne die problematische App und erstelle das Feature nativ mit Fudge.
Beschreibe das benötigte Feature für Fudge:
“Ich habe [App-Name] für eine Sticky-Ankündigungsleiste genutzt, aber sie kollidiert mit meinem Header. Bau mir eine native Sticky-Ankündigungsleiste, die korrekt mit meinem Theme funktioniert.”
Layout-Probleme bei der Installation neuer Apps vermeiden
Lies die Installationsanweisungen sorgfältig durch. Apps, die die theme.liquid ändern oder bei denen du Code in dein Theme kopieren musst, bergen ein höheres Risiko als Apps, die App-Einbettungen nutzen.
Teste in einem Staging-Theme. Dupliziere immer dein aktives Theme, installiere die App im Duplikat und teste gründlich, bevor du sie in deinem Live-Theme aktivierst.
Prüfe die App-Bewertungen auf Layout-Beschwerden. Wenn andere Händler Konflikte mit gängigen Themes (Dawn, Craft, Sense) melden, ist das ein Warnsignal.
Minimiere die Gesamtzahl der Apps. Jede App ist ein potenzieller Konfliktherd. Jede App fügt Skripte, Styles und HTML hinzu, die nicht speziell für dein Theme entwickelt wurden. Nativer Code, der mit Fudge erstellt wurde, vermeidet dies komplett.
