Inhaltsverzeichnis

    Templates anpassen

    Ihre Aufgabe/Ausgangslage

    Sie möchten das Standard-Template von JTL-Shop individuell anpassen, beispielsweise, indem Sie Schriften oder Farben ändern.

    Template aktivieren

    Um ein Template zu verwenden, müssen Sie dieses zunächst aktivieren. Im Normalfall sollte dies für das EVO-Template in der aktuellen Version bereits geschehen sein.

    1. Melden Sie sich im Backend von JTL-Shop mit Ihren Admin-Benutzerdaten an.
    2. Navigieren Sie zum Menüpunkt Template.
    3. Klicken Sie hinter dem Template, das Sie verwenden möchten, auf Aktivieren.
    Hinweis zu aktualisierten Versionen des EVO-Templates: Bei Kunden, die das Hosting von JTL-Shop verwenden, wird bei jedem Update ein neuer Template-Ordner erstellt, in dem sich die neuere Version des EVO-Templates befindet. Sie müssen dann selbstständig auf die neuere Version des Templates wechseln oder Ihr aktuell aktives Template auf die neue Version von JTL-Shop anpassen.

    Template-Einstellungen bearbeiten

    1. Klicken Sie hinter dem aktiven Template auf die Schaltfläche Einstellungen, um die Einstellungen für das Template zu bearbeiten.

    Das EVO-Template verfügt über 18 vorgefertigte, responsive Themes und 13 passende Hintergrundbilder für Ihren Onlineshop. Erstellen Sie ohne Programmierkenntnisse einen ansprechenden und modernen Shop. Alle Themes basieren auf Bootstrap 3 und der LESS-Technologie. Die Dokumentation ist so gut gestaltet, dass es auch für Anfänger ohne Schwierigkeiten möglich ist, den Shop individuell und einfach zu gestalten.

    Mit dem EVO-Editor gibt es für eher erfahrene Nutzer zusätzlich einen Code-Editor im Backend von JTL-Shop. Mit diesem Plugin können Sie verschiedene Variablen bearbeiten, um z.B. die Farben Ihres Shops zu ändern. Sie können anschließend per Mausklick Ihr eigenes Theme erstellen lassen.

    Das EVO ChildExample dient Testzwecken und kann für Designarbeiten genutzt werden. Generell ist es zu empfehlen, für eigene Anpassungen ein eigenes Child zu erstellen, welches das Standardtemplate erweitert. Dadurch werden auch Updates einfacher.

    Hinweis: Eine ausführliche Beschreibung, wie Sie ein Child-Template erstellen, lesen Sie in der Entwickler-Dokumentation von JTL-Shop: Zur Entwickler-Dokumentation.

    Komprimierung von JavaScript- und CSS-Dateien: Sie können die JavaScript- und CSS-Dateien von JTL-Shop komprimieren lassen. Damit werden unnötige Zeichen aus den Dateien entfernt und die Performance Ihres JTL-Shops verbessert.


    Komprimierung des HTML-Ausgabedokuments: Mit dieser Option werden überflüssige Leerzeichen und -zeilen aus den HTML-Seiten Ihres JTL-Shops herausgelöscht. Diese Option führt ggf. zu Performanceproblemen.


    Komprimierung von Inline-CSS-Code: Mit dieser Option wird Inline-CSS-Code komprimierter angelegt. Diese Option führt ggf. zu Performanceproblemen.


    Komprimierung von Inline-JavaScript-Code: Mit dieser Option wird Inline-JavaScript-Code komprimierter angelegt. Diese Option führt ggf. zu Performanceproblemen.


    Benutzerdefinierte Template-Dateien verwenden: Bitte verwenden Sie diese Option nicht mehr, sondern arbeiten Sie stattdessen mit einem Child-Template.


    Aufgabenplaner-Blindgrafik aktivieren: Aktiviert eine Blindgrafik, die regelmäßig in Ihre Seiten eingebunden wird. Diese Grafik sieht Ihr Kunde nicht und sie hat auch keine Auswirkungen auf die Ladezeit. Durch das Einbinden der Grafik wird jedoch der Aufgabenplaner angestoßen.

    Lesen Sie mehr zum Aufgabenplaner:

    Im Seitenbereich Themes stellen Sie alle wesentlichen Informationen zum zu verwendenden Template ein.

    Vorschau: Hier sehen Sie eine Vorschau des gewählten Themes.


    Theme: Hier wählen Sie aus einem der mitgelieferten Themes aus. Sie sehen direkt im Bereich Vorschau, wie das Theme aussehen wird.


    Hintergrundbild: Hier können Sie eines der mitgelieferten Hintergrundbilder auswählen oder ein eigenes – hochgeladenes – Hintergrundbild bestimmen.


    Boxed Layout: Hier entscheiden Sie, ob Header, Inhalt und Footer in einer Box angezeigt werden sollen, oder ob es eine deutliche Trennung geben soll.


    Full-Width Slider: Diese Option können Sie nur aktivieren, wenn Sie bei Boxed Layout Nein wählen. In diesem Fall werden Slider über die gesamte Seitenbreite dargestellt. Zum Thema Slider lesen Sie auch:


    Full-Width Banner: Diese Option können Sie nur aktivieren, wenn Sie bei Boxed Layout Nein wählen. In diesem Fall werden Banner über die gesamte Seitenbreite dargestellt. Zum Thema Banner lesen Sie auch:


    Mitlaufendes Header-Megamenü: Wenn Sie diese Option aktivieren, wird das Megamenü beim Scrollen permanent angezeigt.


    Hintergrundfarbe: Hier bestimmen Sie die Hintergrundfarbe Ihres JTL-Shops. Geben Sie dazu einfach einen Hexadezimal-Farbcode ein. Bitte beachten Sie, dass Sie die Hintergrundfarbe nur dann sehen, wenn Sie das Hintergrundbild deaktivieren.


    Favicon: Hier können Sie eine Grafik auswählen, die als Favicon für Ihren Onlineshop verwendet wird. Das Favicon wird beispielsweise in Browser-Tabs vor dem Seitennamen angezeigt.


    Warenkorb-Mengen-Optionen in Dropdown anzeigen: Diese Option beeinflusst, wie eine Mengenänderung im Warenkorb durchgeführt werden kann:

    • Ja: Die Menge wird über ein kleines Dropdown geändert, in dem Ihre Kunden eine neue Zahl eintragen können.
    • Nein: Die Menge wird in einem Feld angezeigt, das Ihre Kunden direkt überschreiben können.

    Hier stellen Sie das Megamenü ein, das auf jeder Seite Ihres JTL-Shops zur Navigation angezeigt wird.

    Kategorien (anstelle einer Kategoriebox / Boxenverwaltung): Diese Option sorgt dafür, dass die Kategorien über das Megamenü erreichbar sind. Falls Sie diese Option deaktivieren, müssen Sie in der Boxenverwaltung eine Kategoriebox für jede Seite aktivieren, damit Ihre Kunden die Kategorien weiterhin erreichen.


    Hauptkategorie Infobereich: Ist diese Option aktiviert, wird im Megamenü ein zusätzliches Bild für die Hauptkategorie angezeigt. Andernfalls sehen Sie nur die Unterkategorien.


    Kategoriebilder: Ist diese Option aktiviert, werden im Megamenü Bilder für jede Kategorie angezeigt. Andernfalls wird nur der Name der Kategorien angezeigt.


    Unterkategorien: Ist diese Option aktiviert, werden im Megamenü neben den Kategorien einer Hauptkategorie auch die Unterkategorien der einzelnen Kategorien angezeigt. Ist die Option deaktiviert, sehen Sie nur die Kategorien, die sich in einer Hauptkategorie befinden.


    Seiten der Linkgruppe 'megamenu': Deaktiviert alle Seiten, die in der Linkgruppe Megamenü hinterlegt sind. Diese pflegen Sie unter Inhalte > Eigene Seiten.


    Hersteller-Dropdown: Fügt einen zusätzlichen Menüpunkt Hersteller im Megamenü hinzu. Unter diesem finden Sie alle Hersteller, von denen aktuell Artikel in JTL-Shop angeboten werden.

    In diesem Bereich legen Sie fest, welche zusätzlichen Informationen für Artikel in Listen- und Galerieansicht angezeigt werden sollen.

    Variationsauswahl anzeigen: Hier legen Sie für Variationskombinationen fest, wie viele Variationen maximal in der Listen- oder Galerieansicht zur Auswahl angezeigt werden sollen. Bei Artikeln, die über mehr Variationen verfügen, wird die Variationsauswahl in der Listen- oder Galerieansicht nicht angezeigt.


    Anzahl mögliche Variationswerte für Radio und Swatches: Wenn Sie die vorhergehende Option eingeschränkt haben, können Sie hier festlegen, wie viele Radio-Buttons bzw. Swatches zur Variationsauswahl in der Listen- oder Galerieansicht angezeigt werden sollen. Bei Artikeln mit mehr Variationswerten wird keine Auswahl in der Listen- oder Galerieansicht nicht angezeigt.


    Quickview für Artikeldetails: Hier legen Sie fest, ob die wichtigsten Artikeldetails bereits in der Listen- bzw. Galerieansicht angezeigt werden können. Bei aktivierter Option wird über dem Artikelbild eine Schaltfläche Vorschau angezeigt, wenn Ihre Kunden mit der Maus über das Bild fahren.


    Hovereffekt für Zusatzinfos (nur Galerie): Hier legen Sie fest, ob in der Galerieansicht zusätzliche Informationen zu Artikeln bereits angezeigt werden, wenn Ihre Kunden mit der Maus über einen Artikel fahren.

    In den Footer-Einstellungen legen Sie fest, welche weiterführenden Informationen standardmäßig angeboten werden sollen.

    Newsletter-Anmeldung im Footer: Mit dieser Einstellung können sich Kunden für Ihren Kundennewsletter anmelden. Lesen Sie dazu auch das Thema zum Newsletter.


    Social-Media-Buttons im Footer: Zeigt die Buttons für Social-Media-Kanäle an, für die Sie in einer der nachfolgenden Optionen einen Link eingetragen haben.

    Evo Theme-Editor

    Der Evo Theme-Editor erleichtert Ihnen die Anpassung der einzelnen Shop-Themes.

    Tipp: Das Arbeiten mit dem Evo Theme-Editor empfehlen wir eher Nutzern, die bereits Vorerfahrung im Bereich Webdesign mitbringen. Für jegliche Anpassungen können Sie auch die Hilfe eines JTL-Servicepartners in Anspruch nehmen.

    Hier finden Sie die Entwickler-Dokumentation von JTL-Shop:

    http://docs.jtl-shop.de/de/latest/

    Evo Theme-Editor installieren

    Um den Evo Theme-Editor verwenden zu können, müssen Sie ihn zunächst kostenlos installieren.

    1. Wechseln Sie dazu über das Menü Plugins > Pluginverwaltung in die Pluginverwaltung.
    2. Wechseln Sie in die Registerkarte verfügbar. Dort finden Sie das Plugin Evo Theme-Editor.
    3. Aktivieren Sie das Plugin über die Checkbox und klicken Sie auf Installieren.

    JTL-Shop wechselt nun automatisch in die Registerkarte Aktiviert.

    Evo Theme-Editor öffnen

    1. Öffnen Sie den Evo Theme-Editor über das Menü Plugins > Evo Theme-Editor.
    2. Wählen Sie über das Dropdown-Menü aus, welches Theme Sie bearbeiten möchten.
    1. Um genau zu erfahren, wie Sie mit dem Evo Theme-Editor arbeiten, lesen Sie bitte folgende Seiten: http://docs.jtl-shop.de/de/latest/shop_templates/index.html

    Evo LiveStyler

    Der Evo LiveStyler ermöglicht Ihnen eine direkte Anpassung von Variablen, Farben, Schriften, Abständen etc..

    Hinweis: Vorgenommene Änderungen können nicht durch ein Wechseln des Themes rückgängig gemacht werden.

    Voraussetzungen

    Um den Evo LiveStyler benutzen zu können, muss zunächst der Evo Theme-Editor installiert sein. Lesen Sie dazu: Evo Theme-Editor.

    LiveStyler aktivieren

    1. Wechseln Sie im Backend Ihres JTL-Shops in den Bereich Templates.
    2. Klicken Sie in Ihrem aktivierten Template auf die Schaltfläche Einstellungen.
    3. Ändern Sie unter Entwickler-Einstellungen die Einstellung LiveStyler aktivieren? auf Ja.
    4. Klicken Sie auf Speichern.

    LiveStyler verwenden

    1. Soweit dies noch nicht geschehen ist, melden Sie sich im Backend Ihres JTL-Shops an.
    2. Öffnen Sie nun einen zweiten Tab Ihres Browsers und navigieren Sie zur URL, unter der Ihr JTL-Shop zu erreichen ist. Die Schaltfläche für den LiveStyler sollte dort zu sehen sein.
    Hinweis: Die Schaltfläche ist nur sichtbar, wenn Sie parallel ins Backend Ihres JTL-Shops eingeloggt sind. Ihre Kunden sehen diese Schaltfläche nicht.
    1. Klicken Sie auf LiveStyler öffnen. Es öffnet sich der LiveStyler.
    1. Sie finden hier alle Variablen, die eingestellt werden können. Ändern Sie eine der Variablen und klicken Sie anschließend auf Übernehmen unterhalb der Liste, um die Änderungen direkt zu betrachten.
    Hier finden Sie alle verfügbaren Variablen : Variablen
    1. Wenn Sie mit Ihren Änderungen zufrieden sind, klicken Sie auf Speichern. Falls Sie die Änderungen nicht dauerhaft durchführen möchten, schließen Sie einfach den LiveStyler und verlassen die Seite. Beim nächsten Laden wird wieder der alte Stand angezeigt.