JTL-Shop NOVA-Template anpassen: Praxistipps

11.09.2026 Christopher Schütz E-Commerce 11 Min Lesezeit
JTL-Shop NOVA-Template anpassen: Praxistipps

Wer einen JTL-Shop betreibt, kommt am NOVA-Template kaum vorbei. Es ist solide, gut gepflegt und liefert von Haus aus eine brauchbare Basis. Genau deshalb stellt sich früher oder später die Frage, wie weit man es anpassen darf, ohne sich bei jedem Update wieder Ärger einzuhandeln. Aus unserer Projektarbeit mit JTL-Kunden wissen wir: Die meisten Probleme entstehen nicht durch zu mutige Designentscheidungen, sondern durch handwerkliche Fehler bei der Umsetzung. Dieser Ratgeber zeigt, welche Bereiche sich wirklich lohnen, wie man sauber vorgeht und wo die typischen Fallen liegen.

Was ist das NOVA-Template und wofür wird es angepasst

NOVA ist das Standard-Template von JTL-Shop, aufgebaut auf Bootstrap und Smarty-Templating. Es bringt eine responsive Grundstruktur, gängige Shop-Elemente wie Warenkorb, Filter und Checkout sowie eine gepflegte Codebasis mit, die JTL regelmäßig weiterentwickelt. Für viele Shops reicht die Standardkonfiguration im ersten Schritt aus. Sobald aber eine eigene Markenidentität, spezielle Produktdarstellungen oder Conversion-Optimierung ins Spiel kommen, reicht das Standardlayout meist nicht mehr aus. Typische Anlässe für eine Anpassung sind ein neues Corporate Design, eine unübersichtliche Kategorienavigation, eine zu lange Produktdetailseite oder schlicht der Wunsch, sich optisch von anderen NOVA-Shops abzuheben, denn viele Shops nutzen das Template nahezu unverändert und sehen dadurch austauschbar aus. Eine durchdachte Online-Shop erstellen Strategie berücksichtigt das Template von Anfang an, statt es erst nach dem Launch nachträglich zu korrigieren.

Bevor es losgeht: Child-Template statt Kernänderung

Der wichtigste Grundsatz vorab, bevor eine einzige Zeile Code angefasst wird: Änderungen gehören in ein Child-Template, niemals direkt in die NOVA-Kerndateien. JTL-Shop unterstützt eine Vererbungsstruktur, bei der ein eigenes Template auf NOVA aufsetzt und nur die tatsächlich benötigten Dateien überschreibt. Der Rest bleibt beim Original und wird bei einem Shop-Update automatisch mitgezogen. Wer stattdessen direkt in den NOVA-Ordner schreibt, verliert diese Änderungen beim nächsten Update ersatzlos, sofern nicht vorher jede betroffene Datei manuell gesichert und nachträglich wieder eingepflegt wird. Das kostet Zeit, ist fehleranfällig und wird bei jedem weiteren Update erneut fällig.

Ein sauberes Vorgehen sieht so aus: Zunächst ein eigenes Child-Template mit sprechendem Namen anlegen, die Templateverwaltung im Backend nutzen, um es zu aktivieren, und dann gezielt nur die Smarty-Templates, CSS- und JS-Dateien kopieren, die tatsächlich verändert werden sollen. Wer eine reine Farb- oder Schriftänderung vornimmt, kommt oft schon mit einer zusätzlichen CSS-Datei aus, die im Backend über die Template-Einstellungen eingebunden wird, ganz ohne Kerndateien anzufassen. Erst wenn Struktur oder Logik einer Seite verändert werden sollen, ist das Überschreiben einzelner Smarty-Dateien notwendig. In diesem Fall lohnt sich vorab ein Blick in die JTL-Dokumentation zur Templatestruktur, damit klar ist, welche Datei für welchen Seitenbereich zuständig ist.

Die wichtigsten Bereiche für Anpassungen im NOVA-Template

