Global

Global

Die Einstellungen in diesem Menüpunkt wirken sich global im gesamten Frontend des Shops aus.

Farben

Bestimmen Sie hier das Farbschema, indem Sie "eigene Farben" oder eines der vorgefertigten "Farbthemes" auswählen. Gerne können Sie sich auch von unseren Farbthemes inspirieren lassen und diese dann abändern.
Bitte beachten Sie, dass Einstellungen des Footers separat getroffen werden (Die Einstellungen der Buttonfarbe hier wirken sich nicht auf diesen aus).
  1. Die Primärfarbe bestimmt u.A. die Farbe der Bewertungssterne, die Farbe der Merkmale in der Artikeldetailseite, die Farbe beim Hovern über Artikelbezeichnungen in der Artikelliste, die Umrandung des Checkouts, das Highlighting (wenn Sie etwas zum Kopieren markieren), die Navigationsleiste im Bestellvorgang, die Bezeichnungen der Tabs auf der Artikeldetailseite, Preise und einige Sprachvariablen des admorris Pro Plugins sowie der anderen aktiven Sales Booster (z.B. die Bezeichnung der Bonuspunkte).
  2. Die Buttonfarbe bestimmt u.A. die Farbe des Warenkorb-, "Weiter einkaufen"- und "Zur Kasse"-Buttons, Bestellungen anzeigen im Kundenmenü etc.
  3. Die Farbe des Buttontextes bestimmt die Schriftfarbe der Texte innerhalb der bei Buttonfarbe erwähnten Buttons.
  4. Die Linkfarbe bestimmt die Färbung aller Hyperlinks in Ihrem Onlineshop. Das beinhaltet u.A. die Merkmalfilter, Merkmale, Kategoriebezeichnungen und Verlinkungen in Texten.
  5. Die Farbe bei Headlines betrifft alle Überschriften einer Übersichtsseite oder eigenen Seite. Das beinhaltet die Kategoriebezeichnung in der Artikelliste und Artikelbezeichnung in der Artikeldetailseite etc.
  6. Die Farbe beim Punkt Text bestimmt die Schriftfarbe der Preise und Artikelbezeichnungen auf der Startseite und Artikelliste, Breadcrumbs, Texte und Beschreibungen, Variationen und Variationswerte etc.
  7. Die Farbe bei Hintergrund legt die Hintergrundfarbe fest.

Schrift

Hier wählen Sie für sämtliche Texte sowie für die Überschriften im Shop die Schriftarten.
  1. Es wird zwischen der globalen Schriftart und der Schriftart der Headlines unterschieden.
  2. Mit der Basisschriftgröße wählen Sie eine einheitliche Schriftgröße (für beide Schriftarten).
  3. Mit dem Punkt Schriftgrößenfaktor Überschriften lassen sich die Überschriften um einen Faktor vergrößern oder verkleinern. Ein positiver Wert < 1 verkleinert, ein positiver Wert > 1 vergrößert die Überschriften.

Favicon

Das Persönliche Favicon ist das "Mini-Icon", welches neben dem Titel des Tabs der Website dargestellt wird. In der mobilen Ansicht, je nach Browser, wird es unter Umständen in der Übersicht der Tabs angezeigt. Bitte beachten Sie, dass die Datei, welche Sie hochladen eine .png oder .ico Datei ist und entweder 16x16px oder 32x32px groß ist. Andere Dateitypen sind aus SEO-technischen Gründen nicht empfehlenswert.
Hinweis: Die Datei wird über den Elfinder hochgeladen und sollte daher keine Leerzeichen oder Sonderzeichen im Dateinamen enthalten.

