Von Alexander LuftJTL Service Partner Gold · Ahrensfelde bei Berlin · 15. Mai 2026 · 4 Min. Lesezeit
Wie Ihr JTL-Shop aussieht, entscheidet über den ersten Eindruck bei Ihren Kunden. Wer ein schlechtes Design oder unlesbare Schriften sieht, verlässt den Shop oft innerhalb von Sekunden. In Teil 3 unserer JTL-Shop-Tutorial-Serie zeigen wir, wie Sie ein passendes Template wählen, Ihre Unternehmensfarben und das Logo einbinden und mit dem integrierten OnPage Composer Layoutanpassungen ohne Programmierkenntnisse vornehmen.
JTL-Shop 5 liefert mit dem NOVA-Template eine solide, responsive Basis mit. Über das Admin-Backend unter Darstellung → Einstellungen → Templates steuern Sie Farben, Header-Layout, Schriftarten und Favicon zentral. Wer darüber hinaus einzelne Seiten wie Startseite, Kategorietexte oder CMS-Inhalte gestalten möchte, nutzt den OnPage Composer. Dieser visuelle Editor öffnet sich direkt im Frontend — Portlets wie Slider, Banner, Text oder Bildgalerien lassen sich per Drag-and-drop platzieren. Aus unserer Praxis in über 300 Projekten wissen wir: Die häufigsten Design-Probleme entstehen nicht beim Template-Kauf, sondern bei der Konfiguration danach.
Template wählen: Worauf es bei JTL-Shop 5 ankommt
JTL-Shop 5 kommt mit dem NOVA-Template als Standard. Es ist responsive, wird aktiv weiterentwickelt und unterstützt drei vorgefertigte Themes: clear, midnight und blackline. Für die meisten Händler ist NOVA der richtige Ausgangspunkt — besonders dann, wenn keine spezifischen Layout-Anforderungen bestehen.
Wer ein individuelleres Erscheinungsbild anstrebt, kann im JTL-Extension-Store Premium-Templates wie SALEPIX oder NOVA-Erweiterungen kaufen. Wichtig dabei: Templates sollten als Child-Template eingerichtet werden, damit eigene Anpassungen bei späteren JTL-Updates nicht überschrieben werden. Wer direkt im Basis-Template editiert, verliert seine Änderungen beim nächsten Update. Laut JTL-Dokumentation gilt: Child-Template anlegen, dort anpassen, Basis-Template nur lesen.
Auf Performance achten: Unter Darstellung → Einstellungen → Templates → NOVA → Allgemein lässt sich die Komprimierung von JavaScript- und CSS-Dateien aktivieren. Das verbessert die Ladezeit messbar — empfohlen für alle Produktivshops.
Logo, Farben und Schriften im Shop-Backend anpassen
Der direkte Weg zu den Design-Einstellungen: Darstellung → Einstellungen → Templates → NOVA → Einstellungen. Hier steuern Sie das aktive Theme (clear/midnight/blackline), den Header aus 5 vorgefertigten Layouts, und ob die linke Seitenleiste auf allen Seiten oder nur auf Artikellisten erscheint.
Das Logo laden Sie unter Darstellung → Logo hoch. JTL-Shop empfiehlt SVG oder PNG mit transparentem Hintergrund. Das Favicon — das kleine Icon im Browser-Tab — lässt sich ebenfalls im Backend hinterlegen. JTL-Shop generiert daraus automatisch alle benötigten Varianten (favicon.ico, apple-touch-icon, android-chrome und weitere). Laut JTL-Guide empfiehlt JTL eine PNG-Quelldatei in 512 x 512 Pixeln für das Favicon.
Für Schaltflächen-Animationen und Hover-Effekte gibt es eigene Optionen im Backend — aktivieren oder deaktivieren je nach gewünschtem Erscheinungsbild. Wer Primär- und Akzentfarben exakt nach Corporate Identity setzen möchte, kommt mit den Template-Einstellungen schnell ans Ziel. Für tiefgreifende Farbänderungen ist eine eigene CSS-Datei im Child-Template die sicherere Lösung.
Typische Design-Fehler und wie Sie sie vermeiden
Der häufigste Fehler, den wir in Kundenprojekten sehen: Händler passen das Design nur am Desktop an und prüfen die mobile Ansicht nicht. JTL-Shop ist zwar grundsätzlich responsive, aber Portlets im OnPage Composer haben feste Außenabstände — diese passen sich nicht automatisch an kleine Bildschirme an. Laut JTL-Dokumentation müssen responsive Abstände über spezifische Layout-Einstellungen im OPC gesetzt werden, nicht über feste Pixel-Werte.
Zweites Problem: zu viele Farben. Shops, die drei oder mehr Akzentfarben kombinieren, wirken unruhig. Die Faustregel aus der Praxis: eine Primärfarbe, eine Akzentfarbe, neutrales Grau für Hintergründe. Das reicht für einen professionellen Auftritt.
Drittes Problem: schlechte Kontraste bei Schaltflächen. Helle Schrift auf hellem Hintergrund ist für sehbeeinträchtigte Nutzer unlesbar und verstößt seit dem 28. Juni 2026 gegen die Anforderungen des Barrierefreiheitsstärkungsgesetzes (BFSG) für Online-Shops. Wer seinen Shop jetzt neu einrichtet, sollte WCAG-Kontrastwerte von mindestens 4,5:1 für Text direkt einhalten — das spart Nacharbeit.
Häufige Fragen
Autor: Alexander Luft, Inhaber der Vlarom E-Commerce Agentur, JTL Service Partner Gold, Ahrensfelde bei Berlin. LinkedIn-Profil →
