
Beschreibung
Material ist unser JTL-Shop Template für Händler, die mehr Möglichkeiten benötigen, ihren Shop aber trotzdem auf einer sauberen, wartbaren und möglichst standardnahen Basis betreiben möchten.
Mit über 100 zusätzlichen Funktionen und Optimierungen erweitert Material den JTL-Shop an den entscheidenden Stellen – von Navigation und Produktdarstellung über SEO und Performance bis hin zu Warenkorb und Checkout. Dabei bleibt das Template flexibel konfigurierbar und lässt sich ohne Programmierkenntnisse an die eigene Marke und das jeweilige Sortiment anpassen.
Über 100 zusätzliche Funktionen
Material erweitert den JTL-Shop um zahlreiche Funktionen, die direkt innerhalb des Templates zur Verfügung stehen. Dazu gehören verschiedene Header- und Navigationsvarianten, zusätzliche Darstellungsoptionen für Kategorien und Produkte, flexible Footer, optimierte Warenkorb- und Checkout-Ansichten sowie viele kleinere Verbesserungen für die tägliche Nutzung des Shops.
Der entscheidende Unterschied: Material versucht nicht, den JTL-Shop komplett neu zu erfinden. Die bestehende Struktur bleibt weitgehend erhalten und wird gezielt erweitert.
Direkt aus Produktlisten verkaufen
Produkte können direkt von der Startseite und aus Kategorieansichten in den Warenkorb gelegt werden. Für Shops mit höheren Bestellmengen kann zusätzlich ein Mengenfeld direkt im Listing angezeigt werden.
So werden unnötige Zwischenschritte reduziert und Kunden können schneller einkaufen – besonders interessant für umfangreiche Sortimente und B2B-Shops.
Flexibles Shop-Design
Material bietet zahlreiche Möglichkeiten, das Erscheinungsbild an die eigene Marke anzupassen. Seitenbreite, Farben, Logo-Position und -Größe, Suche, Navigation, Header, Footer und weitere Bereiche können individuell konfiguriert werden.
Mit dem Theme Editor lassen sich Farben ohne Eingriff in den Template-Code verändern. Für weitergehende Anpassungen sind ein Child-Template sowie eigene SCSS- und CSS-Dateien bereits vorgesehen.
Unterschiedliche Navigationen für große Sortimente
Material unterstützt mehrere Navigationsvarianten und bis zu fünf Kategorieebenen. Dropdown-Navigation, horizontal scrollbare Kategorien, eine aufklappbare Sidebar und eine Sticky Sidebar bieten zusätzliche Möglichkeiten, auch umfangreiche Sortimente übersichtlich abzubilden.
Optimierter Warenkorb und Checkout
Auch der eigentliche Kaufprozess wurde gegenüber der Standarddarstellung erweitert. Material bietet unterschiedliche Warenkorbvarianten sowie einen übersichtlichen, zweigeteilten Warenkorb.
Der Checkout konzentriert sich bewusst auf den Kaufabschluss. Ein reduzierter Header und Footer vermeiden Ablenkungen, Gastbestellung und Kundenkonto sind klar voneinander getrennt und der Bestellprozess wird in drei übersichtliche Schritte gegliedert.
SEO und Performance integriert
Material bringt bereits auf Template-Ebene zahlreiche technische SEO-Optimierungen mit. Dazu gehören eine saubere semantische Struktur, steuerbare Überschriften, strukturierte Daten und Rich Snippets sowie zusätzliche Möglichkeiten für Kategorie- und FAQ-Inhalte.
Lazy Loading, optimierte CSS- und JavaScript-Ressourcen und eine schlanke Template-Struktur schaffen gleichzeitig eine gute Grundlage für kurze Ladezeiten und Core Web Vitals.
Barrierefrei entwickelt
Material berücksichtigt zentrale Anforderungen an einen zugänglichen Onlineshop. Interaktive Elemente können über die Tastatur bedient werden, Inhalte bleiben bei Vergrößerung nutzbar, Formulare verfügen über eindeutige Beschriftungen und Schriftgrößen können individuell angepasst werden.
Damit bietet das Template bereits eine technische Grundlage für die Anforderungen des Barrierefreiheitsstärkungsgesetzes (BFSG).
Inhalte gezielt für Kampagnen ausspielen
Eine Besonderheit von Material ist die Möglichkeit, Inhalte abhängig von UTM-Parametern anzuzeigen. Besucher unterschiedlicher Kampagnen können dadurch gezielt andere Inhalte oder Angebote sehen – direkt innerhalb des Shops und ohne dafür separate Shop-Versionen aufbauen zu müssen.
Kostenlose Themes als Ausgangspunkt
Mit Aviator, Move, MyMaterial und Vitra stehen verschiedene vorkonfigurierte Themes zur Verfügung. Sie dienen als fertige Ausgangspunkte und können anschließend an das eigene Corporate Design angepasst werden.
Eine Basis, die mit deinem Shop wächst
Material ist bewusst als langfristige Template-Basis konzipiert. Es bleibt relativ nah am JTL-Standard, erweitert diesen aber dort, wo für professionelle Shops mehr Flexibilität, bessere Benutzerführung oder zusätzliche Funktionen benötigt werden.
Dadurch eignet sich Material besonders für wachsende JTL-Shops, die heute mehr Möglichkeiten benötigen und sich gleichzeitig die Freiheit für zukünftige Erweiterungen erhalten möchten.
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(3)
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.
Layout Boxed einstellbar
Header, Inhalt und Footer werden mittig mit farbigem Hintergrund dargestellt – mit mehreren Einstellungsoptionen.
Farbleitsystem(3)
Integriertes Farbleitsystem
Farben kennzeichnen Kategorien und Bereiche – Kunden orientieren sich schneller und finden Produkte zügiger.
Verbesserte Benutzererfahrung
Kunden erkennen auf einen Blick, welche Kategorien und Produktgruppen es gibt.
Höhere Conversion-Rate
Wer schneller findet, was er sucht, kauft eher – eine klare Farbführung verkürzt den Weg zum Produkt.
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(2)
Position eigener Links einstellbar
Eigene Links wie Home, Über uns oder Hilfe erscheinen wahlweise vor oder nach den Kategorien.
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(6)
Kategoriebeschreibung unten anzeigen
Die Kategoriebeschreibung kann per Einstellung unterhalb der Produktliste ausgegeben werden.
Kategoriebeschreibung splitten (oben und unten)
Ein Teil der Beschreibung steht über der Produktliste, der Rest darunter – ideal für SEO-Texte ohne Produkte nach unten zu drängen.
Kauffunktion in der Artikelliste
Artikel lassen sich direkt aus der Artikelliste in den Warenkorb legen.
Mengenfeld in der Galerie-Ansicht
Ein Mengenfeld direkt in der Galerie-Ansicht legt die gewünschte Stückzahl ohne Umweg in den Warenkorb – ideal für B2B.
Lieferzeit ausblendbar
Blende die Lieferzeit in der Galerie-Ansicht aus, um die Produktkacheln übersichtlicher zu halten.
Sticky Sidebar in der Kategorie
Die Seitenleiste mit Unterkategorien und Filtern bleibt beim Scrollen stehen – alle Filtermöglichkeiten bleiben im Blick.
Produktseite(5)
Zusätzliche Tabs
Zeigt globale und artikelbezogene Tabs an, die du in der JTL-Wawi pflegst.
Eigenschaften neben der Beschreibung
Produkteigenschaften stehen direkt neben der Beschreibung und bleiben so immer im Blickfeld.
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(4)
Schnelle Kauffunktion
Artikel landen per Klick im Warenkorb, ohne die Seite neu zu laden – auch mehrere hintereinander.
Zweigeteilter Warenkorb
Links alle Positionen, rechts die Zusammenfassung mit Versand- und Zahlungsinfos.
Warenkorb-Dropdown (mobil schaltbar)
Das Dropdown lässt sich auf Mobilgeräten deaktivieren – Kunden gelangen dann mit einem Klick direkt zum Warenkorb.
Mehrere Warenkorb-Darstellungen
Wähle zwischen mehreren Darstellungsvarianten für den Warenkorb.
Checkout(6)
Überarbeiteter Checkout
Optimierte Checkout-Darstellung mit vereinfachtem Login für Bestandskunden und schneller Registrierung für Neukunden.
Ablenkungsfreier Bestellvorgang
Im Bestellprozess bleibt nur das Wichtigste im Blickfeld – Kunden schließen ohne Ablenkung ab.
Gastbestellung und Kundenkonto getrennt
Gastbestellung und Kundenkonto sind visuell klar getrennt – Kunden finden sofort den richtigen Weg.
Übersichtliche Versand- und Zahlungsarten
Versand- und Zahlungsarten erscheinen kompakt mit Logo, Bezeichnung und Beschreibung in einer Zeile.
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(5)
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.
Suche als Icon oder Suchfeld
Darstellung, Position, Breite und Farben der Suche sind frei einstellbar.
Font Awesome Icons
Font-Awesome-Icons sind überall im Template nutzbar – auch über die Sprachvariablen.
Übergreifende Zusatzfunktionen(7)
Preis-Slider im Filter
Besucher grenzen Produkte per Schieberegler auf ihre Preisspanne ein.
Google Translator integriert
Der Google Translator übersetzt deine Shopseiten automatisch – die verfügbaren Sprachen legst du selbst fest.
Inhalte per UTM-Parameter ausspielen
Zeige Inhalte gezielt abhängig von Kampagnenquelle oder -medium – passend zur Anzeige, über die der Besucher kam.
Aufklappbare Sidebar-Navigation
Die Kategorie-Navigation in der Sidebar klappt als Accordion auf – kompakt und übersichtlich.
Lazy Loading für Bilder
Bilder außerhalb des sichtbaren Bereichs werden erst beim Scrollen geladen – das beschleunigt den Seitenaufbau.
Sticky Sidebar
Die Sidebar bleibt beim Scrollen auf allen Seiten sichtbar.
Custom CSS im Backend
Eigenes CSS pflegst du zentral im Backend – ohne Dateien im Template anzufassen.
Themy Toolbox(15)
Portlet: News / Blogbeiträge
Zeigt passende Blogbeiträge auf beliebigen Seiten an.
WhatsApp-Button
Ein WhatsApp-Button mit deiner Nummer ermöglicht Besuchern den direkten Kontakt.
Portlet: Timeline
Erstelle eine Zeitleiste mit Titel, Datum, Icon und beliebigen weiteren Portlets als Inhalt.
Portlet: FAQ mit FAQ-Schema
FAQ-Bereiche überall im Shop – mit optionalem Google-FAQ-Schema für Rich Results in der Suche.
Portlet: Kategorien auf der Startseite
Verlinkte Kategorie-Kacheln mit Bild, Text und Button lenken Besucher auf umsatzstarke Kategorien.
Portlet: Google Map mit Firmeneintrag
Zeigt deinen Firmensitz mit Adresse, Google-Bewertungen und Routenplaner – stärkt Vertrauen und lokales SEO.
Portlet: SEO-Überschriften
Trenne Optik und Semantik: Überschriften sehen wie Headlines aus, ohne zwingend als H-Tag ausgegeben zu werden.
Portlet: Font Awesome Icons
Füge Icons überall ein – Größe, Farbe und Verlinkung frei einstellbar.
Portlet: Tabs / Registerkarten
Registerkarten in mehreren Designs und Positionen.
Portlet: Flex Container
Positioniert Inhalte vollbreit oder zentriert, mit automatischen Abständen und optionaler Anzeige per UTM-Parameter.
Portlet: Card
Ein Container mit Hintergrundbild, der beliebige Inhalte aufnimmt.
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.
Portlet: USP mit Icon
Stelle deine Alleinstellungsmerkmale mit Icon, Überschrift, Text und Link dar – Anordnung frei wählbar.
Portlet: Artikelbewertungen
Zeigt Kundenbewertungen als Galerie oder Slider, filterbar nach Sternen oder Datum.