Beschreibung
Beat ist unsere Template-Basis für Händler, die einen modernen und professionellen JTL-Shop aufbauen möchten, ohne direkt die umfangreichen Möglichkeiten von Material oder Remake zu benötigen.
Das Template konzentriert sich bewusst auf die wichtigsten Funktionen für einen zeitgemäßen Onlineshop. Es verbindet eine klare Gestaltung mit praktischen Erweiterungen für Produktdarstellung, Verkauf, Performance und Barrierefreiheit – und bleibt dabei übersichtlich und einfach zu konfigurieren.
Beat ist der Nachfolger unserer früheren Professional-Templates und führt unter anderem die Konzepte von Smile, Flex und Flat auf einer gemeinsamen, modernen Basis weiter.
Für JTL-Shop entwickelt
Beat wurde speziell für JTL-Shop 5 entwickelt und integriert sich direkt in dessen bestehende Funktionen und Strukturen. Dadurch erhältst du eine solide Template-Basis, die den JTL-Standard gezielt erweitert, ohne den Shop unnötig komplex zu machen.
Optimiert für Desktop und Mobile
Beat ist vollständig responsive und passt Navigation, Inhalte und Produktdarstellung automatisch an unterschiedliche Bildschirmgrößen an. Dein Shop bleibt damit auf Desktop, Tablet und Smartphone übersichtlich und komfortabel bedienbar.
Produkte direkt verkaufen
Produkte können direkt aus der Galerieansicht und von der Startseite in den Warenkorb gelegt werden. Kunden gelangen dadurch schneller zum Kauf und müssen nicht bei jedem Artikel zunächst die Produktdetailseite öffnen.
Schnell und schlank aufgebaut
Beat setzt auf eine effiziente Einbindung von Schriftarten, CSS und weiteren Ressourcen. Unnötiger Ballast wird reduziert und schafft damit eine solide Grundlage für schnelle Ladezeiten, Core Web Vitals und SEO.
Barrierefreiheit berücksichtigt
Beat enthält Funktionen für einen zugänglicheren JTL-Shop. Dazu gehört unter anderem ein Font Resizer, mit dem Besucher die Schriftgröße individuell an ihre Bedürfnisse anpassen können.
Damit werden wichtige Anforderungen an moderne und barriereärmere Onlineshops bereits innerhalb der Template-Basis berücksichtigt.
Verschiedene Themes inklusive
Mit den kostenlosen Themes MyBeat, Flex, Smile und Wood stehen unterschiedliche Designs als Ausgangspunkt zur Verfügung. So kannst du die visuelle Ausrichtung deines Shops verändern und anschließend an deine eigene Marke anpassen.
Bei Bedarf erweiterbar
Beat konzentriert sich bewusst auf eine schlanke Grundausstattung. Benötigst du zusätzliche Funktionen, lässt sich das Template mit weiteren Plugins und individuellen Anpassungen erweitern.
So musst du beim Einstieg nicht für Funktionen bezahlen, die dein Shop noch gar nicht benötigt, und kannst die technische Basis später gezielt ausbauen.
Beat ist damit die richtige Wahl für kleinere Shops, Einsteiger und Projekte mit klaren Anforderungen, die eine professionelle JTL-Shop-Basis suchen, ohne die umfangreiche Funktions- und Konfigurationstiefe von Material oder Remake zu benötigen.
Highlights(8)
Responsives Design
Der Shop passt sich automatisch an Desktop, Tablet und Smartphone an – für ein einheitliches Einkaufserlebnis auf jedem Gerät.
Progressive Web App (PWA)
Dein Shop lässt sich wie eine native App auf dem Homescreen installieren – ganz ohne App Store.
Zusätzliche Plugins enthalten
Im Lieferumfang stecken zusätzliche Plugins, die den Funktionsumfang deutlich erweitern – siehe Abschnitt Plugins.
Kostenlose Design-Themes enthalten
Vorkonfigurierte Themes verleihen deinem Shop direkt nach der Aktivierung einen professionellen Look.
Nah am JTL-Standard
Die Template-Struktur bleibt weitgehend erhalten – kompatibel mit JTL-Plugins und künftigen Shop-Updates.
Klar strukturierte Produktseiten
Beschreibung, Preis, Verfügbarkeit, Varianten, Bewertungen und Bilder sind klar angeordnet und auf einen Blick erfassbar.
Kurze Ladezeiten & SEO-optimiert
Schlanker Code, Lazy Loading und eine saubere semantische Struktur sorgen für schnelle Ladezeiten und gute Rankings.
Barrierefrei gestaltet (BFSG)
Tastaturbedienung, ausreichende Kontraste und anpassbare Schriftgrößen – vorbereitet auf das Barrierefreiheitsstärkungsgesetz (BFSG).
Performance(2)
Optimierte Ladezeit
Template, Funktionen und Zusatzelemente sind auf minimale Ladezeit optimiert.
PageSpeed Optimierung
Minifiziertes CSS/JS, Lazy Loading und Systemschriften sorgen für Bestwerte in Google PageSpeed Insights.
Update-Garantie(2)
12 Monate Updates, verlängerbar
Während der Update-Garantie erhältst du alle Template-Updates kostenlos im Downloadbereich.
Einmalige Zahlung, kein Abo
Einmal zahlen, dauerhaft nutzen – ohne Abo und ohne versteckte Kosten.
Barrierefreiheit(5)
Bedienung per Tastatur
Alle interaktiven Elemente wie Buttons, Links und Formulare sind per Tab, Shift+Tab und Enter/Leertaste bedienbar.
Zoomfähiges Layout
Text lässt sich auf bis zu 200 % vergrößern, ohne dass Inhalte verloren gehen.
Beschriftete Formularelemente
Such- und Checkout-Felder haben eindeutige Labels; Fehlermeldungen sind verständlich und direkt am Feld erklärt.
Lesbarkeit und Farbkontraste
Ausreichende Farbkontraste und gut lesbare Schriften machen Inhalte für alle Nutzer zugänglich.
Schriftgröße für Besucher anpassbar
Über den integrierten Font Resizer stellen Besucher die Schriftgröße nach ihren Bedürfnissen ein.
SEO-Optimierung(2)
Saubere Überschriften-Struktur (H1–H6)
Volle Kontrolle über alle Heading-Ebenen – eine klare semantische Gliederung, die Suchmaschinen die Seitenhierarchie verstehen lässt.
Rich Snippets & strukturierte Daten
Schema.org-Markup für Produkte, Bewertungen, Breadcrumbs und FAQ sorgt für Sterne, Preise und mehr direkt in den Suchergebnissen.
Layout(2)
Responsives Template
Das Layout passt sich automatisch an jede Bildschirmgröße an – vom Smartphone bis zum großen Monitor.
Dynamische Seitenbreite
Lege die maximale Seitenbreite selbst fest und stimme das Template optimal auf deine Inhalte und Grafiken ab.
Farbleitsystem(1)
Integriertes Farbleitsystem
Farben kennzeichnen Kategorien und Bereiche – Kunden orientieren sich schneller und finden Produkte zügiger.
Shop-Design(3)
Mehrere Themes zur Auswahl
Über ein Dutzend kostenlose Themes für verschiedene Branchen – wähle den Look, der zu dir passt.
Farben je Bereich einstellbar
Header, Navigation, Inhalt, Buttons und Footer erhalten jeweils eigene Farben.
Anpassbar mithilfe des JTL Theme Editors
Mit dem kostenlosen JTL Theme Editor passt du alle Farben selbst an – ohne Code.
Child-Template(3)
Child-Template inklusive
Eigene Anpassungen nimmst du im mitgelieferten Child-Template vor – so bleibt das Template updatefähig.
Custom SCSS für eigene Styles
Vorbereitete SCSS-Dateien nehmen eigene Anpassungen sauber auf.
Custom CSS für eigene Styles
Alternativ zu SCSS steht eine eigene CSS-Datei für individuelle Styles bereit.
Header(9)
Flexibler Header-Aufbau
Logo, Navigation und Kategorien lassen sich im Header flexibel anordnen.
Logo-Größe einstellbar
Die Logo-Größe stellst du getrennt für Desktop und Mobilgeräte ein.
Logo-Position wählbar
Platziere dein Logo im Header links, zentriert oder rechts.
Sticky Header
Der Kopfbereich bleibt beim Scrollen am oberen Bildschirmrand fixiert – Suche, Navigation und Warenkorb sind jederzeit erreichbar.
Dropdown-Navigation mit drei Ebenen
Jede der drei Navigationsebenen lässt sich einzeln aktivieren oder deaktivieren.
Navigation-Scroller
Bei vielen Kategorien scrollt die Navigation horizontal, statt in eine zweite Zeile umzubrechen.
Transparenter Header
Der Header-Hintergrund kann transparent eingestellt werden, z. B. über einem Banner oder Slider.
Topbar mit USPs (deaktivierbar)
Die Topbar nimmt eigene USPs mit Text, Icons und Links auf – oder wird komplett ausgeblendet.
Schrift- und Icongrößen einstellbar
Schriftgröße der Navigation, Icongröße sowie vertikale und horizontale Abstände sind individuell einstellbar.
Navigation(1)
Bis zu 5 Kategorie-Ebenen
Unterstützt bis zu fünf Kategorie-Ebenen – üblich sind bei Templates nur drei.
Startseite(3)
Kauffunktion auf der Startseite
Artikel landen direkt von der Startseite im Warenkorb – im Slider ebenso wie im Grid-Layout.
Individuell mit Portlets gestaltbar
Gestalte die Startseite frei mit Portlets im OnPage Composer.
Vordefinierte Startseite zum Importieren
Importiere vorbereitete Startseiten-Elemente und baue deine Startseite in wenigen Minuten auf.
Kategorie(1)
Kauffunktion in der Artikelliste
Artikel lassen sich direkt aus der Artikelliste in den Warenkorb legen.
Produktseite(4)
Zusätzliche Tabs
Zeigt globale und artikelbezogene Tabs an, die du in der JTL-Wawi pflegst.
Darstellung der Tab-Navigation
Produktinfos lassen sich als Tabs, Accordion oder Liste darstellen – auf- oder zugeklappt.
Darstellung der Vorschaubilder
Größe und Anordnung der kleinen Artikelbilder neben dem Hauptbild sind einstellbar.
Cross-Selling-Artikel
In der JTL-Wawi definierte Cross-Selling-Artikel werden als Empfehlungen auf der Detailseite ausgespielt.
Warenkorb(2)
Zweigeteilter Warenkorb
Links alle Positionen, rechts die Zusammenfassung mit Versand- und Zahlungsinfos.
Mehrere Warenkorb-Darstellungen
Wähle zwischen mehreren Darstellungsvarianten für den Warenkorb.
Checkout(3)
Gastbestellung und Kundenkonto getrennt
Gastbestellung und Kundenkonto sind visuell klar getrennt – Kunden finden sofort den richtigen Weg.
Reduzierter Checkout-Header und -Footer
Header und Footer zeigen im Checkout nur das Nötigste – für weniger Kaufabbrüche.
3-Step-Checkout
Drei klar gegliederte Schritte sorgen für Orientierung im gesamten Kaufprozess.
Footer(7)
Individueller Footer
Inhalte, Spaltenaufteilung, Reihenfolge, Breite und Styling des Footers sind frei konfigurierbar.
Integrierte Platzhalter
Fertige Platzhalter für Logo, Sprache, Währung, Social Media und Newsletter lassen sich an beliebiger Stelle im Footer einsetzen.
Shoplogo im Footer
Zeige dein Shoplogo zusätzlich im Footer – Position und Box bestimmst du selbst.
Spaltenbreiten einstellbar
Die Breite der Footer-Spalten stellst du getrennt für große Bildschirme und Tablets ein.
Footer-Spalten mobil als Accordion
Auf Mobilgeräten werden die Spalten zu aufklappbaren Bereichen – das spart Platz.
Newsletter-Anmeldung im Footer
Die Newsletter-Anmeldung erscheint als Box im Footer oder als eigenständige Leiste mit Überschrift.
Nach-oben-Button
Auf langen Seiten bringt ein Klick Kunden zurück zum Seitenanfang; mobil wird der Button ausgeblendet.
Anpassungen(4)
Anpassungen ohne Servicepartner
Farben und Layout passt du selbst im Backend an – ganz ohne Servicepartner oder Programmierkenntnisse.
Größe des Shoplogos einstellbar
Stelle die Logogröße selbst ein – getrennt für Desktop und Smartphone.
Template-Farben anpassbar
Passe Header, Navigation, Footer, Links und mehr über den mitgelieferten Theme Editor an.
Font Awesome Icons
Font-Awesome-Icons sind überall im Template nutzbar – auch über die Sprachvariablen.
Übergreifende Zusatzfunktionen(4)
Preis-Slider im Filter
Besucher grenzen Produkte per Schieberegler auf ihre Preisspanne ein.
Inhalte per UTM-Parameter ausspielen
Zeige Inhalte gezielt abhängig von Kampagnenquelle oder -medium – passend zur Anzeige, über die der Besucher kam.
Lazy Loading für Bilder
Bilder außerhalb des sichtbaren Bereichs werden erst beim Scrollen geladen – das beschleunigt den Seitenaufbau.
Custom CSS im Backend
Eigenes CSS pflegst du zentral im Backend – ohne Dateien im Template anzufassen.
Themy Toolbox(5)
Portlet: FAQ mit FAQ-Schema
FAQ-Bereiche überall im Shop – mit optionalem Google-FAQ-Schema für Rich Results in der Suche.
Portlet: SEO-Überschriften
Trenne Optik und Semantik: Überschriften sehen wie Headlines aus, ohne zwingend als H-Tag ausgegeben zu werden.
Portlet: Flex Container
Positioniert Inhalte vollbreit oder zentriert, mit automatischen Abständen und optionaler Anzeige per UTM-Parameter.
Portlet: Product Feed
Erweiterte Produktdarstellung als Grid oder Slider – mit direkter Kauffunktion.
Portlet: Buttons mit Style
Sechs Button-Varianten, auch als Outline und inline – mehrere Buttons nebeneinander sind möglich.