Alles über das JTL Nova Child Template: Individuelle Anpassungen für deinen JTL-Shop

René Kremer | 14.11.2024

Alles über das JTL Nova Child Template: Individuelle Anpassungen für deinen JTL-Shop

Wenn du Besitzer eines JTL-Shops bist und deinen Onlineshop optisch sowie funktional an deine Marke anpassen möchtest, hast du vielleicht bereits vom NOVA-Template gehört. Es ist das aktuelle Standard-Template von JTL und bietet eine moderne, anpassungsfähige Grundlage für deinen Shop. Doch um spezifische Änderungen durchzuführen, ist es oft nicht ratsam, das Standard-Template direkt zu verändern. Stattdessen empfiehlt es sich, ein Child-Template zu erstellen. Hier erfährst du alles, was du wissen musst, um ein JTL Nova Child Template zu erstellen, es anzupassen und es optimal zu nutzen.

Warum ein Child-Template?

Das Arbeiten mit einem Child-Template bringt zahlreiche Vorteile mit sich. Anstatt Änderungen direkt im NOVA-Template vorzunehmen, erstellst du ein Child-Template, in dem du sämtliche Anpassungen vornehmen kannst. Auf diese Weise bleibt das Originaltemplate unangetastet, was besonders bei Updates wichtig ist. Denn wenn JTL das NOVA-Template aktualisiert, gehen bei einem Child-Template deine Änderungen nicht verloren. So profitierst du von den Verbesserungen und Sicherheitsupdates, ohne das Risiko, dass deine Anpassungen überschrieben werden.

Vorteile eines Child-Templates im Detail

  1. Update-Sicherheit: JTL veröffentlicht regelmäßig Updates für das NOVA-Template, die neue Funktionen, Optimierungen und Sicherheitsverbesserungen enthalten. Wenn du Änderungen direkt im NOVA-Template vornimmst, kann es passieren, dass diese Updates deine Anpassungen überschreiben. Ein Child-Template schützt deine individuellen Anpassungen vor solchen Updates.

  2. Bessere Organisation und Struktur: Mit einem Child-Template kannst du deine Anpassungen übersichtlich in einem eigenen Ordner organisieren. Das erleichtert die Arbeit erheblich, insbesondere wenn du oder dein Team später weitere Änderungen vornehmen möchtet.

  3. Fehlerquellen minimieren: Da du nicht das Originaltemplate bearbeitest, kannst du Fehler leichter identifizieren und isoliert im Child-Template beheben. Wenn ein Problem auftritt, musst du dir keine Sorgen machen, dass das gesamte NOVA-Template beeinflusst ist.

Schritt-für-Schritt-Anleitung zur Erstellung eines NOVA-Child-Templates

Um dein eigenes NOVA-Child-Template zu erstellen, folge diesen Schritten. Du benötigst grundlegende Kenntnisse im Umgang mit FTP und eventuell ein wenig Erfahrung im Umgang mit HTML und CSS.

  1. Vorlage herunterladen: JTL stellt ein Grundgerüst für das NOVA-Child-Template zur Verfügung. Diese Vorlage enthält alle notwendigen Dateien und Verzeichnisse, um dein Child-Template aufzusetzen. Lade dieses Grundgerüst von der offiziellen JTL-Website herunter.

  2. Dateien entpacken und auf den Server hochladen: Entpacke das heruntergeladene Template-Archiv und lade die Dateien per FTP in das Verzeichnis /templates deines JTL-Shops hoch. Achte darauf, dass du eine klare und eindeutige Ordnerstruktur verwendest, um spätere Anpassungen besser organisieren zu können.

  3. Aktivieren des Child-Templates: Im Backend deines JTL-Shops kannst du unter Darstellung > Einstellungen > Templates dein neues Child-Template aktivieren. Wähle dort das soeben hochgeladene Template aus und speichere die Änderungen.

  4. Sichtprüfung: Nachdem du das Child-Template aktiviert hast, öffne deinen Shop und prüfe, ob das Child-Template korrekt geladen wird. Nun kannst du mit den eigentlichen Anpassungen beginnen.

CSS-Anpassungen im Child-Template

Eine der häufigsten Änderungen, die du an einem Template vornehmen möchtest, betrifft das Design. Hier kommt die Datei custom.css ins Spiel. Diese Datei legst du im Child-Template an, um dort alle individuellen CSS-Styles zu definieren, ohne die Original-CSS-Dateien des NOVA-Templates zu verändern.

So erstellst und bearbeitest du die custom.css

  1. Datei erstellen: Lege eine Datei mit dem Namen custom.css im Verzeichnis deines Child-Templates an. Falls bereits eine custom.css im NOVA-Template existiert, kannst du diese als Ausgangspunkt verwenden.

  2. CSS-Anpassungen vornehmen: Hier kannst du spezifische Styles wie Farben, Schriftarten und Abstände festlegen. Möchtest du z. B. die Hintergrundfarbe des Headers ändern, kannst du den entsprechenden CSS-Code in die custom.css einfügen.

  3. Wirkung prüfen: Nachdem du Änderungen in der custom.css gespeichert hast, lade deinen Shop neu, um die Anpassungen zu überprüfen. Achte darauf, den Cache zu leeren, damit die Änderungen sofort sichtbar werden.

Bootstrap und Anpassungen an der jtl_bootstrap.css

Das NOVA-Template basiert auf Bootstrap, einem beliebten CSS-Framework, das eine Reihe vorgefertigter Layout- und Styling-Optionen bietet. Die Datei jtl_bootstrap.css enthält die Bootstrap-Definitionen und zusätzliche Anpassungen von JTL.

