Wie man Layout-Probleme nach der Installation von Shopify-Apps behebt (2026)

Das Wichtigste in Kürze

• Apps, die Inhalte einfügen, können andere Elemente verschieben, die Navigation überlagern oder Layout Shifts verursachen.
• Finde den Fehler, indem du Apps nacheinander deaktivierst und prüfst, ob das Problem verschwindet.
• Häufige Lösungen: Anpassung des CSS z-index, Margin-Overrides, um Sticky Bars auszugleichen, und das Deaktivieren von fehlerhaften App-Einbettungen (App Embeds).
• Fudge kann durch App-Code verursachte Layout-Konflikte erkennen und beheben, ohne dass du manuell CSS schreiben musst.

Um Layout-Probleme nach der Installation einer Shopify-App zu beheben, finde zuerst die verantwortliche App, indem du die App-Einbettungen im Theme-Editor nacheinander ausschaltest. Behebe den Konflikt dann mit CSS (Header-Offsets, z-index, einem min-height Platzhalter) oder den eigenen Positionseinstellungen der App.

Typische Probleme: Sticky Announcement Bars schieben Inhalte hinter deinen Header, Chat-Widgets überlagern deinen Add-to-Cart-Button auf dem Smartphone, und das Popup einer App versteckt sich hinter deiner Navigation.

Schritt 1 — Finde heraus, welche App das Problem verursacht

Bevor du etwas reparierst, finde heraus, welche App verantwortlich ist.

Methode — Deaktiviere Apps nacheinander:

1. Gehe zu Onlineshop → Themes → Anpassen → App-Einbettungen (App Embeds)
2. Schalte eine App nach der anderen aus
3. Überprüfe dein Storefront (Vorschau) nach jedem Ausschalten
4. Wenn das Problem verschwindet, hast du den Übeltäter gefunden

Bei Apps, die Code über die theme.liquid (statt über App-Einbettungen) einfügen, musst du ihre Script-Tags suchen und auskommentieren, um sie zu testen.

Teste immer an einem duplizierten Theme, um nicht aus Versehen deinen Live-Shop kaputtzumachen.

Häufige Layout-Probleme und Lösungen

Eine Sticky Announcement Bar schiebt den Seiteninhalt nach unten

Einige Apps fügen oben auf der Seite eine Sticky Bar ein. Diese kann sich mit dem Header deines Themes überschneiden oder den Seiteninhalt 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 Entwicklertools (Inspect) deines Browsers.

Bessere Lösung: Überprüfe die Einstellungen der App — die meisten Sticky-Bar-Apps lassen dich die Höhe der Leiste konfigurieren und bieten oft eine Option, um sich in die Header-Positionierung deines Themes zu integrieren.

Ein Widget überlagert die Navigation oder Buttons

Z-index-Konflikte führen dazu, dass Elemente übereinander angezeigt werden, wenn sie es eigentlich nicht sollten.

Lösung — Passe den Z-index an:

.your-nav-element {
    position: relative;
    z-index: 1000; /* Höher als das Widget der App */
}

Finde den Klassennamen des fehlerhaften App-Elements heraus (Rechtsklick → Untersuchen / Inspect), prüfe seinen berechneten z-index und setze den z-index deines Elements höher.

Ein Chat-Widget verdeckt den Add-to-Cart-Button auf dem Smartphone

Chat-Widgets (Gorgias, Tidio, Intercom) sind berüchtigt dafür, auf mobilen Geräten Sticky-ATC-Bars (Add-to-Cart) zu überlagern.

Lösung — Verschiebe das Chat-Widget:

Die meisten Chat-Apps haben eine Einstellung zur Positionierung (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: 749px) {
    /* Die meisten Chat-Apps haben eine vorhersehbare Klasse oder ID */
    #chat-widget-container {
        bottom: 80px !important; /* Genügend Abstand zu deiner ATC-Leiste */
    }
}

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 bereits gerendert wurde), kann das dazu führen, dass Elemente springen. Dies nennt man Cumulative Layout Shift (CLS), und es schadet sowohl der Shopping-Experience als auch deinem PageSpeed-Score.

Lösung — Reserviere Platz mit min-height:

.app-widget-container {
    min-height: 200px; /* Ungefähre Höhe des Widgets */
}

Das verhindert das Springen der Seite, indem der Platz freigehalten wird, bevor das Widget lädt.

Alternative: Frage den App-Entwickler, ob das Widget einen Platzhalter mit fester Höhe rendern kann.

Um Skripte zu finden, die Apps hinterlassen, schau dir an, wie man ungenutzten Code in Shopify entfernt.

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 Stelle ein, die die Struktur deines Themes zerstört.

Optionen:

• Kontaktiere den App-Entwickler mit einem spezifischen Bug-Report — vielleicht gibt es bereits einen Fix oder einen Workaround
• Nutze eine andere App, die nicht denselben Konflikt verursacht
• Entferne die problematische App und baue das Feature nativ mit Fudge

Fudge, der KI-Operator für Shopify-Stores, baut das Feature als Teil deines Themes nach. Beschreibe einfach, was du brauchst:

„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 mit meinem Theme korrekt funktioniert.“

Du kannst die native Version neben der alten testen, bevor sich für deine Kunden etwas ändert. Sobald du die App deinstallierst, kann Fudge den Code finden, den sie in deinem Theme hinterlassen hat, und dir einen Bereinigungsentwurf zur Genehmigung vorschlagen.

Wie du nach der Deinstallation einer App manuell aufräumst, erfährst du hier: Wie man App-Code-Reste aus Shopify entfernt.

Wie man Layout-Probleme bei der Installation neuer Apps vermeidet

Lies die Installationsanweisungen sorgfältig durch. Apps, die die theme.liquid verändern oder bei denen du Code in dein Theme einfügen musst, bergen ein höheres Risiko als Apps, die App-Einbettungen (App Embeds) nutzen.

Teste an einem duplizierten Theme. Apps werden im gesamten Shop installiert, aber du kannst die Embeds oder Blöcke der App zuerst in einem duplizierten Theme einschalten, sie dir in der Vorschau ansehen und sie erst dann im Live-Theme aktivieren.

Überprüfe die Bewertungen der App auf Layout-Beschwerden. Wenn andere Händler von Konflikten mit gängigen Themes (Dawn, Craft, Sense) berichten, ist das ein Warnsignal.

Minimiere die Gesamtzahl deiner Apps. Jede App birgt das Potenzial für einen Konflikt. 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 das, weil er für dein Theme geschrieben wird und nur dort lädt, wo er gebraucht wird.

FAQ