Wichtige Erkenntnisse
- Das Deinstallieren einer Shopify-App entfernt nicht automatisch den Code, der zu deinem Theme hinzugefügt wurde.
- Code-Reste verlangsamen deinen Shop, da Skripte für Dienste geladen werden, die nicht mehr existieren.
- Finde Code-Reste, indem du im Code-Editor deines Themes nach dem App-Namen suchst.
- Arbeite immer an einem Duplikat deines Themes. Bearbeite niemals direkt dein Live-Theme.
Jedes Mal, wenn du eine Shopify-App installierst, die dein Theme verändert, hinterlässt sie Spuren. Wenn du die App deinstallierst, entfernt Shopify die App selbst – aber der Code, der deinem Theme hinzugefügt wurde, bleibt bestehen. Mit der Zeit, wenn du verschiedene Apps ausprobierst, sammelt sich dieser Datenmüll an. Skripte laden für Dienste, die du gar nicht mehr nutzt. CSS-Klassen verweisen auf Styles von Apps, die seit Jahren nicht mehr existieren.
Diese Bereinigung ist eine der am meisten unterschätzten Maßnahmen zur Verbesserung der Shopify-Performance.
Wie lösche ich Code in Shopify?
Die kurze Antwort: Online-Shop → Themes → Aktionen → Code bearbeiten. Dies öffnet den Code-Editor, in dem du alle Theme-Dateien einsehen und bearbeiten kannst. Das Löschen von Code erfordert das Wissen, was sicher entfernt werden kann – die folgenden Schritte helfen dir dabei, dies zu identifizieren.
Schritt 1 – Dupliziere dein Theme, bevor du etwas anfasst
Das ist obligatorisch. Gehe zu Online-Shop → Themes → finde dein aktives Theme → klicke auf das Drei-Punkte-Menü → Duplizieren.
Ein Fehler in der falschen Datei kann dein gesamtes Storefront zerschießen. Wenn du an einem Duplikat arbeitest, kannst du jederzeit zurückkehren, indem du zum Original wechselst.
Schritt 2 – Suche nach dem App-Namen in deinem Theme-Code
Öffne den Code-Editor (Online-Shop → Themes → Aktionen → Code bearbeiten).
Die meisten Code-Editoren haben eine Suchfunktion. Nutze im Editor von Shopify die Suchleiste oben, um nach dem Namen der App zu suchen. Probiere es mit:
- Dem Markennamen der App (z. B. „loox“, „klaviyo“, „privy“, „yotpo“)
- Gängigen App-Identifikationsmustern (
app-name-snippets,app-name-scripts)
Wo du suchen solltest:
theme.liquid – der häufigste Ort für übrig gebliebene Script-Tags. Apps fügen oft JavaScript-Includes im <head> oder vor </body> hinzu. Suche nach <script src="https://app-name.com/...">-Tags, die nach der Deinstallation verbleiben.
snippets/-Ordner – Apps erstellen oft neue Snippet-Dateien (z. B. loox-reviews.liquid, privy-popup.liquid). Diese erscheinen als neue Dateien im Snippets-Ordner, die vor der Installation der App nicht da waren.
sections/-Ordner – einige Apps fügen neue Section-Typen hinzu. Nach der Deinstallation bleibt die Sektionsdatei bestehen, aber die App-Funktionalität ist defekt.
assets/-Ordner – Apps fügen hier manchmal CSS- oder JavaScript-Dateien hinzu.
Schritt 3 – Identifizieren, was sicher entfernt werden kann
Nicht jeder „übrig gebliebene“ Code ist schädlich. Einige Apps fügen Funktionen hinzu, die du auch nach der Deinstallation über das gerenderte HTML weiter nutzt (das ist ungewöhnlich, aber möglich). Überprüfe jedes Codestück, bevor du es löschst.
Sicher zu entfernen, wenn:
- Der Code auf externe Skripte (URLs) von der Domain der App verweist, die nicht mehr geladen werden
- Die Dateien eindeutig nach der deinstallierten App benannt sind
- Das Entfernen des Codes aus der theme.liquid keine sichtbaren Auswirkungen auf das Storefront hat (teste dies auf deinem Duplikat)
Sei vorsichtig bei:
- Generischen Snippet-Namen, die von mehreren Apps oder deinem Entwickler erstellt worden sein könnten
- Code, der in Sections erscheint, die noch aktiv auf deinem Storefront genutzt werden
Schritt 4 – Code entfernen
Für Script-Tags in der theme.liquid: Lösche den gesamten <script>-Tag (einschließlich des öffnenden und schließenden Tags).
Für Snippet-Dateien: Klicke auf die Datei → Löschen über das Drei-Punkte-Menü neben dem Dateinamen.
Für von einer App erstellte Sektionsdateien: Lösche diese nur, wenn die Sektion nicht mehr in Templates oder auf aktiven Seiten verwendet wird.
Nach jedem Löschvorgang solltest du eine Vorschau deines Storefronts aufrufen, um sicherzustellen, dass nichts kaputtgegangen ist.
Häufige Apps, die viel Code hinterlassen
Popup- und Email-Capture-Apps (Privy, Sumo, Justuno) – fügen oft große JavaScript-Dateien in die theme.liquid ein.
Bewertungs-Apps (Yotpo, Loox, Judge.me) – fügen Snippet-Dateien hinzu und rendern oft Code in Produkt-Templates.
Chat-Apps (Gorgias, Tidio, Intercom) – fügen Chat-Widget-Script-Tags in die theme.liquid ein.
Social-Proof-Apps – fügen Benachrichtigungs-Popups über Skripte in der theme.liquid hinzu.
Page-Builder-Apps (wie PageFly, Shogun, GemPages) – können umfangreiche Sektions- und Snippet-Dateien hinterlassen.
Das App-Embed-System von Shopify nutzen, um zukünftige Code-Reste zu vermeiden
Moderne Shopify-Apps nutzen das App Embeds-System (Online-Shop → Themes → Customizer → App Embeds Icon). Wenn eine App App Embeds korrekt nutzt:
- Das Aktivieren/Deaktivieren der App erfolgt über einen Schalter im Theme-Editor
- Das Deinstallieren der App entfernt das Embed automatisch
- Keine manuelle Code-Bereinigung nötig
Achte bei der Auswahl neuer Apps darauf, solche zu bevorzugen, die App Embeds nutzen, anstatt Apps, die dich auffordern, Code in die theme.liquid zu kopieren. Du kannst dies in den Installationsanweisungen der App überprüfen.
Den Theme Inspector nutzen, um langsame Skripte zu finden
Die Chrome-Extension Shopify Theme Inspector zeigt dir, welche Skripte und Assets am meisten zur Ladezeit der Seite beitragen. Führe ihn nach der Bereinigung der Code-Reste aus, um zu bestätigen, dass die Skripte nicht mehr geladen werden.