Individuelle Bootstrap-Anpassungen

Falls du bestimmte Bootstrap-Klassen modifizieren möchtest, kannst du die jtl_bootstrap.css im Child-Template überschreiben. Beachte jedoch, dass Änderungen in dieser Datei gut dokumentiert und klar strukturiert sein sollten, um den Überblick nicht zu verlieren. Alternativ kannst du die Klassen gezielt in der custom.css deines Child-Templates überschreiben, um die Struktur sauber zu halten.

Nutzung des JTL Theme Editors

Der JTL Theme Editor ist ein hilfreiches Tool, wenn du einfache Anpassungen vornehmen möchtest, ohne direkt in die Dateien einzugreifen. Mit dem Editor kannst du viele visuelle Elemente des Shops anpassen.

Funktionen des Theme Editors im Überblick

  • Farbanpassungen: Mit dem Theme Editor kannst du grundlegende Farben wie die Akzentfarben, Hintergrundfarben und Schriftfarben anpassen. Diese Änderungen sind besonders nützlich, wenn du schnell an das Erscheinungsbild deines Shops arbeiten möchtest.

  • Vorschaufunktion: Eine besondere Stärke des Theme Editors ist die Echtzeit-Vorschau. Du kannst Änderungen vornehmen und direkt sehen, wie sich diese auf das Design auswirken, bevor du die Änderungen speicherst und live schaltest.

Template-Dateien im Child-Template anpassen

Falls du tiefere Anpassungen an der Struktur des Shops vornehmen möchtest, ist es möglich, die Template-Dateien des NOVA-Templates in deinem Child-Template zu überschreiben. Dazu kopierst du die Originaldateien aus dem NOVA-Template in das Verzeichnis deines Child-Templates und bearbeitest sie dort.

Beispiel für die Bearbeitung des Footers

  1. Footer-Datei kopieren: Kopiere die Footer-Datei (footer.tpl) aus dem Verzeichnis des NOVA-Templates in dein Child-Template-Verzeichnis.

  2. Anpassungen vornehmen: Nun kannst du individuelle Änderungen am Footer vornehmen, etwa indem du Links hinzufügst, das Logo austauschst oder die Struktur der Elemente veränderst.

  3. Prüfung und Optimierung: Speichere deine Änderungen und prüfe sie direkt im Shop. Achte auch hier darauf, den Cache zu leeren, um die neuen Anpassungen sichtbar zu machen.

Boxenverwaltung im JTL-Shop

Die Boxenverwaltung bietet dir zusätzliche Möglichkeiten, Inhalte dynamisch zu gestalten. Über das Backend kannst du die Position und Sichtbarkeit der verschiedenen Boxen auf den Seiten deines Shops anpassen, ohne direkt im Code Änderungen vorzunehmen. Hierbei kannst du definieren, auf welchen Seiten bestimmte Boxen erscheinen sollen und ob sie beispielsweise nur auf der Startseite oder auch auf den Kategorieseiten sichtbar sind.

Tipps und Best Practices für die Arbeit mit Child-Templates

  1. Testumgebung nutzen: Vor allem bei größeren Anpassungen lohnt es sich, eine Testumgebung einzurichten. So kannst du Änderungen ausprobieren, ohne das Einkaufserlebnis deiner Kunden zu beeinträchtigen.

  2. Dokumentation führen: Eine gut geführte Dokumentation hilft dir, den Überblick über deine Anpassungen zu behalten. Notiere, welche Dateien du geändert hast und welche Änderungen vorgenommen wurden.

  3. Regelmäßige Backups: Auch wenn Child-Templates grundsätzlich Updates überstehen, empfiehlt es sich, regelmäßige Backups zu machen. So kannst du im Fall eines Fehlers immer auf eine funktionierende Version zurückgreifen.

  4. Komprimierung deaktivieren: Während du an deinem Shop arbeitest, sollte die Komprimierung von JavaScript- und CSS-Dateien deaktiviert sein. Das erleichtert die Fehlersuche, da du die Änderungen direkt und unkomprimiert sehen kannst. Nach Abschluss aller Arbeiten kannst du die Komprimierung wieder aktivieren, um die Ladegeschwindigkeit des Shops zu optimieren.

  5. Klares CSS-Management: Spezifische Anpassungen für einzelne Elemente sollten stets in der custom.css des Child-Templates vorgenommen werden. Auf diese Weise bleibt das Template übersichtlich, und du vermeidest Konflikte mit den Originaldateien des NOVA-Templates.

Fazit

Ein Child-Template für das JTL NOVA-Template ist ein mächtiges Werkzeug, das dir als Shop-Betreiber ermöglicht, den Look und das Verhalten deines JTL-Shops detailliert an deine Bedürfnisse anzupassen. Mit einem Child-Template kannst du Änderungen sicher vornehmen, Updates nutzen und gleichzeitig die Struktur deines Shops übersichtlich halten. Dank des JTL Theme Editors, der Boxenverwaltung und der flexiblen CSS-Anpassungsmöglichkeiten hast du alle Werkzeuge zur Hand, um einen einzigartigen und professionellen Shop zu gestalten, der deine Marke perfekt widerspiegelt. Indem du diese Schritte befolgst und die hier vorgestellten Tipps berücksichtigst, legst du die Basis für einen erfolgreichen und anpassbaren Online-Shop mit JTL.

Bitte melden Sie sich an, um einen Kommentar zu schreiben.
Loading ...