Icons

  1. Unter Ihre Auswahl können Sie aus diversen Presets wählen und alle im Frontend verwendeten Icons ersetzen.
  2. Alle verfügbaren Icons im Archiv sind in passende Kategorien unterteilt. Sie können diese über das Dropdown oder durch Klicken auf ein zu änderndes Icon ansteuern. Über den Button "eigenes Symbol hinzufügen" können Sie selbst SVGs hinterlegen, die anschließend in der Kategorie "Benutzerdefiniert" aufgelistet sind. Sie können auch einzelne Icons mit jenen aus dem Archiv austauschen. Wählen Sie dazu zuerst das zu ersetzende Icon unter "Ihre Auswahl" und anschließend das gewünschte Icon in "Archiv" aus.
  3. Mit dem Punkt Selektiver Größenfaktor passen Sie die Größe des momentan ausgewählten Icons an. Bitte beachten Sie, dass das angezeigte Icon nicht der Größe im Shop Frontend entspricht, sondern nur das momentan markierte Icon darstellt.
  4. Mit dem Punkt Globaler Größenfaktor passen Sie die Größe aller Icons Ihrer Auswahl an.
  5. Sollten andere Plugins die Schriftarten FontAwesome 4/5 benötigen, können Sie diese via Checkbox aktivieren. Bitte beachten Sie, dass sich das zusätzliche Laden der Schriftarten negativ auf die Performance des Shops auswirken kann.