Nicht jede Anpassung bringt denselben Nutzen. Die folgende Übersicht ordnet die gängigen Bereiche nach typischem Aufwand und Risiko ein, basierend auf unserer Projekterfahrung mit JTL-Shops unterschiedlicher Größe.

BereichTypischer AufwandRisiko bei FehlerUpdate-sicher bei Child-Template
Farben, Schriften, LogoGeringNiedrigJa
Header und NavigationMittelMittelJa
ProduktdetailseiteMittel bis hochMittelJa
Kategorie- und FilterseitenMittelMittelJa
Checkout-ProzessHochHochBedingt
Plugin-IntegrationenMittel bis hochHochAbhängig vom Plugin

Header und Navigation anpassen

Der Header ist das Erste, was Besucher sehen, und entsprechend hoch ist der gestalterische Reiz, hier viel zu verändern. Sinnvoller ist ein zurückhaltender Ansatz: klare Sichtbarkeit von Suche, Warenkorb und Kundenkonto, eine Navigation, die nicht mehr als zwei Ebenen tief geht, und genug Kontrast, damit auch auf kleinen Bildschirmen alles bedienbar bleibt. Bei der Hauptnavigation lohnt sich ein Blick in die tatsächliche Klickstatistik, sofern vorhanden, denn oft zeigt sich, dass drei bis vier Hauptkategorien den Großteil der Klicks erhalten, während der Rest der Navigation kaum genutzt wird. Eine überladene Megamenü-Struktur wirkt dann eher wie Ballast als wie Orientierungshilfe. Wichtig aus SEO-Sicht: Die interne Verlinkung im Header sollte konsistent bleiben, damit Suchmaschinen die Seitenhierarchie klar erkennen. Wer hier unsicher ist, wie viel Navigation sinnvoll ist, bekommt über eine unabhängige Website-Audit eine realistische Einschätzung, welche Bereiche der Seite tatsächlich genutzt werden und wo Struktur fehlt.

Produktdetailseite: Der Ort mit dem größten Umsatzhebel

Kaum ein Bereich im NOVA-Template wird so oft angepasst wie die Produktdetailseite, und das aus gutem Grund. Hier entscheidet sich, ob ein Besucher kauft oder abspringt. Häufige Anpassungen betreffen die Anordnung von Bild, Preis und Warenkorb-Button, das Einblenden von Verfügbarkeit und Lieferzeit direkt im sichtbaren Bereich sowie die Darstellung von Varianten wie Größe oder Farbe. Ein Fehler, den wir immer wieder sehen: Zu viele Informationen werden oberhalb des Kauf-Buttons platziert, sodass der Besucher erst scrollen muss, um überhaupt bestellen zu können. Sinnvoller ist es, die Kaufentscheidung so früh wie möglich zu ermöglichen und ergänzende Informationen wie technische Daten, Bewertungen oder ausführliche Beschreibungen weiter unten zu platzieren.

Auch strukturierte Daten gehören zur Produktdetailseite, auch wenn sie unsichtbar bleiben. JTL-Shop liefert im NOVA-Template bereits eine solide Schema.org-Auszeichnung für Produkte mit, inklusive Preis, Verfügbarkeit und Bewertungen. Wer eigene Felder ergänzt, etwa Herstellerangaben oder GTIN, sollte diese konsequent auch im Markup nachziehen, sonst entsteht eine Lücke zwischen sichtbarem Inhalt und dem, was Suchmaschinen und KI-Systeme auslesen können. Gerade für Produktsuchen über KI-Assistenten wird eine vollständige, korrekte Datenauszeichnung zunehmend relevanter.

Kategorieseiten und Filter verständlich gestalten

