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 eine Sticky Bar oben auf der Seite ein. Diese kann sich mit dem Header deines Themes überschneiden oder Seiteninhalte dahinter verschieben.
Lösung — versetze deinen Header mit CSS:
.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 sie mit den Inspect-Tools deines Browsers (Untersuchen).
Bessere Lösung: Überprüfe die App-Einstellungen — bei den meisten Sticky-Bar-Apps kannst du die Leistenhöhe konfigurieren und es gibt möglicherweise eine Option zur Integration mit der Header-Positionierung deines Themes.
Widget überlappt Navigation oder Buttons
Z-Index-Konflikte führen dazu, dass Elemente übereinander angezeigt werden, wenn sie es nicht sollten.
Lösung — passe den Z-Index an:
.your-nav-element {
position: relative;
z-index: 1000; /* Höher als das App-Widget */
}Finde den Klassennamen des konfliktverursachenden App-Elements (Rechtsklick → Untersuchen), überprüfe seinen 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, sich auf Mobile mit Sticky ATC Bars zu überschneiden.
Lösung — verschiebe das Chat-Widget:
Die meisten Chat-Apps haben eine Positionierungseinstellung (unten links vs. unten rechts). Wenn sich dein ATC-Button auf der rechten Seite befindet, verschiebe das Chat-Widget nach links.
Oder versetze das App-Widget mit CSS:
@media (max-width: 767px) {
/* Die meisten Chat-Apps haben eine vorhersehbare Klasse oder ID */
#chat-widget-container {
bottom: 80px !important; /* Genügend Abstand zu deiner ATC Bar */
}
}Das !important ist leider oft notwendig, um von der App eingefügte Inline-Styles zu überschreiben.
CLS durch spät ladende App-Inhalte
Wenn eine App Inhalte spät lädt (nachdem die Seite gerendert wurde), kann dies dazu führen, dass Elemente springen.
Lösung — reserviere Platz mit min-height:
.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.
Verwandt: Padding und Margin in Shopify ändern.
Verwandt: Nicht verwendeten Code in Shopify entfernen.
Alternative: Lade das Skript der App früher oder verwende loading="eager" für kritische App-Ressourcen, falls die App dies unterstützt.
Wenn CSS-Overrides nicht ausreichen
Manche App-Konflikte erfordern mehr als nur CSS, um behoben zu werden — das JavaScript der App kollidiert grundlegend mit dem JavaScript deines Themes, oder die App fügt HTML an einer Position ein, die die Struktur deines Themes zerstört.
Optionen:
- Kontaktiere den App-Entwickler mit einem spezifischen Fehlerbericht — er hat vielleicht einen Fix oder einen Workaround
- Verwende eine andere App, die nicht den gleichen Konflikt aufweist
- Entferne die konfliktverursachende App und baue das Feature nativ mit Fudge
Beschreibe Fudge, welches Feature du benötigst:
“Ich habe [App Name] für eine Sticky Announcement Bar verwendet, aber sie kollidiert mit meinem Header. Baue mir eine native Sticky Announcement Bar, 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
Cumulative Layout Shift (CLS). Das Skript der App lädt, nachdem die Seite gerendert wurde, und fügt dann Inhalte ein, die bestehende Inhalte nach unten schieben. Behebe dies, indem du mit min-height auf dem Container der App Platz reservierst oder die App so konfigurierst, dass sie früher lädt. CLS schadet sowohl der UX als auch den Core Web Vitals-Werten.
Davon wird dringend abgeraten. Das Stapeln von Sticky Bars (Ankündigung, Gratisversand-Fortschritt, BFCM-Countdown) zerstört die mobile Usability — der Header nimmt 30%+ des Viewports ein. Wenn du mehrere Sticky-Nachrichten benötigst, verwende eine Bar, die zwischen ihnen rotiert. Um komplett aus dem App-Stack herauszukommen, beschreibe Fudge, was du möchtest ("eine einzelne Sticky Bar, die zwischen Ankündigung, Gratisversand-Fortschritt und aktueller Promo rotiert") und es baut sie nativ in dein Theme ein — eine Bar, keine Überschneidungen, kein App-Overhead.
Chat-Widgets fügen sich in der Regel mit sehr hohen Z-Index-Werten (9999+) und Inline-Styles ein, um alles andere zu überlagern. Überschreibe dies mit CSS, das auf die spezifische Container-ID des Widgets abzielt, und verwende !important bei Z-Index und Positionierung. Einige Chat-Apps haben Einstellungen zur Steuerung des Z-Index — überprüfe zuerst das App-Dashboard.
App Embeds, wenn sie unterstützt werden. Embeds sind der moderne, isolierte Weg, wie Shopify Apps Inhalte einfügen lässt, ohne Theme-Dateien zu ändern — sie lassen sich sauberer deaktivieren und hinterlassen keine Rückstände bei der Deinstallation. Bearbeitungen in der theme.liquid sind persistent und erfordern eine manuelle Bereinigung. Viele Apps verwenden standardmäßig immer noch theme.liquid; frage den Entwickler, ob Embed-Unterstützung verfügbar ist.
Meistens, aber nicht immer. Apps, die Code in die theme.liquid eingefügt haben, hinterlassen diesen Code bei der Deinstallation — suche nach App-spezifischen Snippets und entferne sie manuell. App Embed-basierte Apps räumen beim Deaktivieren automatisch auf. Überprüfe nach der Deinstallation die theme.liquid und alle geänderten Template-Dateien auf verbleibenden App-Code.
Siehe auch: Ein Shopify-Theme beschleunigen.
Verwandt: Verbleibenden App-Code aus Shopify entfernen.