APEX-Template

Inhalt

1. Wozu dient das Template "APEX-Template"

APEX-Template ist das moderne JTL-Shop 5 Template für Onlinehändler, die Wert auf Design, Performance und Flexibilität legen. Entwickelt für JTL-Shops, die sich vom Standard abheben wollen.

Das APEX-Template dient dazu, Deinen JTL-Shop visuell und technisch auf ein modernes Niveau zu bringen. Es sorgt für eine klare, bildstarke Präsentation Deiner Produkte, verbessert die Nutzerführung und verkürzt den Weg zum Kauf. Gleichzeitig kannst Du Design, Branding und Inhalte ohne Programmierung flexibel anpassen und so Conversion, UX und SEO gezielt optimieren.

2. Was kann das Template "APEX-Template"

Das knowmates-Template „APEX-Template“ wurde speziell für das Shopsystem JTL-Shop entwickelt. Es dient dazu, Deinen Online-Shop optisch und funktional zu modernisieren und eine klare, verkaufsstarke Präsentation Deiner Produkte zu ermöglichen.

Mit APEX erhältst Du ein modernes, bildfokussiertes Design, das Deine Produkte in den Mittelpunkt stellt und die Nutzerführung verbessert. Durch Funktionen wie Quickbuy und optimierte Produktdetailseiten wird der Kaufprozess vereinfacht und die Conversion gesteigert.

Zusätzlich ermöglicht Dir das Template umfangreiche Anpassungen im Backend – etwa bei Farben, Schriftarten, Logos und Layouts – ganz ohne Programmierung. Über den integrierten OnPage Composer kannst Du Inhalte flexibel per Baukastensystem gestalten und Deinen Shop individuell strukturieren.

Das Template ist vollständig responsiv, für mobile Endgeräte optimiert und unterstützt eine suchmaschinenfreundliche sowie barrierearme Darstellung Deines Shops.

3. Systemvoraussetzungen

  • PHP 8.3
    • Erfüllung der JTL Shop Anforderungen
    • php memory_limit > 128M
  • JTL-Shop Version 5.7.0

4. Installation im JTL-Shop

Für Deinen JTL-Shop 5 beziehst Du Plugins über den JTL-Extension Store. Um auf Inhalte des JTL-Extension Stores zugreifen zu können, musst Du zunächst Dein JTL-Konto mit Deinem JTL-Shop 5 verknüpfen. Dies wird normalerweise beim Installationsprozess des Shops bereits abgefragt.

So verknüpfst Du Dein JTL-Konto mit Deinem JTL-Shop 5:

  1. Logge Dich im JTL-Shop-Backend ein.
  2. Navigiere im Menü zu „PLUGINS“ > „Meine Käufe“.
  3. Klicke auf „Konto verknüpfen“.
  4. Logge Dich mit Deinen JTL-Daten ein.
  5. Anschließend siehst Du in „PLUGINS“ > „Meine Käufe“ die Übersicht zu Deinen Lizenzen und Subscriptions.

So buchst Du eine Extension für JTL-Shop 5:

  1. Rufe den JTL-Extension Store auf.
  2. Suche nach dem gewünschten Plugin.
  3. Wähle das Plugin aus und klicke auf „Jetzt auschecken“.
  4. Klicke im folgenden Fenster auf „Anmelden“ und melde Dich mit Deinem zentralen JTL-Login an.
  5. Klicke im JTL-Checkout auf „Jetzt bestellen“, um die Bestellung abzuschließen.
  6. Rufe Dein JTL-Shop-Backend auf. Unter „PLUGINS“ > „Meine Käufe“ befindet sich jetzt im Bereich „Ungebundene Lizenzen“ Deine eben erworbene Lizenz.
  7. Nun ordnest Du das Plugin Deinem Shop zu. Klicke dafür auf „An diesen Onlineshop“ anbinden.
  8. Anschließend findest Du die Lizenz im Bereich „Gebundene Lizenzen“ und die Schaltfläche „Installieren“ steht zur Verfügung. Nach der Installation kannst Du das Plugin im Menü unter „PLUGINS“ > „Plugin-Manager“ in der Registerkarte „Aktiviert“ konfigurieren.

