Material

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.