JTL-Shop Template anpassen: Was Sie selbst ändern können und wann ein Child-Template nötig ist

JTL-Shop Template anpassen: Das Wichtigste in Kürze

Wer sein JTL-Shop Template anpassen will, hat zwei Wege: die Einstellungen im Backend, die ohne Code auskommen, und ein Child-Template für alles, was darüber hinausgeht. Welcher Weg passt, hängt davon ab, ob Sie nur Farben und Layout-Optionen ändern oder den Aufbau einzelner Seiten.

• Ohne Code: Theme, Header, Megamenü, Filter, Farben und Footer stellen Sie beim NOVA-Template direkt im Backend ein.
• Inhalte: Banner, Slider, Galerien und Textblöcke setzen Sie mit dem OnPage Composer per Drag and Drop.
• Eigenes CSS: NOVA hat ein Feld für benutzerdefinierte Variablen sowie CSS, Sass oder Scss.
• Child-Template: nötig, sobald Sie Template-Dateien ändern, etwa Produktseite, Header-Aufbau oder Warenkorb.
• Update-Sicherheit: Ändern Sie nie die NOVA-Dateien selbst. Child-Templates und Backend-Einstellungen überstehen Updates.
• Kosten: Für Anpassungen durch RemotaTech gibt es ein Festpreis-Angebot nach dem Erstgespräch.

Sie möchten ein neues Design statt einer Anpassung? Dann lesen Sie unseren Beitrag zum JTL-Shop Template erstellen lassen.

Was Sie im JTL-Shop Backend selbst ändern können

Das Standard-Template von JTL-Shop 5 heißt NOVA. Seine Einstellungen finden Sie unter Darstellung > Einstellungen > Templates, dort in der Zeile von NOVA auf Einstellungen. Alle Optionen sind in Gruppen sortiert und werden mit Speichern übernommen.

Bereich	Was Sie dort einstellen
Theme	Auswahl zwischen den Themes clear, midnight und blackline, Hover-Animationen, Schaltfläche „Nach oben scrollen“, linke Seitenleiste, Favicon
Header	fünf vorgefertigte Layouts oder ein eigenes Layout mit Menüausrichtung, Logohöhe, Topbar, Position und Breite des Suchfelds
Megamenü	Kategorien, Kategoriebilder, Unterkategorien, Hersteller-Dropdown
Listen und Galerie	Filterposition, Filtersuche, Variationsvorschau, Warenkorb-Button in der Liste
Farben	Primär- und Sekundärfarbe, Farben für Header und Footer
Benutzerdefinierte Styles	eigene Variablen und eigenes CSS, Sass oder Scss
Footer	Newsletter-Anmeldung, Social-Media-Schaltflächen und deren Links

Laut JTL werden die Farbanpassungen in diesen Einstellungen auch bei Updates nicht überschrieben. Damit decken die Backend-Optionen bereits viel ab, was Händler unter „Template anpassen“ verstehen: ein eigener Farbauftritt, ein anderer Header und eine aufgeräumte Kategorienavigation.

Farben und Schriften mit dem JTL Theme-Editor

Für tiefere Farbanpassungen nennt JTL das Plugin JTL Theme-Editor. Sie installieren es, öffnen es in der Pluginverwaltung und wechseln über Einstellungen in den Bearbeitungsmodus. Laut JTL-Guide passt das Plugin die mit JTL-Shop 5.0 ausgelieferten NOVA-Themes an, und für die Arbeit damit ist Vorerfahrung im Webdesign nötig.

Inhalte mit dem OnPage Composer gestalten

Viele Wünsche betreffen gar nicht das Template, sondern Inhalte: ein Banner auf der Startseite, ein Slider, ein Textblock auf einer Kategorieseite. Dafür ist der OnPage Composer gedacht. Sie öffnen ihn im Frontend des Shops und ziehen fertige Elemente, sogenannte Portlets, per Drag and Drop auf die Seite. Bilder, Galerien, Banner, Produkt-Streams und Container gehören zum Umfang.

