Das Wichtigste in Kürze
- Apps, die Inhalte einfügen, können andere Elemente verschieben, die Navigation überlagern oder Layout-Shifts verursachen.
- Zur Diagnose kannst du Apps einzeln deaktivieren und prüfen, ob das Problem dadurch behoben wird.
- Häufige Lösungen: Anpassungen des CSS Z-Index, Margin-Overrides zum Ausgleich von Sticky Bars und das Deaktivieren von App-Embeds, die Konflikte verursachen.
- Fudge kann durch App-Code verursachte Layout-Konflikte erkennen und beheben, ohne dass du manuell CSS schreiben musst.
Wenn man eine neue Shopify-App installiert und dann feststellt, dass sie das Layout zerschossen hat, ist das extrem nervig. Sticky Announcement-Bars schieben Inhalte hinter deinen Header. Chat-Widgets überlagern auf dem Smartphone deinen Add-to-Cart-Button. Der Z-Index eines App-Popups platziert es unverrückbar hinter deiner Navigation. Das sind alles lösbare Probleme – du musst nur wissen, wo du suchen musst.
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.
Siehe auch: Speed Up a Shopify Theme.
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.
Verwandt: Remove Leftover App Code from Shopify.
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 verzögert lädt (nachdem die Seite bereits gerendert wurde), kann dies dazu führen, dass Elemente springen.
Lösung — Platz reservieren mit min-height:
.app-widget-container {
min-height: 200px; /* Ungefähre Höhe des Widgets */
}Dies verhindert das Springen der Seite, indem der Platz belegt wird, bevor das Widget geladen ist.
Verwandt: Padding und Margin in Shopify ändern.
Verwandt: Nicht verwendeten Code in Shopify entfernen.
Alternative: Laden Sie das Skript der App früher oder verwenden Sie loading="eager" bei kritischen App-Ressourcen, falls 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
Lesen Sie die Installationsanweisungen sorgfältig durch. Apps, die theme.liquid verändern oder Sie dazu auffordern, Code in Ihr Theme einzufügen, bergen ein höheres Risiko als Apps, die App-Embeds verwenden.
Testen Sie auf einem Staging-Theme. Duplizieren Sie immer Ihr aktives Theme, installieren Sie die App auf dem Duplikat und testen Sie alles gründlich, bevor Sie die Änderungen auf Ihrem Live-Theme aktivieren.
Überprüfen Sie die App-Bewertungen auf Beschwerden zum Layout. Wenn andere Händler von Konflikten mit gängigen Themes (Dawn, Craft, Sense) berichten, ist das ein Warnsignal.
Minimieren Sie die Gesamtzahl der Apps. Jede App ist ein potenzieller Konfliktherd. Jede App fügt Skripte, Styles und HTML hinzu, die nicht speziell für Ihr Theme entwickelt wurden. Mit Fudge erstellter nativer Code vermeidet dies vollständig.
Siehe auch: Ein Shopify-Theme beschleunigen.
Verwandt: Übriggebliebenen App-Code aus Shopify entfernen.
FAQ
Kumulativer Layout-Shift (CLS). Das Skript der App wird geladen, nachdem die Seite gerendert wurde, und fügt dann Inhalte ein, die bestehende Elemente nach unten schieben. Das lässt sich beheben, indem du mit min-height Platz für den App-Container reservierst oder die App so konfigurierst, dass sie früher lädt. CLS schadet sowohl der UX als auch deinen Core Web Vitals-Werten.
Davon wird dringend abgeraten. Das Stapeln von Sticky Bars (Ankündigungen, Gratis-Versand-Fortschritt, BFCM-Countdown) ruiniert die mobile Usability — der Header nimmt dann schnell 30 % und mehr des Viewports ein. Wenn du mehrere Sticky-Nachrichten brauchst, nutze eine Leiste, die zwischen ihnen rotiert. Um diesen ganzen App-Stack komplett loszuwerden, kannst du Fudge einfach beschreiben, was du brauchst ("eine einzige Sticky Bar, die zwischen Ankündigung, Gratis-Versand-Fortschritt und aktueller Promo rotiert"), und es baut das nativ in dein Theme ein – eine Bar, keine Überlappungen, kein App-Overhead.
Chat-Widgets schleusen sich meistens mit extrem hohen Z-Index-Werten (9999+) und Inline-Styles ins Theme ein, um alles andere zu überlagern. Du kannst das mit CSS überschreiben, indem du direkt auf die spezifische Container-ID des Widgets abzielst und !important für Z-Index und Positionierung nutzt. Manche Chat-Apps haben auch Einstellungen, um den Z-Index zu steuern – check also am besten zuerst das App-Dashboard.
App-Embeds, sofern sie unterstützt werden. Embeds sind der moderne, isolierte Weg, den Shopify anbietet, damit Apps Inhalte einfügen können, ohne Theme-Dateien zu verändern – man kann sie sauber deaktivieren und sie hinterlassen beim Deinstallieren keine Code-Reste. Änderungen an der theme.liquid sind dauerhaft und müssen manuell bereinigt werden. Viele Apps nutzen standardmäßig noch die theme.liquid. Frag einfach bei den Entwicklern nach, ob sie auch App-Embeds unterstützen.
Meistens, aber nicht immer. Apps, die Code direkt in die theme.liquid geschrieben haben, lassen diesen meist bei der Deinstallation zurück – suche nach App-spezifischen Snippets und entferne sie manuell. Apps, die über App-Embeds arbeiten, bereinigen sich nach dem Deaktivieren in der Regel von selbst. Überprüfe nach einer Deinstallation am besten kurz die theme.liquid und alle bearbeiteten Template-Dateien auf Code-Reste.
Siehe auch: Shopify-Theme schneller machen.
Passend dazu: Übrig gebliebenen App-Code aus Shopify entfernen.