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.

Verwandt: Fix Layout Issues After Installing Shopify Apps.

Verwandt: Minify CSS and JavaScript in Shopify.

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-Extension, die anzeigt, welche Liquid-Templates und Assets am längsten zum Rendern brauchen.

So wird er verwendet:

1. Installiere die Extension 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 Extension zeigt die Rendering-Zeit pro Template an.

So erfährst du, welche Seiten und Assets am meisten zu langsamen Ladezeiten beitragen. Konzentriere deine Bereinigungsbemühungen auf die schlimmsten Verursacher.

Speziell für JavaScript: Öffne Chrome DevTools → Network-Tab → filtere nach JS → lade die Seite neu. Sortiere nach Größe, um die größten Skripte zu finden. Stammmen einige davon von Apps, die du nicht mehr verwendest?

Passend dazu: CSS und JavaScript in Shopify minifizieren (2026).

So entfernst du ungenutztes JavaScript in Shopify

Überbleibsel von App-Skripten in theme.liquid. Die häufigste Quelle für nicht genutztes JavaScript. Öffne die 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.

Passend dazu: So entfernst du App-Code-Reste aus Shopify (2026).

Nicht verwendete 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 nach dem Dateinamen in den Liquid-Dateien deines Themes — wenn nichts die Datei rendert oder einbindet, kann sie entfernt werden.

Section JavaScript-Blöcke. Wenn du eine Section aus all deinen Templates gelöscht, aber die Dateiversion der Section behalten hast, wird deren {% javascript %}-Block immer noch in das Haupt-JavaScript-Bundle deines Themes kompiliert. Lösche nicht verwendete Section-Dateien 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“ (orphaned), wenn kein Template, keine Section und kein anderes Snippet es rendert.

Verwaiste Snippets finden:

1. Gehe zum Ordner snippets/ im Code-Editor.
2. Suche bei jeder verdächtigen Datei (besonders bei solchen mit App-Namen) in deinem gesamten Theme nach dem Dateinamen des Snippets.
3. Suche nach {% render 'snippet-name' %} oder {% include 'snippet-name' %}.
4. Wenn es keine Ergebnisse gibt: Das Snippet ist verwaist und kann gelöscht werden.

Passend dazu: So behebst du Layout-Probleme nach der Installation von Shopify-Apps (2026).

Häufige verwaiste Snippets: Dateien, die nach Apps benannt sind (loox-widget.liquid, privy-form.liquid), alte Funktions-Snippets aus 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 der theme.liquid) — jedes davon ist ein HTTP-Request an einen externen Server.
2. Große JavaScript-Dateien in assets/ — besonders alles über 50KB.
3. Nicht verwendete CSS-Stylesheets — insbesondere solche, die über die theme.liquid auf jeder Seite geladen werden.
4. Verwaiste Snippets und Sections — geringere Auswirkung, aber gut für die Ordnung.

Passend dazu: So beschleunigst du ein Shopify-Theme (2026).

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.