Der Vorteil: Diese Inhalte sind vom Template getrennt. Ein Template-Wechsel oder ein Update lässt sie unberührt, solange die Bereiche weiter existieren, in denen sie platziert sind.

Wann ein Child-Template nötig ist

Sobald Sie etwas ändern wollen, für das es keine Einstellung gibt, kommen Sie an den Template-Dateien nicht vorbei. Typische Beispiele:

• zusätzliche Informationen auf der Produktseite, etwa Lieferhinweise oder technische Datenblätter an fester Stelle
• ein anders aufgebauter Header oder Footer, der über die vorgefertigten Layouts hinausgeht
• eigene Elemente im Warenkorb oder in der Kategorieansicht
• eigene Skripte oder ein vollständig eigenes Theme

Genau dafür sieht JTL das Child-Template vor. JTL bezeichnet es als den bevorzugten Weg zum eigenen Template. Ein Child-Template baut auf NOVA auf und enthält nur die Dateien, die Sie ändern oder ergänzen. Alle anderen Dateien lädt der Shop weiterhin aus NOVA.

So ist ein NOVA-Child-Template aufgebaut

JTL stellt eine Vorlage namens NOVAChild bereit, die in den Ordner templates des Shops kommt. Die Entwicklerdokumentation empfiehlt, die Beispielvorlage nicht unverändert produktiv zu nutzen, sondern eine Kopie in einem eigenen Verzeichnis anzulegen. Wichtig sind dabei drei Dinge:

1. template.xml: Im Element Parent steht der Name des Eltern-Templates, hier NOVA. Wer den Ordner umbenennt, passt auch den Namen in dieser Datei an.
2. Bootstrap.php: Der Namespace muss zum Ordnernamen passen. Sonderzeichen im Namen sind nicht erlaubt.
3. Aktivierung: Unter Einstellungen > Templates aktivieren Sie das Child-Template, wählen das Theme, speichern und leeren danach unter System > Cache den Template-Cache.

Smarty-Blöcke statt ganzer Dateien

JTL-Shop nutzt die Template-Engine Smarty. Die Template-Dateien sind in benannte Blöcke gegliedert. Im Child-Template können Sie einen Block ersetzen oder mit den Optionen append und prepend Inhalt davor oder dahinter einfügen. Sie müssen dafür nur die betroffene Datei mit demselben Pfad anlegen und darin die gewünschten Blöcke überschreiben.

Diese Methode empfiehlt JTL ausdrücklich. Ganze Dateien zu kopieren und zu ersetzen ist zwar möglich, wirkt sich aber auf alles in dieser Datei aus. Nach einem Update müssen solche Dateien häufiger nachgearbeitet werden, weil sich das Original inzwischen geändert haben kann.

Eigenes CSS und eigene Themes

Für kleine Korrekturen reicht das Feld für benutzerdefinierte Styles in den NOVA-Einstellungen. Größere Designänderungen gehören in ein eigenes Theme im Child-Template: ein Ordner unter themes mit den Scss-Quellen und der kompilierten CSS-Datei. Das Theme wählen Sie anschließend in den Template-Einstellungen aus. Eigene JavaScript-Dateien binden Sie über die template.xml ein und können damit Skripte von NOVA ergänzen oder ersetzen.

JTL-Shop Template anpassen und updatesicher bleiben

Ein Child-Template wird bei Shop-Updates nicht überschrieben. Das heißt aber nicht, dass nach einem Update automatisch alles funktioniert. JTL empfiehlt, nach jedem Update zu prüfen, ob die Anpassungen noch wie gewünscht arbeiten, und überschriebene Dateien bei Bedarf anzupassen.

In der Praxis hat sich dieser Ablauf bewährt:

• Update zuerst in einer Testumgebung einspielen
• Startseite, Kategorie, Produktseite, Warenkorb und Checkout durchklicken
• überschriebene Template-Dateien mit der neuen NOVA-Version vergleichen
• Template-Cache leeren und die mobile Ansicht prüfen
• erst dann das Update im Live-Shop ausführen

Typische Fehler beim Anpassen des JTL-Shop Templates