Hinweis zu FontAwesome 4/5: Falls Sie als Administrator eingeloggt sind (erkennbar durch das blaue Label des OPCs am linken oberen Bildrand), wird FontAwesome immer geladen. Falls Sie eine Änderung im Frontend überprüfen möchten, empfehlen wir diese im Inkognitomodus (Chrome: https://support.google.com/chrome/answer/95464 ) bzw. privaten Modus (Firefox: https://support.mozilla.org/de/kb/privater-modus) Ihres Browsers zu prüfen. Falls Änderung nicht sofort greifen, könnte das Löschen des Caches das Problem lösen. Den Cache löschen Sie, indem Sie das Backend Ihres JTL-Shop aufrufen, zum Punkt "System" unter der Gruppe "Administration" ausklappen und dort auf "Cache" klicken. Hier können Sie den Objekt- sowie den Templatecache leeren.

Sind Sie mit Ihren Änderungen zufrieden, zwischenspeichern Sie diese mit dem Button am Ende der Seite.
Sollten Sie mit Ihren Änderungen nicht zufrieden sein, können Sie über "Änderungen Zurücksetzen" die Standardeinstellungen wiederherstellen.

Globale Containerbreite

Definieren Sie hier die globale Containerbreite Ihres Shops. Sie können die Containerbreiten für die einzelnen Bereiche wie Produktlisten und Artikeldetailseiten separat im jeweiligen Menüpunkt bei Layout & Design überschreiben.

Nach oben scrollen Button

  1. Aktivieren oder deaktivieren Sie den Nach oben scrollen Button per Checkbox - es erscheint ein Button am Ende der Seite. Ein Klick darauf scrollt den Nutzer ganz nach oben an den Beginn der Seite. Bitte beachten Sie, dass der Knopf erst dann sichtbar wird, nachdem Nutzer mindestens eine "Bildschirmlänge" nach unten gescrollt haben. 
  2. Positionierung: Auf welcher Seite des Bildschirms soll der Knopf eingeblendet werden?
  3. Typ: Wählen Sie zwischen runder, eckiger oder eigener ("ohne Styles") Form der farbigen Box, die den Button darstellen wird. Individuelle Anpassungen können Sie via Userstyles vornehmen.
  4. Button-Inhalt (Icon oder Text): Den Text pflegen Sie über die Sprachvariable "scrollToTopButton" des JTL Shops, das Icon über die Iconeinstellungen unseres Plugins (Global). Weitere Informationen wie Sie Sprachvariablen im JTL Shop ändern, finden Sie hier: https://guide.jtl-software.com/jtl-shop/formulare-und-texte/oberflaechentexte-anpassen/
  5. Bei Button-Farbe legen Sie die Farbe des Hintergrunds des Buttons fest.
  6. Bei Button-Textfarbe legen Sie die Text- bzw. Iconfarbe des Buttoninhalts fest.
  7. Abstand vom unteren Rand: Tragen Sie hier den Abstand zum unteren Rand des Bildschirms in Pixel ein. Ein leeres Feld setzt automatisch den Standardwert von 20 Pixel. Bitte beachten Sie: Sollten Sie den Sales Booster "Live Chat" nutzen, müssen Sie diese Einstellung ändern, da sich sonst die Buttons überlagern.

Sonstiges

  1. Ausrichtung von Produktnamen und Artikelslidertexten: Diese Option steuert die Ausrichtung der Produktnamen und Titeltexten von Artikelslidern (X-Selling Slider, "Kunden kauften auch", "Sonderangebote" etc.). Hier können Sie zwischen zentrierter und linksbündiger Option wählen.
  2. Darstellung Warenkorbvorschaubilder: Diese Einstellung steuert die Anzeige der Artikelvorschaubilder im Warenkorb und im Mini-Warenkorb. Wählen Sie hier zwischen keinen, kleinen oder großen Bildern.

Performance und Komprimierung

Hier steuern Sie diverse technische Einstellungen unseres Templates mit welchen Sie die Performance Ihres Onlineshops verbessern können.

  1. Progressives Laden von Bildern: „Progressive Loading“ ist eine Technik zur Verbesserung der Ladezeit von Bildern auf einer Website. Im Gegensatz zum herkömmlichen Laden von Bildern bei dem das Bild erst vollständig geladen wird bevor es angezeigt wird, lädt das Bild schrittweise.
  2. Komprimierung von JavaScript- und CSS-Dateien: Durch die Aktivierung der Option "Komprimierung von JavaScript- und CSS-Dateien" werden diese Dateien automatisch komprimiert. Setzen Sie diese Option auf Ja oder Nein - im Zweifelsfall auf Nein.
Hinweis: Nach dem Setzen dieser Option ist es ratsam den Shop (Bestellungen, Start- und Artikeldetailseiten, Produktlisten, Eigene Seiten...) auf Anzeigefehlern oder langen Ladezeiten zu prüfen. Kontrollieren Sie auch die grundlegenden Funktionen via Testbestellungen.
  1. Source Sets und WebP-Bilder generieren: Falls Sie Bilder über den Elfinder hochgeladen, werden .webp Bilder automatisch generiert. Weitere Bilder können Sie über den Knopf "Optimierte Bilder generieren" auflisten und per Checkbox auswählen. Wir raten davon ab für alle verfügbaren Bilder in dieser Übersicht auf einmal optimierte Bilder zu generieren, da dieses sich auf die Performance des Shops auswirkt. Die Datengröße Ihrer Auswahl wird im unteren Bildrand angezeigt. Die so angelegten SourceSets werden im .webp und .jpeg Format generiert und im Pfad media/image/storgage/opc hinterlegt.

    • Related Articles

    • Produktslider

      Sie finden die Produktslider Einstellungen ab der Version 2.5.0 in Ihrem JTL-Shop Backend unter: Installierte Plugins > admorris PRO > Layout & Design > Produktslider In älteren Versionen von admorris Pro finden Sie diese Einstellungen unter dem ...

    • Startseite

      Bis zur admorris Pro Version 2.5.0 finden Sie diesen Menüpunkt unter: Installierte Plugins > admorris PRO > Layout & Design > Startseite Ab Version 2.5.0 wurde dieser Menüpunkt in "Produktslider" umbenannt. Produktslider sind eine äußerst effektive ...

    • Footer

      Sie finden Einstellungen für den Footer in Ihrem JTL-Shop Backend unter: Installierte Plugins > admorris PRO > Layout & Design > Footer Mit dem Menüpunkt Footer können Sie ganz einfach den Footer ihrer Website bearbeiten. Die Links zu Ihren ...

    • User Styles

      Sie finden den User Styles Editor in Ihrem JTL-Shop Backend unter: Installierte Plugins > admorris PRO > Layout & Design > User Styles Mit User Styles hat der Benutzer die Möglichkeit, seine Webseite durch die Verwendung von CSS/Less-Code grafisch ...

    • Perfomance Optimizations

      Images Below the fold Images from WaWi {responsiveImage src="{$image->cURLNormal}" srcset="{$image->cURLKlein} {$Einstellungen.bilder.bilder_artikel_klein_breite}w, {$image->cURLNormal} {$Einstellungen.bilder.bilder_artikel_normal_breite}w, ...