Theme Manager
Die Storefront von Shopware ist individuell gestaltbar. Hierzu wurde in Shopware 5 ein komplett neuer Theme Manager entwickelt, welchen Du als eigenständiges Modul im Backend unter "Einstellungen > Theme Manager" finden kannst. In diesem Modul hast Du die Möglichkeit, das Aussehen Deiner Storefront in Farbe, Logo und Funktionen zu verändern.
Hinterlege Deine Änderungen niemals im original Bare oder Responsive Theme. Diese Anpassungen können bei einem Shopware Update überschrieben werden! Erstelle hierfür ein eigenes Theme.
Übersicht
Shop-Auswahl (1): Hier wählst Du den Shop aus, an dessen Theme Du Änderungen durchführen willst bzw. dessen zugewiesenes Theme Du ändern willst.
Theme erstellen (2): Mit dieser Funktion kannst Du ein neues Theme anlegen, welches entweder vom Responsive- oder vom Bare Theme ableiten kann. Weitere Informationen hierzu findest Du weiter unten im entsprechenden Abschnitt.
Themes neu laden (3): Hiermit kannst Du die Ansicht des Theme Managers aktualisieren.
Einstellungen (4): In den Theme Manager Einstellungen hast Du die Möglichkeit, den CSS und JS Compiler einzustellen. Zudem kannst Du hier einstellen, dass die Textbausteine im Frontend immer neu geladen werden, was vor allem in Entwicklungsumgebungen sinnig sein kann. Nähere Informationen zu den Einstellungsmöglichkeiten findest Du etwas weiter unten im entsprechenden Abschnitt.
Konzipiert für Shopware 5 (5): In dieser Kategorie findest Du alle Themes, die für Shopware 5 konzipiert wurden.
Detaillierte Informationen (6): Hier werden Dir Informationen über das ausgewählte Theme angezeigt.
Theme zuweisen (7): Hiermit weist Du das ausgewählte Theme dem im Menüpunkt (1) ausgewählten Shop zu. Nach der Zuweisung erscheint ein Popup, welches das Theme kompilieren und den HTTP-Cache leert, wir empfehlen, dies direkt zu tun, da der Theme Cache sonst beim ersten Aufruf des Frontends generiert wird, was den Seitenaufruf dann deutlich verlangsamt.
Theme-Vorschau / Vorschau stoppen (8): Hiermit kannst Du Dir das ausgewählte Theme in einer Vorschau ansehen bzw. eine aktive Vorschau beenden.
Theme konfigurieren (9): In der Theme Konfiguration hast Du die Möglichkeit, einige Einstellungen bezüglich auf Funktionen und Aussehen des Themes vorzunehmen. Nähere Informationen zu den Einstellungsmöglichkeiten findest Du hier. Die Einstellungen, die Du hier vornimmst, werden nur für den ausgewählten Shop (2) übernommen. Daher ist es nicht mehr zwingend nötig, mehrere Themes für mehrere Subshops zu erstellen. Bitte beachte, dass dieses Verhalten nur beim Bare und Responsive Theme zur Verfügung steht oder in Themes, die von diesen ableiten.
Theme erstellen
Name: (2) Hier kannst Du den Namen angeben, der im Quelltext und als Verzeichnisname im Dateisystem verwendet wird.
Kurzbeschreibung: (3) Kurzbeschreibung bzw. Name, der im Theme Manager angezeigt wird.
Beschreibung: (4) Hier kannst Du einen Beschreibungstext für Dein neues Theme hinterlegen.
Autor: (5) Hier kannst Du den Autor des neuen Themes angeben.
Lizenz: (6) Hier kannst Du die Art der Lizenz hinterlegen.
Nachdem Du alle Felder ausgefüllt hast, klicke auf "Speichern", um dein neues Theme zu erstellen.
Einstellungen
Neuladen der Textbausteine erzwingen: (1) Durch das Aktivieren dieser Funktion kannst Du das Neuladen der Textbausteine erzwingen. Hierdurch ist es nicht mehr nötig, nach jeder Änderung an den Textbausteinen den Cache zu leeren. Aus Performancegründen solltest Du diese Funktion im Live Betrieb nicht verwenden.
Compiler Caching deaktivieren: (2) Durch die Deaktivierung des Compiler Cachings, werden die CSS- und JS-Dateien bei jedem Seitenaufruf neu generiert. Somit ist es nicht nötig nach jeder Anpassung den Theme Cache neu aufzubauen.
Das Aktivieren dieser Funktion ist sehr performancelastig und und sollte nur für Entwicklungszwecke durchgeführt werden!
CSS Source Map erstellen: (3) Diese Funktion erstellt eine Verbindung zwischen den kompilierten CSS-Code und den LESS-Code her, was das Debugging von LESS-Code wesentlich vereinfacht.
CSS komprimieren: (4) Ist diese Funktion aktiv, werden alle Whitespaces und Kommentare beim Kompiliervorgang aus der CSS-Datei entfernt.
JavaScript komprimieren: (5) Ist diese Funktion aktiv, werden alle Whitespaces und Kommentare beim Kompiliervorgang aus der JS-Datei entfernt.
Theme konfigurieren
Icons & Logos
Logos (1): Hier kannst Du für die einzelnen Viewports separate Logos definieren. Beachte bitte, dass für alle Breakpoints ein Logo hinterlegt werden muss, da es hier keinen Fallback gibt.
Die Logo Größe wird vom Container vorgegeben. Dieser räumt dem Logo den entsprechenden Platz ein. Der Logo-Container hat auf dem Desktop eine maximale Höhe von 80px und eine Breite von 300px. Das Logo passt sich unabhängig von der Größe der hochgeladenen Bilddatei immer dem Container an.
In einigen Browsern, wie z.B. dem Internet Explorer, kann es bei der Neuberechnung von Bildern auf Grund von fehlendem Antialiasing dazu kommen, dass das Bild unscharf dargestellt wird. Hierbei kann es helfen, das Bild direkt in der benötigten Größe hochzuladen, um eine Neuberechnung seitens des Browsers zu umgehen.
Icons (2): Hier kannst Du die Icons für Deinen Shop hinterlegen.
Konfiguration
Globale Konfiguration
Offcanvas Warenkorb: (1) Durch die Aktivierung dieser Konfiguration wird anstelle der Modalbox beim Hinzufügen eines Artikels in den Warenkorb der Offcanvas Warenkorb angezeigt. Standard: aktiv
Offcanvas Menü überlagern: (2) Wenn diese Konfiguration aktiv ist, wird beim Einblenden des Offcanvas Warenkorbs das Theme selbst nicht nach links verschoben. Standard: aktiv
Suche fokussieren: (3) Durch die Aktivierung dieser Konfiguration, wird die Suche im Mobile Viewport immer ausgeklappt angezeigt. Standard: inaktiv
Sidebar anzeigen: (4) Hier kannst Du einstellen, ob im Produktlisting die linke Kategorie-Navigation angezeigt werden soll oder nicht. Standard: aktiv
Filter in Sidebar anzeigen: (5) Hier kannst Du einstellen, ob der Eigenschaften-Filter auf der Kategorieseite zwischen der Kategorebeschreibung und dem Listing oder unter dem linken Menü auftauchen soll.
Checkoutstep Header anzeigen: (6) Hier kannst Du bestimmen, welcher Header im Checkout angezeigt werden soll. Ist die Konfiguration aktiv, wird der minimale Checkout Header angezeigt. Wenn die Option inaktiv ist, wird der normale Header weiter verwendet. Standard: aktiv
Checkoutstep Footer anzeigen: (7) Hier kannst Du bestimmen, welcher Footer im Checkout angezeigt werden soll. Ist die Konfiguration aktiv, wird der minimale Checkout Footer angezeigt. Wenn die Option inaktiv ist, wird der normale Footer weiter verwendet. Standard: aktiv
Infinite Scrolling: (8) Durch Aktivieren dieser Konfiguration wird das Paging aus dem Produktlisting entfernt und die Artikel werden beim Scrollen nach unten automatisch nachgeladen. Infinite Scrolling funktioniert im Standard im Artikellisting, auf Herstellerseiten und im Suchergebnislisting. Standard: aktiv
Seitenanzahl für Infinite Scrolling: (9) Hier kannst Du einstellen, wie viele Seiten automatisch nachgeladen werden sollen. Ist die letzte Seite erreicht wird ein Button angezeigt, mit dem die nächste Seite geladen werden kann. Standard: 4
Zoomfaktor der Bildbox (Lightbox): (10) Hier kannst Du einstellen, wie weit in die Artikelbilder hineingezoomt werden kann. Bei der Einstellung Automatisch wird maximal bis zur nativen Größe hineingezoomt, bei den fixen Einstellungen kann es je nach Bildgröße dazu kommen, dass Bilder schwammig dargestellt werden, wir empfehlen daher "Automatisch". Standard: Automatisch.
Apple Web App Title: (11) Hier kannst Du einen Title angeben, der nur für die Apple Web App gilt. Ist dieses Feld leer, wird der Name des Shops verwendet.
Varianten Wechel über AJAX: (12) Hier kannst Du definieren, ob der Variantenwechsel auf der Detailseite über AJAX und somit ohne Reload funktionieren soll, oder konventionell ohne AJAX. Standard: Aktiv
JavasScript asynchron laden: (13) Lädt JavaScript im Frontend asynchron.
Javascript asynchron laden
Ab Shopware 5.3, kann das kompilierte und minifizierte Javascript asynchron geladen werden. Das bedeutet, dass der Browser bereits nach Erhalt der HTML und CSS-Daten mit dem Seitenaufbau beginnt und dein Kunde den Inhalt schneller sehen kann. Wenn dann Javascript geladen wurde, wird die Seite vom Browser nochmal gerendert und aktualisiert. Diese Art und Weise kann den Pagespeed deines Shops verbessern. Wenn Du Shopware direkt installierst, ist diese Einstellung standardmäßig aktiv, wenn Du deinen Shop auf 5.3 geupdatet hast, ist dies erst einmal deaktiviert.
Falls Du eigenes Javascript in deinem Theme verwendest und es über den Shopware Compiler inkludierst, wirst Du nichts verändern müssen - Dein Code wird weiterhin wie gewohnt funktoinieren. Solltest du dein Skript direkt im Template einbinden (zum Beispiel über script-Tags), könntest du Javascript-Fehler bekommen: Falls es hier Abhängigkeiten auf Shopwares Javascript oder auch bspw. auf jQuery gibt, könnte es vorkommen, dass dein eigener Code vor der Ausführung des asynchronen Scripts ausgeführt wird. Um dieses Risiko einer Race Condition abzumildern, führe deinen Code nach dem asynchronen Laden aus. Um dies einfacher zu machen, haben wir eine globale Callback Funktion hinzugefügt, weiterführende Informationen findest du dazu in unseren DevDocs.
Einkaufswelten via Ajax nachladen(14): Ist diese Option aktiv werden die Einkaufswelten über AJAX asynchron nachgeladen. Ist Sie inaktiv, erfolgt das Nachladen direkt.
Erweiterte Einstellungen
Weitere CSS-Dateien: (15) Das Feld dient dazu, CSS-Dateien von externen Diensten einzubinden, z.B. um Google Fonts einzubinden.
Weitere JavaScript-Bibliotheken: (16) Hier können externe Skripte eingebunden werden, z.B. für Google Analytics oder andere externe Dienste. Lokale Javascript Komponenten sollten jedoch mit Hilfe des $javascript-Arrays eingebunden werden.
Konfigurations-Vorlagen
Konfigurations-Vorlagen: (17) Durch klick auf den Button stehen voreingestellte Farb-Konfigurationen zur Auswahl.
Farb-Konfiguration
In diesem Tab hast Du die Möglichkeit, Dein Theme in Farbe, Schriftart, Schriftgröße und Format individuell zu gestalten. Du kannst hier entweder alle Einstellungen manuell vornehmen oder Du lädst eine Konfigurations-Vorlage (1) mit einer vordefinierte Farbvariation. Eine Übersicht der einzelnen Einstellungsmöglichkeiten findest Du in der Stylecheatsheet.pdf im Anhang. Mit den Konfigurations-Vorlagen hast Du die Möglichkeit, Vorlagen für Farbvariationen (1) oder verschiedene Theme Einstellungen zu laden.
Die Farb-Konfiguration arbeitet LESS-basiert, Du kannst also in allen Feldern mit LESS Code arbeiten und z.B. auch Felder untereinander referenzieren.