JTL-Shop NOVA Template Anpassung — CSS-Editor, Child-Template-Ordner und Farbpalette im Überblick

JTL-Shop NOVA Template anpassen — CSS, Farben, Responsive und häufige Fallstricke

Das NOVA Template ist das Standard-Template für JTL-Shop 5. Wer einen frisch eingerichteten Shop hat, startet damit und stößt früher oder später auf die Frage: Wie passe ich das Erscheinungsbild an mein Branding an, ohne bei jedem Update alles zu verlieren? Die gute Nachricht ist, dass JTL dafür ein sauberes System mitliefert. Die weniger gute Nachricht: Es gibt einige Stellen, an denen Händler regelmäßig in die gleichen Fallen tappen. NOVA löst das Ablösung-Problem mit einem Child-Template-Konzept, das bei richtiger Nutzung Update-sicher ist.

Du willst JTL-Shop NOVA Template anpassen, ohne dass das nächste Shop-Update alles überschreibt?

Dieser Beitrag zeigt dir, wie wir das strukturiert angehen: vom einfachen Farb-Tweak über Schriften und Buttons bis hin zum richtigen Child-Template-Aufbau. Inklusive der Fehler, die uns in Kundenprojekten am häufigsten begegnen.

Auf einen Blick

  • ✓Das JTL-Shop NOVA Template bietet drei Anpassungswege: den Theme-Editor im Admin-Backend, benutzerdefiniertes CSS/SCSS in den Template-Einstellungen und ein eigenes Child-Template. Wir setzen ab mehr als drei Design-Änderungen immer auf das Child-Template.
  • ✓Farben, Schriften und Button-Stile landen in der _variables.scss des jeweiligen Themes. Wer diese Datei direkt im NOVA-Ordner bearbeitet, verliert seine Änderungen beim nächsten Shop-Update. Die Lösung: alle Anpassungen ins Child-Template auslagern.
  • ✓Die häufigsten Fallstricke die Vlarom E-Commerce Agentur in Kundenprojekten sieht: CSS-Cache nicht geleert, Variablen in falscher Reihenfolge definiert, Bild-Größen nicht konfiguriert und Mobile-Ansicht nicht separat auf echten Geräten getestet.

Aus unserer Praxis mit JTL-Shop-Projekten zeigt sich: Die meisten Design-Probleme beim NOVA Template entstehen nicht durch falsche CSS-Regeln, sondern durch den falschen Anpassungsweg. Wer direkt im NOVA-Ordner editiert, hat beim nächsten Update einen kaputten Shop. Wer konsequent mit einem Child-Template arbeitet, kann sein Design beliebig weiterentwickeln, ohne Angst vor dem nächsten JTL-Shop-Release. Das ist der Unterschied zwischen stabilem Betrieb und einem stundenlangen Debugging-Marathon nach jedem Update. Vlarom E-Commerce Agentur sieht dieses Muster in fast jedem neuen Kundenprojekt.

JTL-Shop NOVA Template anpassen in 5 Schritten

Dieser Plan basiert auf dem Vorgehen, das wir bei JTL-Shop-Projekten für Händler mit individuellem Branding einsetzen. Als Vlarom E-Commerce Agentur betreuen wir Händler von der ersten Farbanpassung bis zum vollständigen Child-Template-Aufbau, und sehen dabei immer wieder dieselben Stolperstellen. Wer mit Schritt 3 anfängt ohne Schritt 1 abgeschlossen zu haben, baut auf Sand und verliert Zeit bei der Fehlersuche.

Anpassungsumfang klären — Backend oder Child-Template? (Schritt 1)

Bevor du eine CSS-Zeile schreibst, kläre: Wie viel willst du anpassen? Für kleine Korrekturen (eine abweichende Topbar-Farbe, ein einzelner Button-Radius) reicht das benutzerdefinierte CSS-Feld in den NOVA-Einstellungen unter Darstellung > Einstellungen > Templates > NOVA. Bei kompletten Rebrandings, eigenen Schriften oder strukturellen Smarty-Block-Änderungen ist ein Child-Template der einzig sinnvolle Weg. Ein häufiger Fehler in Kundenprojekten: monatelang im benutzerdefinierten CSS-Feld sammeln und irgendwann den Überblick verlieren. Lieber früh strukturieren. Das benutzerdefinierte CSS-Feld taugt für schnelle Einzelkorrekturen, für eine saubere Template-Architektur reicht es halt nicht.

