Alles, was Sie wissen sollten bevor Sie installieren.
Ein detaillierter Blick darauf, wie Custom Code Manager — CSS / JS Snippets für Shopware 6 funktioniert, warum wir es so gebaut haben und der Gedanke hinter den Funktionen oben.
Warum ein dedizierter Custom-Code-Manager
Im echten Leben eines Shopware-Shops häufen sich grafische und verhaltensbezogene Anpassungsbedürfnisse: ein Promo-Banner für die Sale-Zeit, ein Neu-Abzeichen auf bestimmten Produkten, ein angereichertes GTM-Event, um Conversions besser zu messen, ein Opt-in-Dark-Mode für Nutzer, die ihn fordern, ein schneller A/B-Test auf der Farbe des In-den-Warenkorb-Buttons. Die Standardpraxis besteht darin, das Theme per SSH zu bearbeiten oder Drittanbieter-Plugins zu stapeln, die jeweils ihre eigene kleine CSS-Datei in die Seite einfügen. Das Ergebnis? Theme-Dateien, die unmöglich zu warten sind, beim Update vergessene Änderungen, Ladezeiten, die wegen der zusätzlichen Anfragen anwachsen. Custom Code Manager bringt eine einfache Antwort: ein einziges Plugin, eine dedizierte Oberfläche, alle Ihre Anpassungen nach Thema gruppiert an einem Ort, direkt in das native Shopware-Bundle eingefügt.
Die Magie der direkten Injektion in die Kompilierung
Die meisten Plugins, mit denen man benutzerdefiniertes CSS hinzufügen kann, funktionieren, indem sie eine zusätzliche Datei im Head-Tag der Storefront laden. Das ist einfach umzusetzen, kostet aber eine zusätzliche HTTP-Anfrage pro Besucher und umgeht die Shopware-Optimierungskette (Konkatenation, Minifizierung, Cache-Fingerprinting) komplett. Custom Code Manager geht den entgegengesetzten Weg: Es abonniert die Theme-Kompilierungs-Events (ThemeCompilerEnrichScssVariablesEvent, ThemeCompilerConcatenatedStylesEvent, ThemeCompilerConcatenatedScriptsEvent) und hängt Ihren Code direkt an das von Shopware erzeugte Haupt-CSS- und JavaScript-Bundle an. Konkrete Konsequenzen: null zusätzliche Anfragen für den Besucher, Ihr SCSS profitiert automatisch von den Variablen und Mixins des aktiven Themes, und die gesamte Browser-Cache-Kette funktioniert exakt wie mit nativem Theme-Code.
Container, Snippets, Priorität: das mentale Modell
Das Plugin ist auf zwei Ebenen organisiert. Ein Container ist eine logische Gruppierung: Sommer-Promo 2026, GTM-Analytics, Dark-Mode-Opt-in, CTA-Button-A/B-Test usw. Jeder Container kann ein oder mehrere Snippets enthalten, und jedes Snippet ist entweder SCSS oder JavaScript. Sowohl Container als auch Snippets haben ihre eigene Lade-Priorität (eine Ganzzahl, höher, um später im Bundle eingefügt zu werden) und ihren eigenen Aktiv-/Inaktiv-Schalter. Sie können also einen ganzen Container vorübergehend deaktivieren oder ein konkretes Snippet deaktivieren, ohne seinen Code zu verlieren. Und der Multi-Channel-Geltungsbereich erlaubt Ihnen, einen Container nur einigen Shops Ihrer Shopware-Instanz vorzubehalten.
Versionshistorie und Safe-Mode: das Sicherheitsnetz
Sobald ein Snippet gespeichert wird, wird automatisch eine Version erstellt. Das Plugin bewahrt die letzten 5 Versionen pro Snippet auf, was die Rückgängigmachung-Bedürfnisse nach einem Fehler weit abdeckt. Das Historie-Modal ermöglicht schnelles Vergleichen und Wiederherstellen einer früheren Version in einem Klick. Und für die Panikmomente, in denen eine schlecht getestete Änderung etwas in der Produktion kaputt macht, deaktiviert der globale Safe-Mode (ein einfacher Schalter in der Shopware-Plugin-Konfiguration) sofort jeden Container, ohne dass diese einzeln bearbeitet werden müssen. Es genügt, das Theme neu zu kompilieren, und die Storefront ist wieder in ihrem vorherigen Zustand. Dieses Sicherheitsnetz macht den gesamten Unterschied aus, wenn man um 22 Uhr allein an einem Zwischenfall arbeitet.
Vorlagen-Bibliothek, um schneller zu starten
Für die häufigsten Anwendungsfälle muss das Rad nicht neu erfunden werden. Das Plugin enthält eine Bibliothek mit 8 sofort in einem Klick installierbaren Vorlagen: einen Sticky-Header, der sich beim Scrollen verwandelt, einen Nach-Oben-Button, ein Re-Skinning des nativen Cookie-Banners, um es an Ihre Markenrichtlinien anzupassen, ein Neu-Abzeichen auf kürzlichen Produkten, eine Gratisversand-Leiste mit Fortschrittsbalken, einen Look mit abgerundeten Buttons im ganzen Shop, ein GTM-DOM-Ready-Event, um Ihre Data-Layer vorzubereiten, und einen progressiven Fade-In-Effekt auf Elementen beim Scrollen. Klick auf Installieren, der Container und die Snippets werden erstellt, Sie kompilieren neu, es ist online.
Validierung, Import-Export, Multi-Umgebung
Jedes Snippet kann vor dem Speichern syntaktisch validiert werden, was verhindert, dass Code gepusht wird, der die Theme-Kompilierung zerstören würde. Das SCSS wird trocken mit den echten Theme-Variablen kompiliert, um defekte Referenzen zu erkennen, und JavaScript durchläuft eine Klammergleichgewichtsprüfung nach dem Strippen von Strings und Kommentaren. Um Ihre Snippets zwischen Entwicklungs-, Staging- und Produktionsumgebungen zu verschieben, erzeugt der Exportieren-Button eine JSON-Datei der Auswahl (ein oder mehrere Container mit all ihren Snippets), die Sie auf der anderen Seite reimportieren. Auch praktisch, um eine interne Bibliothek zwischen mehreren Shops Ihrer Gruppe zu teilen.
Was das Plugin nicht tut
Custom Code Manager konzentriert sich bewusst auf CSS- und JavaScript-Code, der in die Storefront-Theme-Kompilierung eingefügt wird. Es berührt kein PHP, modifiziert keine Twig-Templates, kümmert sich nicht um SEO-Meta, generiert keine Script-Tags im Storefront-Head und funktioniert nicht auf Shopware Cloud (der von Shopware gehosteten SaaS-Version, die keine Installation von Server-Plugins zulässt). Für diese Bedürfnisse decken andere Plugins der DataFirefly-Reihe diese Bereiche ab. Diese Fokussierung ist beabsichtigt: ein Plugin, eine Aufgabe, gut erledigt.
Es gibt noch keine Rezensionen.