Wichtige Hinweise:

  • Das Template funktioniert nur mit dem „knowmates Apex Template Plugin“.
  • Das Template wird durch das Plugin geladen, installiert und aktiviert.
  • Es wird automatisch ein Child-Template erstellt: APEXChild
  • Aktivierung des Child-Templates erfolgt unter: Einstellungen → Templates

👉 Wichtig: Nur das APEXChild Template darf aktiviert werden.

👉 Anpassungen:

  • ausschließlich im APEXChild durchführen
  • Updates überschreiben diese Änderungen nicht

5. Template "APEX-Template" einrichten

Aktivierung

Rufe im JTL-Admin-Modus über das seitliche Menü „Installierte Plugins“ >  “Knowmates Apex Template Plugin” auf.

Wenn Das Template noch nicht nstalliert ist, wird die Installation des Templates angeboten.

Ansicht - Template nicht aktiviert.

Klicke hier auf APEX aktivieren

 

Nach dem automatischen Download und der Aktivierung steht dir die Konfiguration zur Verfügung.

 

Konfiguration

Rufe im JTL-Admin-Modus über das seitliche Menü „Installierte Plugins“ >  “Knowmates Apex Template Plugin” auf.

Weiter gehst Du über den Button “Template Editor öffnen”

Ansicht Template-Editor Öffnen

Klicke hier auf den Button Template-Editor öffnen, m in den Editor-Bereich zuu gelangen.

So gelangst Du in den Editor-Modus.

 

6. Sonstiges / Bemerkungen

Auf der linken Seite siehst Du ein Menü mit “Einstellungen”, “Entwürfe”, “Template-Update”, “Doku/Support”

Templateeinstellungen

Template-Einstellungen

Über die Einstellungen kannst Du verschiedene Optionen und Bereiche auswählen, die Du konfigurieren kannst:

  1. Allgemein
  2. Logo
  3. Farben und Erscheinungsbild
  4. Schriftarten
  5. Header
  6. Hauptmenü
  7. Listen- und Galerieansicht
  8. Produktdetailansicht
  9. Zahlungs- und Versandarten
  10. Footer

Allgemein:

Unter den allgemeinen Einstellungen findest Du folgende Konfigurationsmöglichkeiten:

  • Komprimierung von Java-Script- und CSS-Dateien an- und ausschalten
  • ein Favicon hochladen
  • Schaltfläche „Nach oben scrollen“ anzeigen an- und ausschalten
  • Seitenübergänge animieren an- und ausschalten
  • Magneteffekt aktivieren an- und ausschalten
  • Sliderposition wählen: „zwischen Header und Content“ oder „im Contentbereich“
  • Bannerposition wählen: „zwischen Header und Content“ oder „im Contentbereich“

 

Logo

Unter Logo kannst Du:

  • „Logo im Header“ hochladen
  • „Logo im Header für Smartphone“ hochladen

 

Farben und Erscheinungsbild

Hier kannst Du:

  • zwischen hellem und dunklem Farbschema wählen

 

Allgemeine Farbeinstellungen über Farbauswahl (Color Picker mit Hex-Code-Eingabe) gestalten:

  • Seiten-Hintergrundfarbe
  • Hintergrundfarbe für Produkt-/Kategorie-Kacheln
  • sekundäre Hintergrundfarbe für Seiten
  • Headlines-Schriftfarbe
  • Preis-Schriftfarbe

 

Akzentfarben über Farbauswahl (Color Picker mit Hex-Code-Eingabe)

konfigurieren:

  • Primärfarbe
  • Sekundärfarbe
  • Erfolgreich
  • Warnung
  • Fehler
  • Information
  • Bewertungssterne

 

Headerfarben über Farbauswahl (Color Picker mit Hex-Code-Eingabe) auswählen:

  • Header sekundäre Hintergrundfarbe

 

Footerfarben über Farbauswahl (Color Picker mit Hex-Code-Eingabe) auswählen:

  • Footer-Hintergrundfarbe
  • Footer Copyright-Zeile Hintergrundfarbe

 

Farben der Artikelsticker konfigurieren:

  • Bestseller
  • Sale
  • Neu
  • Top
  • Bald verfügbar
  • Top Bewertet
  • Ausverkauft
  • Auf Lager
  • Vorbestellen

 