Child-Template anlegen und aktivieren (Schritt 2)

JTL stellt das offizielle NOVAChild-Beispiel auf GitLab bereit. Du lädst es herunter, benennst den Ordner um (z.B. MeinShop), passt den Wert in der template.xml an und trägst deinen Namespace in Bootstrap.php ein (z.B. Template\\MeinShop). Dann den Ordner per FTP in /templates/ hochladen und im Backend unter Darstellung > Einstellungen > Templates aktivieren. Wichtig: Ordnername muss exakt mit in template.xml übereinstimmen; keine Sonderzeichen, PSR-4-konform. Dieser Fehler allein kostet regelmäßig eine Stunde Debugging. Details dazu in der JTL-Dokumentation Templates anpassen.

Farben und Schriften über SCSS-Variablen anpassen (Schritt 3)

Im Child-Template bearbeitest du die _variables.scss in themes/my-nova/sass/. Dort findest du Variablen wie $primary für die Hauptfarbe und $font-family-base für die Standardschrift. Die entscheidende Regel: Definiere geänderte Variablen immer VOR dem @import der Original-Variablen, sonst erben abhängige Variablen den alten Wert und manche Buttons behalten die alte Farbe. Nach jeder Änderung das Theme über den Theme-Editor kompilieren (Schaltfläche: Theme kompilieren) und anschließend Shop-Cache sowie Browser-Cache leeren. Ohne diesen Schritt siehst du keine Änderungen. Das ist der häufigste Grund für Verwirrung beim ersten NOVA-Anpassungsprojekt. Mehr zur NOVA-Struktur unter guide.jtl-software.com — NOVA Template.

Button-Styles und Responsive-Breakpoints feintunen (Schritt 4)

Button-Farben werden in NOVA über $btn-primary-bg, $btn-primary-border und $btn-primary-color gesteuert. Wer nur $primary ändert, stellt manchmal fest dass Buttons trotzdem die alte Farbe behalten. Das liegt an der Vererbungsreihenfolge der SCSS-Variablen. Für eigene Webschriften fügst du den @font-face-Block in die custom.css des Child-Templates ein und referenzierst die Schrift dann in der _variables.scss. Mobile-Breakpoints steuert NOVA über das Bootstrap-Grid: sm (576px), md (768px), lg (992px), xl (1200px). Bild-Größen für Produktvorschaubilder konfigurierst du separat in den Template-Einstellungen unter Abschnitt E; zu kleine Werte sorgen für pixelige Darstellung auf Retina-Displays. Als zusätzliche Sicherheit testen wir Mobile-Layouts immer auf echten Geräten, nicht nur im Browser-Simulator.

Nach dem JTL-Shop-Update prüfen — Child-Template absichern (Schritt 5)

Dein Child-Template-Ordner bleibt bei Shop-Updates unangetastet. Das ist der zentrale Vorteil gegenüber direkten NOVA-Änderungen. Trotzdem gibt es einen wichtigen Prüfschritt: JTL kann die Datei my-nova_crit.scss im NOVAChild-Beispiel bei größeren Releases aktualisieren. Nach solchen Updates vergleiche deine Version dieser Datei mit der aktuellen NOVAChild-Version auf GitLab und übernimm strukturelle Anpassungen. Smarty-Blöcke die du überschreibst solltest du ebenfalls kurz prüfen, ob das Parent-Template neue Variablen oder Logik erhalten hat. Ein Händler im JTL-Forum formulierte das treffend: ‚Die eigenen Änderungen bleiben, aber man sollte nach Updates einmal kurz schauen ob das Grundgerüst noch passt.‘

Häufig gestellte Fragen zum JTL-Shop NOVA Template anpassen

Kann ich das NOVA Template direkt bearbeiten, ohne ein Child-Template anzulegen?

Technisch ja — praktisch nein. Änderungen direkt im NOVA-Ordner werden beim nächsten JTL-Shop-Update vollständig überschrieben. Jedes Update bedeutet dann: alle Anpassungen nochmal von Hand einpflegen. Einzige vertretbare Ausnahme ist das benutzerdefinierte CSS-Feld in den NOVA-Einstellungen im Admin-Backend, das bleibt bei Updates erhalten, weil es in der Datenbank gespeichert wird und nicht in den Template-Dateien liegt. Für produktive Shops mit individuellem Design ist das Child-Template der einzige Update-sichere Weg.

