Ungenutzten Code in Shopify entfernen (2026)

Wichtige Erkenntnisse

• Ungenutzter Code sammelt sich durch deinstallierte Apps, alte Theme-Anpassungen und nicht verwendete Abschnitte an.
• Nutze den Shopify Theme Inspector (Chrome-Erweiterung), um herauszufinden, welche Assets am langsamsten laden.
• Finde verwaiste Snippets und Abschnitte, indem du nach deren Dateinamen in den Liquid-Dateien deines Themes suchst.
• Arbeite immer an einem Duplikat deines Themes. Das Löschen von falschem Code kann deinen Shop zerstören.

Jedes Mal, wenn du eine App installierst, eine Anpassung ausprobierst oder dein Theme aktualisierst, sammelt sich Code an. Totis CSS. Script-Tags für Apps, die du vor zwei Jahren deinstalliert hast. Snippet-Dateien, die nirgendwo gerendert werden. Mit der Zeit macht dieser ungenutzte Code deinen Shop langsamer, ohne einen Mehrwert zu bieten.

Diesen Code aufzuräumen ist eine der effektivsten Performance-Verbesserungen, die du vornehmen kannst – und es kostet nichts außer Zeit.

Wie lösche ich Code in Shopify?

Gehe zu Online-Shop → Themes → Aktionen → Code bearbeiten. Dies öffnet den Code-Editor, in dem du alle Theme-Dateien einsehen kannst. Einzelne Dateien können hier bearbeitet oder gelöscht werden.

Wichtige Erinnerung: Dupliziere dein Theme, bevor du Code anfasst. Online-Shop → Themes → Drei-Punkte-Menü → Duplizieren.

Schritt 1 — Mit dem Theme Inspector langsame Assets identifizieren

Der Shopify Theme Inspector ist eine kostenlose Chrome-Erweiterung, die anzeigt, welche Liquid-Templates und Assets am längsten zum Rendern benötigen.

So benutzt du ihn:

1. Installiere die Erweiterung aus dem Chrome Web Store.
2. Öffne deinen Shop und drücke F12, um die Chrome DevTools zu öffnen.
3. Wechsle zum Tab “Theme Inspector”.
4. Navigiere durch deinen Shop — die Erweiterung zeigt die Rendering-Zeit pro Template an.

Das verrät dir, welche Seiten und Assets am meisten zu langsamen Ladezeiten beitragen. Konzentriere dich beim Aufräumen auf die schlimmsten Verursacher.

Speziell für JavaScript: Öffne die Chrome DevTools → Tab “Netzwerk” → Filter auf JS setzen → Seite neu laden. Sortiere nach Größe, um die größten Skripte zu finden. Stammmen welche davon von Apps, die du nicht mehr nutzt?

So entfernst du ungenutztes JavaScript in Shopify

Überreste von App-Skripten in theme.liquid. Die häufigste Quelle für ungenutztes JavaScript. Öffne theme.liquid im Code-Editor und suche nach Script-Tags, die auf Drittanbieter-Domains von Apps verweisen, die du deinstalliert hast.

<!-- Beispiel für ein übrig gebliebenes Skript einer deinstallierten Popup-App -->
<script src="https://privy.com/scripts/privy.js"></script>

Lösche den gesamten <script>-Tag, wenn die App nicht mehr installiert ist.

Ungenutzte JavaScript-Dateien in assets/. Öffne den Ordner assets/ im Code-Editor. Suche nach .js-Dateien mit Namen, die auf Apps oder Funktionen verweisen, die du nicht mehr nutzt. Suche den Dateinamen in den Liquid-Dateien deines Themes — wenn die Datei nirgendwo gerendert oder eingebunden wird, kann sie entfernt werden.

Abschnitt-JavaScript-Blöcke. Wenn du einen Abschnitt aus all deinen Templates gelöscht, aber die Datei des Abschnitts behalten hast, wird dessen {% javascript %}-Block immer noch in das Haupt-JavaScript-Bundle deines Themes kompiliert. Lösche ungenutzte Abschnittsdateien vollständig.