Layout-Einstellungen vornehmen:

  • Layout Eckenradius in Pixel
  • Eingabefelder Eckenradius in Pixel
  • Buttons Eckenradius in Pixel
  • Schriftgröße der Preisangabe auf der Detailseite in Pixel

 

Benutzerdefiniertes CSS, Sass oder Scss über einen (S)CSS-Editor konfigurieren

 

Schriftarten

 

Du kannst für die Headline eine Schriftart über ein Drop-Down-Menü auswählen oder eine eigene Schrift im TTF-Format hochladen. Aktuell stehen 19 Schriftarten zur Verfügung.

 

Ebenso kannst du für die Inhalts-Schriftart eine Schriftart auswählen oder hochladen.

 

Header

Hier kannst du diverse Einstellungen für Deinen Header vornehmen:

  • Topbar anzeigen an- oder ausschalten
  • USP im Header einfügen
  • das Header Layout auswählen: entweder einzeilig oder mehrzeilig

 

Hauptmenü

Folgende Einstellungen für Dein Hauptmenü stehen zur Verfügung:

 

  • Sales Bild im Hauptmenü:
    • über den Button “Sales Bilder bearbeiten” gelangst Du in ein Pop-Up-Fenster, hier kannst Du für verschiedene Menüpunkte ein Bild auswählen und Feineinstellungen vornehmen, wie Verlinkungen, Button Text, Button Farbe, Sub-Headline Text, Headline Text
  • Menüdarstellung
    • wähle zwischen “Traditionell” und “Kategoriebilder als Slider”
      • Die traditionelle Darstellung ähnelt dem Nova Template. Hier können bis zu zwei weitere Kategorieebenen angezeigt werden. Die Option Darstellung als Slider bildet die Kategorien auf Desktopgeräten in einem Slider mit großen Bildern ab. In der Mobilansicht werden mit dieser Variante Kategoriebilder im Menü angezeigt.

 

  • je nach Einstellung kannst du darunter verschiedene Optionen auswählen, bei “Traditionell” gibt es:
    • Kategoriebilder für erste Unterkategorie an- oder ausschalten (nur Desktop)
    • Unterkategorien an- oder ausschalten
    • Menü in aktueller Kategorie öffnen (nur mobil) an- oder ausschalten
    • Seiten der Linkgruppe “megamenu” an- oder ausschalten
    • Hersteller-Dropdown an- oder ausschalten
    • Herstellerbilder (Desktop)an- oder ausschalten

 

  • bei “Kategoriebilder als Slider” fehlen die Optionen “Kategoriebilder für erste Unterkategorie”, “Unterkategorien”

 

Listen- und Galerieansicht

folgende Optionen findest du hier:

  • Kategorie Titelbereich Bilder: Unter dem Button “Headerbilder bearbeiten” findest du die Einstellungen für die Kategorie Headerbilder. Im Standard werden die Kategoriebilder des Shops genutzt. Alternativ dazu können in diesem Fenster abweichende Bilder sowie ein Standardbild festgelegt werden. Das Standardbild wird genutzt, wenn es kein Kategoriebild gibt und auch kein abweichendes Bild hinterlegt wurde. Die Optionen sind:
  • Kategorie-Titelbereich aktivieren an- und ausschalten
  • Abweichende Bilder für jede Kategorie festlegen
  • Standardbild hochladen, wenn kein anderes Bild gefunden wird
  • Position der Unterkategorien unterhalb oder oberhalb der Artikelliste anzeigen lassen
  • Spaltenzahl in Galerieansicht für mobil, Smartphone quer und Tablet auswählen
  • Produktbilder in Produktboxen als Slider an- und ausschalten
  • Quickbuy Button anzeigen an- und ausschalten
  • Bewertungen anzeigen an- und ausschalten
  • Variationsvorschau anzeigen an- und ausschalten
  • Filtersuche ab X Filteroptionen anzeigen Anzahl festlegen
  • Anzahl der initial sichtbaren Filteroptionen je Feilter auswählen
  • Filter initial immer ausklappen an- und ausschalten

 