• Änderungen direkt in NOVA: beim nächsten Update weg, ohne dass es jemand bemerkt.
• Beispiel-Child unverändert produktiv genutzt: JTL rät ausdrücklich zu einer eigenen Kopie.
• Ganze Dateien statt Blöcke kopiert: jede neue NOVA-Version erzeugt Nacharbeit.
• Cache nicht geleert: Die Änderung ist gespeichert, aber im Frontend nicht sichtbar.
• Nur am Desktop getestet: Header, Megamenü und Filter verhalten sich mobil oft anders.
• Plugins vergessen: Viele Plugins hängen sich an bestimmte Stellen des Templates. Geänderte Blöcke können ihre Ausgabe verschieben oder verdecken.

Selbst anpassen oder anpassen lassen?

	Selbst anpassen	Anpassen lassen
Geeignet für	Farben, Theme, Header-Layout, Megamenü, Inhalte im OnPage Composer	Child-Template, geänderte Produkt- oder Warenkorbseiten, eigenes Theme
Voraussetzungen	Zugang zum Backend, etwas Zeit zum Testen	keine, Sie beschreiben das Ziel
Risiko	gering bei Backend-Einstellungen, hoch bei Dateiänderungen ohne Erfahrung	getestete Umsetzung, dokumentierte Änderungen
Updates	Backend-Einstellungen bleiben erhalten	Prüfung und Nacharbeit können Teil der Betreuung sein

Für einen eigenen Farbauftritt und ein anderes Header-Layout brauchen Sie in der Regel keine Agentur. Sobald Template-Dateien betroffen sind, lohnt sich Unterstützung: Ein sauber aufgebautes Child-Template spart bei jedem späteren Update Zeit.

Kosten für eine Template-Anpassung durch eine Agentur

Was eine Anpassung kostet, entscheidet vor allem der Umfang. Folgende Faktoren treiben den Aufwand:

• Anzahl der betroffenen Seitentypen, etwa Produktseite, Kategorie, Warenkorb
• ob einzelne Blöcke oder ganze Dateien geändert werden
• eigenes Theme mit neuem Farb- und Schriftsystem
• Zusammenspiel mit vorhandenen Plugins
• Tests auf verschiedenen Geräten und Browsern

RemotaTech nennt Ihnen nach dem Erstgespräch einen Festpreis. Sie wissen also vor dem Start, was die Anpassung kostet. Wenn Sie noch überlegen, ob ein Standard-Template, ein Marktplatz-Template oder ein individuelles Design besser passt, hilft unser Vergleich der JTL-Shop Templates.

Das übernimmt RemotaTech

Als JTL-Servicepartner mit 10 Jahren Erfahrung passen wir Ihr JTL-Shop Template so an, dass es zu Ihrer Marke passt und Updates übersteht:

• Bestandsaufnahme: Welche Wünsche lassen sich per Einstellung lösen, welche brauchen ein Child-Template?
• Child-Template: sauber aufgebaut, mit überschriebenen Blöcken statt kopierter Dateien
• Theme und CSS: Farben, Schriften und Abstände passend zu Ihrem Auftritt
• Tests: Desktop und Smartphone, alle wichtigen Seitentypen, vorhandene Plugins
• Betreuung: auf Wunsch Prüfung nach jedem Update im Rahmen von Support und Wartung

Mehr zu unseren Leistungen rund um Templates finden Sie auf der Seite JTL-Shop Templates. Wie ein komplett eigenes Template aussehen kann, zeigt unser Beitrag zu Verdant. Wir sitzen in Wesseling zwischen Köln und Bonn und arbeiten für Händler in ganz Deutschland, per Fernwartung oder in der Region vor Ort.

Jetzt Template-Anpassung anfragen

Sie wissen, was sich an Ihrem Shop ändern soll, aber nicht, ob eine Einstellung reicht oder ein Child-Template nötig ist? Schicken Sie uns die Shop-URL und eine kurze Liste Ihrer Wünsche. Wir sagen Ihnen, was Sie selbst erledigen können, und machen Ihnen für den Rest ein Festpreis-Angebot.

Template-Anpassung anfragen oder zuerst ein Gespräch vereinbaren: Erste Beratung.