Kategorieseiten sind für viele JTL-Shops der wichtigste Einstiegspunkt aus der organischen Suche, noch vor der Startseite. Entsprechend lohnt sich hier besondere Sorgfalt. Die Standard-Filterleiste im NOVA-Template funktioniert grundsätzlich gut, wird aber bei vielen Attributen schnell unübersichtlich. Eine sinnvolle Anpassung ist das Ausblenden von Filtern mit wenig Relevanz und das Priorisieren derjenigen, die tatsächlich zur Kaufentscheidung beitragen, etwa Preis, Marke oder Größe. Bei der Textgestaltung oberhalb der Produktliste gilt: Ein kurzer, individueller Einleitungstext je Kategorie hilft sowohl Besuchern bei der Orientierung als auch der Suchmaschine bei der thematischen Einordnung. Reine Textwüsten ohne Bezug zu den gezeigten Produkten bringen dagegen wenig.

Checkout und Warenkorb: Wenige, aber wirkungsvolle Eingriffe

Der Checkout ist der sensibelste Bereich im gesamten Template. Hier sollte grundsätzlich zurückhaltend gearbeitet werden, denn jede zusätzliche Ablenkung oder jeder zusätzliche Klick kann Kaufabbrüche begünstigen. Sinnvolle Anpassungen sind eine klare Fortschrittsanzeige, das frühzeitige Anzeigen der Versandkosten und eine reduzierte Formularlänge, etwa durch das Zusammenfassen von Adressfeldern. Weniger sinnvoll ist es, im Checkout zusätzliche Werbeflächen, Cross-Selling-Banner oder Newsletter-Anmeldungen einzubauen. Diese Elemente gehören auf die Produktseite oder in den Warenkorb, nicht in den letzten Schritt vor dem Kaufabschluss. Bei Zahlungsarten- und Versand-Plugins ist zudem Vorsicht geboten: Jedes zusätzliche Plugin, das in den Checkout eingreift, sollte einzeln getestet werden, bevor es live geht, denn hier summieren sich Kompatibilitätsprobleme am schnellsten.

Performance im Blick behalten

Jede optische Anpassung hat einen Preis in Ladezeit. Zusätzliche Schriftarten, große Hero-Bilder, eingebundene Icon-Bibliotheken oder zusätzliche JavaScript-Bibliotheken für Slider und Animationen summieren sich schnell. Gerade bei mobilen Nutzern, die häufig über eine schwächere Verbindung zugreifen, macht sich das direkt in der Absprungrate bemerkbar. Vor jeder größeren Template-Anpassung lohnt sich deshalb ein Blick auf die Ausgangswerte bei den Core Web Vitals, damit nachher überprüfbar ist, ob eine Änderung die Ladezeit verbessert oder verschlechtert hat.

Ein paar konkrete Stellschrauben, die sich im NOVA-Template bewährt haben: Bilder konsequent im WebP-Format ausliefern und mit passenden Größenangaben versehen, damit der Browser keinen Layout-Sprung verursacht. Web-Fonts auf ein bis zwei Schnitte reduzieren statt gleich eine ganze Font-Familie mit acht Schnitten zu laden. JavaScript, das nicht für den ersten sichtbaren Bereich gebraucht wird, verzögert nachladen. Und nicht zuletzt: Jede zusätzliche Drittanbieter-Einbindung, etwa für Tracking oder Chat-Widgets, kritisch hinterfragen, denn jedes externe Skript bringt eine eigene Ladezeit mit, die man selbst kaum beeinflussen kann.

SEO-technische Anpassungen im NOVA-Template

Neben Optik und Performance lohnt sich bei jeder Template-Anpassung ein Blick auf die SEO-Grundlagen, die im Template selbst verankert sind. Dazu gehört die korrekte Struktur der Überschriften: Auf jeder Seite sollte es genau eine H1 geben, typischerweise den Produkt- oder Kategorienamen, gefolgt von einer sinnvollen Hierarchie aus H2 und H3 für Unterabschnitte. Im NOVA-Standard ist das grundsätzlich sauber gelöst, bei individuellen Anpassungen rutscht aber schnell eine zweite H1 hinein, etwa wenn ein neuer Bannerbereich mit eigener Überschrift eingebaut wird.

