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.

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.

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-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.”

Baue native Shopify-Features ohne App-Konflikte — mit Fudge.

Try Fudge for Free

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.