So entfernst du ungenutztes CSS

Ungenutzte Stylesheet-Dateien in assets/. Suche nach .css-Dateien von alten Apps oder Anpassungen. Gleicher Prozess: Suche den Dateinamen in Liquid-Dateien, um zu sehen, ob sie geladen werden.

Toter CSS-Code in base.css. CSS-Regeln für Abschnitte oder Elemente, die nicht mehr existieren. Dies ist manuell schwer zu prüfen. Tools wie PurgeCSS (kein natives Shopify-Tool, aber nützlich für Analysen) können CSS-Selektoren identifizieren, die mit keinem HTML auf deinen Live-Seiten übereinstimmen.

Der praktische Ansatz: Konzentriere dich darauf, klar benannte und offensichtlich veraltete CSS-Blöcke zu entfernen, anstatt zu versuchen, jede einzelne Regel in der base.css zu prüfen. Die größten Erfolge erzielst du durch das Entfernen ganzer Stylesheets, nicht einzelner Regeln.

Wie man verwaiste Snippets findet und entfernt

Ein Snippet ist „verwaist“, wenn kein Template, kein Abschnitt und kein anderes Snippet es rendert.

Verwaiste Snippets finden:

1. Gehe zum Ordner snippets/ im Code-Editor.
2. Suche für jede verdächtige Datei (besonders solche mit App-Namen) dein gesamtes Theme nach dem Dateinamen des Snippets ab.
3. Suche nach {% render 'snippet-name' %} oder {% include 'snippet-name' %}.
4. Wenn keine Ergebnisse vorliegen: Das Snippet ist verwaist und kann gelöscht werden.

Häufige verwaiste Snippets: Dateien, die nach Apps benannt sind (loox-widget.liquid, privy-form.liquid), alte Funktions-Snippets von früheren Theme-Anpassungen und doppelte Snippet-Versionen.

So findest du ungenutzte Abschnitte (Sections)

Abschnitte werden verwendet, wenn sie in der JSON-Datei eines Templates referenziert oder von einem anderen Abschnitt gerendert werden.

Template-Dateien prüfen:

1. Öffne den Ordner templates/.
2. Jede .json-Template-Datei listet auf, welche Abschnitte auf diesem Seitentyp erscheinen.
3. Wenn eine Abschnittsdatei existiert, aber in keinem Template aufgeführt ist, wird sie nicht verwendet (obwohl sie eventuell über „Abschnitt hinzufügen“ im Theme-Editor zugänglich ist).

Bei Abschnitten, die einmal zu einer Seite hinzugefügt und dann wieder entfernt wurden, kann es sein, dass sie auf keiner Seite mehr erscheinen, die Datei aber noch existiert. Diese können sicher gelöscht werden.

Prioritätenliste für das Aufräumen

Nicht jeder ungenutzte Code hat die gleiche Auswirkung auf die Performance. Konzentriere dich auf diese Reihenfolge:

1. Externe Skripte (App-Script-Tags in theme.liquid) – jedes einzelne ist ein HTTP-Request an einen externen Server.
2. Große JavaScript-Dateien in assets/ – besonders alles über 50KB.
3. Ungenutzte CSS-Stylesheets – besonders solche, die über die theme.liquid auf jeder Seite geladen werden.
4. Verwaiste Snippets und Abschnitte – geringere Auswirkung, aber gut für die Ordnung.

Den integrierten Theme Check von Shopify nutzen

Zu den Theme-Entwicklungstools von Shopify gehört der Theme Check, der eine Reihe von Code-Problemen markiert, darunter ungenutzte Variablen und veraltete Liquid-Syntax. Für Händler (im Gegensatz zu Entwicklern) ist dieser schwerer zugänglich – es ist primär ein CLI-Tool.

Der Shopify Code-Editor zeigt jedoch einige grundlegende Warnungen an, und der Theme Inspector deckt den Performance-Aspekt für die meisten Aufräumarbeiten gut genug ab.