Ein weiterer Punkt sind die Canonical-Tags, gerade bei Filterkombinationen auf Kategorieseiten. JTL-Shop verwaltet diese im Kern zuverlässig, aber sobald eigene Filterlogiken oder zusätzliche Parameter eingebaut werden, sollte geprüft werden, ob weiterhin auf die richtige, unparametrisierte Version verwiesen wird. Auch die interne Verlinkung verdient Aufmerksamkeit: Breadcrumbs, verwandte Produkte und Kategorie-Querverweise sollten so gestaltet sein, dass wichtige Seiten mit möglichst wenigen Klicks von der Startseite aus erreichbar sind. Wer die eigene Sichtbarkeit systematisch weiterentwickeln möchte, findet über eine erfahrene SEO-Agentur Unterstützung dabei, technische Anpassungen am Template mit einer durchdachten Content- und Linkstrategie zu verbinden, statt beides getrennt zu betrachten.

Mobile Darstellung konsequent testen

Ein Großteil des Traffics in JTL-Shops kommt inzwischen über mobile Endgeräte, und Google bewertet ohnehin primär die mobile Version einer Seite. Jede Template-Anpassung sollte deshalb zuerst am Smartphone getestet werden, nicht erst am Ende des Projekts. Typische Probleme, die im NOVA-Template bei eigenen Anpassungen auftauchen: zu kleine Touch-Flächen bei Filterbuttons, Bildergalerien, die auf kleinen Bildschirmen abgeschnitten werden, oder Formulare, bei denen das Tastaturlayout nicht zum jeweiligen Feld passt, etwa eine Buchstabentastatur bei einem reinen Zahlenfeld wie der Postleitzahl. Am sinnvollsten ist es, nach jeder Anpassung direkt auf mindestens zwei bis drei verschiedenen Bildschirmgrößen zu prüfen, klassischerweise ein kleines Smartphone, ein größeres Smartphone im Querformat und ein Tablet, bevor eine Änderung live geht.

Typische Fehler bei der NOVA-Anpassung

Aus zahlreichen Projekten lassen sich einige wiederkehrende Fehler zusammenfassen, die sich mit etwas Vorbereitung vollständig vermeiden lassen:

  • Direktes Bearbeiten der NOVA-Kerndateien statt eines Child-Templates, wodurch Änderungen beim nächsten Update verloren gehen.
  • Fehlende Testumgebung: Änderungen werden direkt im Livesystem vorgenommen, statt vorher an einer Staging-Version geprüft zu werden.
  • Zu viele gleichzeitige Änderungen in einem Schritt, wodurch sich bei Problemen nicht mehr nachvollziehen lässt, welche Anpassung die Ursache war.
  • Vernachlässigte Barrierefreiheit, etwa fehlender Kontrast bei neu eingeführten Farben oder Buttons ohne erkennbaren Fokuszustand.
  • Individuelle CSS- und JS-Anpassungen ohne Kommentare oder Dokumentation, was spätere Wartung erschwert, besonders wenn ein anderer Dienstleister übernimmt.
  • Keine Kontrolle der Ladezeit nach der Anpassung, sodass sich Performance-Probleme erst Wochen später durch sinkende Rankings oder mehr Kaufabbrüche bemerkbar machen.

Die gute Nachricht: Jeder dieser Punkte lässt sich mit einem klaren Vorgehen vermeiden, das nicht viel zusätzlichen Aufwand bedeutet, wenn es von Anfang an mitgedacht wird.

Wann sich ein erfahrener Partner lohnt