Produktdetailansicht

  • USPs unter Produktbild mit dem Button “USP hinzufügen” hinzufügen (Diese USPs werden unterhalb des Artikelbilds dargestellt. Du kannst die USPs auch per Warenwirtschaft für jedes Produkt separat pflegen. Lege dazubis zu drei Attribute mit den Namen knm_apex_product_usp_1, knm_apex_product_usp_2 und knm_apex_product_usp_3 an und befülle diese mit Inhalt)
  • Anzahl weitere Artikelbilder festlegen
  • Artikelbild neben Beschreibungstext anzeigen an- und ausschalten
  • Auswahl des Artikelbilds wählen zwischen “erstes Artikelbild, letztes Artikelbild, 2. Artikelbild, 3. Artikelbild, 4. Artikelbild, 5. Artikelbild, 6. Artikelbild, 7. Artikelbild, 8. Artikelbild, 9. Artikelbild, 10. Artikelbild)
  • Produkt-Badge auch beim Artikelnamen anzeigen an- und ausschalten
  • Name des Funktionsattributs für FuAG Icons auswählen (Hinterlege die Informationen für das Netzteil im entsprechenden benannten Funktionsattribut in der Warenwirtschaft nach folgendem Schema: Netzteil (ja/nein); Ladeleistung Min-Max (in Watt, optional); Schnellladung (PD oder leer), Netzteil enthalten? — ja oder nein, Ladeleistung in Watt (Min-Max) — z.B. 10-50 (leer lassen, falls nicht verfügbar), Schnellladetechnik — PD (oder leer lassen) Zum Beispiel: ja;10-50;PD
    nein;5-20;)
  • APEX Sales Booster

Der Sales Booster zeigt an, wie oft der Artikel in den letzten X Stunden verkauft wurde. Der Sales Booster wird nur angezeigt, wenn mehr als 0 Verkäufe ermittelt wurden.

  • Sales Booster „X Mal Gekauft“ anzeigen an- und ausschalten
  • Stundenlimit festlegen
  • Sales Booster „Zuletzt gekauft“ anzeigen  an- und ausschalten
  • Tageslimit festlegen

 

Zahlungs- und Versandarten

  • Zahlungsarten Icons per Drag & Down auswählen
  • Zahlunsarten Icons auf Produktdetailseite anzeigen an- und ausschalten
  • Versandarten Icons per Drag & Down auswählen
  • Versandarten Icons auf Produktdetailseite anzeigen an- und ausschalten
  • Versandkostenfrei-Hinweis im Offcanvas Warenkorb anzeigen an- und ausschalten (Sofern eine Versandart hinterlegt ist, die ab einem bestimmten Warenwert kostenlos ist, wird angezeigt wieviel noch fehlt, um kostenlosen Versand zu erhalten)

 

Footer

  • Newsletter-Anmeldung anzeigen an- und ausschalten
  • Footer Hintergrundbild hochladen
  • Social-Media-Schaltflächen anzeigen an- und ausschalten
  • Links eingeben für die Social-Media Buttons (Facebook, X, YouTube, Xing, LinkedIn, vimeo, Instagram, Pinterest, TikTok)

Empfohlene Shop-Einstellungen

  • Cross-Selling im Warenkorb: 10–15 Artikel

👉 Wichtig: Filter: im Content-Bereich und in der Navigationsbox anzeigen

 

Bildeinstellungen

Empfehlungen:

  • quadratische Produktbilder
  • freigestellt (PNG mit transparentem Hintergrund)
  • randlose Motive
  • möglichst hochauflösend (Bilder ab ca. 1000x1000px)

Wichtige Faktoren:

  • Hintergrundfarbe
  • Containergröße
  • Dateiformat
Bildhinweise

Bildhinweise zu Produktbildern

 

Shop-Logo

  • ideal: SVG
  • alternativ: PNG (transparent)
  • eher breit als hoch

Empfohlene Bildeinstellungen

Allgemeine Tipps

  • Startseiten-Slider deaktivieren
  • stattdessen OPC verwenden

Apex Portlets nutzen

  • große Slider
  • Hero-Bereiche
  • Bilder-Portlets usw.

Best Practices für Artikelbilder

  • hochwertige Bilder verwenden
  • mehrere Produktbilder nutzen
  • klare Unterschiede zwischen Bildern
  • 👉 Wichtig: Kategorie-Bilder in Wawi pflegen

Eigene Anpassungen

👉 Wichtig: nur im APEXChild Template arbeiten. Selbst hinzugefügte TPL-Dateien sind update-sicher

Custom CSS über Template-Editor im Template Plugin oder Datei: APEXChild/themes/clear/custom.css