Die sauberste Methode: Im Child-Template die Datei themes/my-nova/sass/_variables.scss öffnen und dort $primary: #XXXXXX; mit deiner Wunschfarbe eintragen — und zwar VOR der @import-Zeile für die Original-Variablen. Danach das Theme im Backend kompilieren und sowohl Shop-Cache als auch Browser-Cache leeren. Alternativ bietet der Theme-Editor im Admin-Backend eine grafische Oberfläche, hat aber Grenzen: Nicht alle Elemente wie die Topbar lassen sich darüber steuern und in älteren Shop-Versionen sind manchmal Plugin-Updates nötig.

Die Variable wird nach dem @import der Original-Variablen definiert, nicht davor. Abhängige Variablen wie $btn-primary-bg erben dann den alten Wert. Das ist bei NOVA-Farbanpassungen die häufigste Ursache. Als zweites Szenario: Browser-Cache noch nicht geleert. Teste im Inkognito-Modus oder einem anderen Browser — tritt das Problem dort nicht mehr auf, liegt es am Cache.

Für DSGVO-konformes Einbinden gilt in unseren Projekten: Schriften lokal herunterladen statt direkt Google aufzurufen, den @font-face-Block in die custom.css des Child-Templates eintragen und die Schrift dann in der _variables.scss über $font-family-base referenzieren. Nach dem Kompilieren und Cache-Leeren greift die neue Schrift im gesamten Shop. Achte darauf, alle benötigten Schriftschnitte (Regular, Bold, Italic) als separate @font-face-Einträge zu hinterlegen, sonst erzeugt der Browser synthetische Varianten die auf Bildschirmen unscharf wirken.

NOVA ist vollständig responsive und nutzt das Bootstrap-Grid. Für eigene Breakpoint-Anpassungen bearbeitest du $grid-breakpoints in der _variables.scss. Wichtig: Teste nicht nur im Browser-DevTools-Modus, sondern auf echten Geräten — DevTools simuliert Auflösungen, aber kein echtes Touch-Verhalten. Bild-Größen für Produktbilder konfigurierst du in den Template-Einstellungen unter Abschnitt E der NOVA-Konfiguration: Vorschaubilder sollten mindestens doppelt so groß sein wie die angezeigte CSS-Größe, sonst wirken sie auf Retina-Displays pixelig.

Dein Child-Template-Ordner wird bei Shop-Updates nicht überschrieben. Das ist der zentrale Vorteil des Child-Template-Konzepts gegenüber direkten NOVA-Änderungen. Was du nach größeren Updates prüfen solltest: Erstens ob JTL die Datei my-nova_crit.scss im offiziellen NOVAChild-Beispiel aktualisiert hat. Zweitens ob Smarty-Blöcke die du überschreibst strukturelle Änderungen erhalten haben. Die eigentlichen CSS- und SCSS-Anpassungen bleiben erhalten, aber ein kurzer Vergleich mit der aktuellen NOVA-Version nach größeren Releases ist gute Praxis.

Der Theme-Editor eignet sich gut für einfache Farbanpassungen an Hauptfarben und Hintergründen und ist der einfachste Einstieg ohne SCSS-Kenntnisse. Er stößt aber an Grenzen: Die Topbar lässt sich darüber nicht anpassen, manche Button-Varianten ändern ihre Farbe nur teilweise und in JTL-Shop 5.1.2+ wird eine aktualisierte Plugin-Version aus dem offiziellen Repository benötigt. Für alles was über die Hauptfarbe hinausgeht (komplettes Rebranding, eigene Schriften, strukturelle Anpassungen) führt kein Weg am Child-Template vorbei.

NOVA anpassen und trotzdem update-sicher bleiben, wir helfen dir beim richtigen Aufbau.

Mit Vlarom das JTL-Shop NOVA Template sauber einrichten.

Als Vlarom E-Commerce Agentur und JTL Service Partner Gold richten wir in Kundenprojekten regelmäßig individuelle NOVA-Anpassungen ein, von der ersten Farbanpassung bis zum vollständigen Child-Template-Aufbau mit SCSS und eigenen Schriften. Wenn du dir nicht sicher bist, welcher Weg für deinen Shop der richtige ist, ruf uns an unter +49 30 91473862, schreib an info@vlarom.de oder nutze unser Kontaktformular für ein kurzes Erstgespräch.