Kleinere Anpassungen wie Farben, Logo oder kleinere Textänderungen lassen sich mit etwas Smarty-Grundverständnis oft selbst umsetzen. Sobald es aber um strukturelle Änderungen an Produktdetailseite, Checkout oder Kategorieseiten geht, oder wenn mehrere Plugins zusammenspielen müssen, steigt der Aufwand deutlich und mit ihm das Risiko für Folgefehler. Hier zahlt sich Erfahrung mit dem JTL-Ökosystem konkret aus, weil bekannte Stolperfallen von vornherein vermieden werden und die Anpassung update-sicher bleibt. Über einen spezialisierten JTL-Service lassen sich Template-Anpassungen mit der übrigen Shop-Architektur, etwa Warenwirtschaft und Versandprozessen, sauber abstimmen, statt Design und Backend getrennt zu betrachten. Wer ohnehin einen Relaunch plant, sollte das Template nicht isoliert, sondern als Teil eines Gesamtkonzepts angehen, wie es auch bei einem klassischen Webdesign-Projekt üblich ist.

Häufige Fragen

Kann ich das NOVA-Template direkt bearbeiten oder brauche ich ein Child-Template?
Direktes Bearbeiten der NOVA-Kerndateien ist technisch möglich, aber nicht empfehlenswert. Bei jedem Shop-Update werden diese Dateien überschrieben, wodurch alle eigenen Änderungen verloren gehen. Ein Child-Template löst dieses Problem, weil eigene Anpassungen getrennt vom Kern gespeichert und bei Updates automatisch übernommen werden.

Wie viel kostet eine individuelle NOVA-Template-Anpassung?
Das hängt stark vom Umfang ab. Kleinere optische Anpassungen wie Farben oder Logo sind mit wenig Aufwand verbunden, während strukturelle Eingriffe in Produktseiten oder Checkout deutlich mehr Zeit benötigen. Als grobe Orientierung: Ein individuell gestalteter Online-Shop auf Basis eines bestehenden oder angepassten Templates startet bei uns ab 1.490 Euro, abhängig vom konkreten Funktionsumfang.

Beeinflusst eine Template-Anpassung die SEO-Rankings?
Ja, und zwar in beide Richtungen. Eine sauber umgesetzte Anpassung mit klarer Struktur, schnellen Ladezeiten und korrektem Markup kann die Sichtbarkeit verbessern. Fehler wie doppelte Überschriften, fehlerhafte Canonical-Tags oder deutlich verlangsamte Ladezeiten wirken sich dagegen negativ aus.

Wie teste ich Änderungen am NOVA-Template, ohne den Livebetrieb zu gefährden?
Am sichersten ist eine separate Testumgebung oder ein Staging-System, das eine Kopie des Shops mit denselben Daten, aber ohne Auswirkung auf laufende Bestellungen enthält. Änderungen werden dort entwickelt, geprüft und erst nach erfolgreichem Test in den Livebetrieb übernommen.

Verliere ich bei einem JTL-Shop-Update meine angepassten Bereiche?
Bei Nutzung eines Child-Templates in der Regel nicht, da JTL-Updates die Kerndateien betreffen und das Child-Template unberührt bleibt. Wurden dagegen NOVA-Kerndateien direkt verändert, gehen diese Anpassungen beim Update verloren und müssen manuell wiederhergestellt werden.

Lohnt sich ein Fullscan-Audit vor einer größeren Template-Anpassung?
Ja, das schafft eine belastbare Ausgangsbasis. Ein Audit zeigt vorab, wo tatsächlich Schwachstellen bei Ladezeit, Struktur oder Bedienbarkeit liegen, sodass die Anpassung gezielt dort ansetzt, wo sie wirklich etwas bringt, statt auf Verdacht Bereiche zu verändern, die ohnehin schon gut funktionieren.

Welche Bereiche des NOVA-Templates sollte ich zuerst anpassen?
In den meisten Projekten liefert die Produktdetailseite den größten Effekt, gefolgt von den Kategorieseiten, weil hier der Großteil des organischen Traffics ankommt und die meisten Kaufentscheidungen fallen. Header, Checkout und Plugin-Integrationen folgen danach, abhängig vom individuellen Shop.

Haben Sie Fragen zu diesem Thema?

Wir beraten Sie gerne persönlich und unverbindlich

Kontakt aufnehmen Weitere Artikel lesen