Mit der Shopware 6.5 wurde ein "HTML Sanitizer" implementiert. Dieser Sanitizer "verbessert" Sicherheit, Zuverlässigkeit und Benutzerfreundlichkeit des HTML-Editors in der Administration, indem unsicherer HTML-Code entfernt wird. Er säubert auch Styles und Attribute für konsistente und korrekte Darstellung des Codes unabhängig von Plattform und Browser.
Experten-Modus
Der "Experten-Modus" definiert ob deine "individuellen Anpassungen" aus den "Experten-Einstellungen" der Theme-Konfiguration in die Storefront ausgeliefert werden oder nicht.
Tab "Weiteres" => Bereich "Experten-Einstellungen" => Experten-Modus
Ist der "Experten-Modus" aktiv werden die entsprechenden Codes bzw. Dateien der "Experten-Einstellungen in die Storefront ausgeliefert.
Ist der "Experten-Modus" nicht aktiv, werden die "Experten-Einstellungen" nicht in die Storefront ausgeliefert.
Dies eignet sich besonders zum Debuggen um Probleme mit deinen "individuellen Anpassungen" in den "Experten-Einstellungen" ausschließen zu können.
SCSS
Die Shopware 6 Storefront nutzt zum Styling SCSS-Code (anders als Shopware 5 das LESS genutzt hat).
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
– sass-lang.com
SCSS-Dateien können mit Themes oder Plugins dem Compiler zugeführt werden, welcher den gesamten SCSS-Code der Storefront in eine "all.css" kompiliert.
Weiterführende Informationen
Bootstrap HTML-Code nutzen
In diesem Artikel erfährst du, wie du Bootstrap HTML-Elemente in der Shopware 6 Storefront nutzen kannst.
Hinweis: Dieser Artikel richtet sich an Profis und Experten. Bist du dir nicht absolut sicher, unterstützen wir dich gerne:
Folgt bald...
Bootstrap CSS-Klassen nutzen
In diesem Artikel erfährst du, wie du Bootstrap CSS-Klassen in der Shopware 6 Storefront nutzen kannst.
Hinweis: Dieser Artikel richtet sich an Profis und Experten. Bist du dir nicht absolut sicher, unterstützen wir dich gerne:
Folgt bald...
Profiwissen
Ob Agentur, Freelancer oder fortgeschrittener Benutzer, hier findest du alles um professionelle und verkaufsfördernde Shops schneller denn je mit ThemeWare® für Shopware 6 umsetzen zu können.
Hinweis: Bitte beachte, dass sich die folgenden Artikel an Profis und Experten richten. Bist du dir nicht absolut sicher, unterstützen wir dich gerne:
Backup der ThemeWare® Konfiguration
In diesem Artikel erfährst du, wie du ein manuelles Backup der Theme-Konfiguration machen kannst.
Hinweis: Dieser Artikel richtet sich an Profis und Experten. Bist du dir nicht absolut sicher, unterstützen wir dich gerne:
Manuelle Vorgehensweise (für erfahrende Anwender)
Die manuelle Bearbeitung der Datenbank eignet sich für erfahrende Anwender, die im Umgang mit der Datenbank geübt sind.
Wichtig: In der Shopware 6 Cloud gibt es aktuell keine Möglichkeit die Konfiguration über die Datenbank zu erreichen.
Backup zur Sicherheit
Die manuelle Bearbeitung der Datenbank eignet sich für erfahrende Anwender, die im Umgang mit der Datenbank geübt sind. Hole dir Hilfe, wenn das auf dich nicht zutrifft.
Tipp: Für einen schnellen Zugriff auf die Datenbank nutzen wir gerne die Erweiterung von Friends of Shopware.
Backup der Theme-Konfiguration
Datenbank öffnen (z.B. Adminer oder phpMyAdmin)
Tabelle "themes" (1) über das Suchfeld suchen
Öffne die Tabell mit "select" (2)
Datensatz des gewünschten Themes (z.B. "TcinnThemeWareModern") mit "edit" (3) bearbeiten
Speichere den Inhalt der Spalte "config_values" (4) in einer *.txt oder .json Datei um ein "Backup" der aktuellen Konfiguration zu machen
Verlasse die Datenbank ohne etwaige Änderungen zu speichern
Debug-Modus
In der ThemeWare® Plugin-Konfiguration (nicht Theme-Konfiguration) hast du die Möglichkeit den ThemeWare® "Debug-Modus" zu aktivieren.
Ist der "Debug-Modus" aktiv, wird beispielsweise die "Experten-Konfiguration" nicht mehr berücksichtigt. So können, mit einem Klick, etwaige Fehler in diesen "individuellen Anpassungen" ausgeschlossen werden.
Da der "Debug-Modus" einige Konfigurationen "deaktiviert" um das Debugging von Fehlern zu erleichtern, empfehlen wir diesen Modus nicht im Produktiv-Modus zu nutzen.
Damit du den "Debug-Modus" nicht versehentlich aktiv hast, erscheint ein entsprechender Indikator in der Storefront.
Wirst du im Debugging oder vom ThemeWare® Support gebeten den "Debug-Modus" kurzzeitig zu aktivieren, kannst du auch die Option "Ja (ohne Storefront-Indikator)" nutzen. Hierbei wird der "Debug-Modus" zwar aktiviert, aber der Indikator wird nicht angezeigt. Achte unbedingt darauf den Modus danach wieder zu deaktivieren!
Experten-Einstellungen in der Theme-Konfiguration
In diesem Bereich kannst du eigenen CSS- und/oder JavaScript-Code hinterlegen. Da dies in den Bereich "individuelle Anpassungen" fällt, können wir hier im Rahmen des Plugin-Supports nur begrenzt unterstützen.
Tab "Weiteres" => Bereich "Experten-Einstellungen"
Die "Experten-Einstellungen" in der Theme-Konfiguration richten sich – wie der Name schon sagt – an "Experten" bzw. Profis die sicher im Umgang mit individuellen Anpassungen sind.
Wie du diese Konfigurationsfelder nutzen kannst erfährst du im Bereich "Individuelle Anpassungen":
ThemeWare® in der Datenbank
In diesem Artikel erfährst du, wo Shopware 6 die Theme-Konfiguration in der Datenbank speichert.
Die konfigurierten Werte der Themes werden bei Shopware 6 in der Datenbank-Tabelle "theme" (2) in der Spalte "config_values" (4) für jedes Theme bzw. Theme-Duplikat separat gespeichert.
Diese Spalte enthält aber nicht den kompletten Satz an Konfigurationswerten, sondern nur diese, welche von der Standard-Konfiguration in der Spalte "base_config" abweichen.
Du kannst den Inhalt der Spalte "config_values" (4) z.B. sichern und/oder auf ein anderes Theme, auf ein Theme-Duplikat in der selben Tabelle oder sogar in andere Shopware Installationen übertragen.
Das ultimative Profiwissen
ThemeWare® bietet dir durch die voreingestellten Konfigurationen, seinen vielen Utilities, dem Video-Tutorial und den vielen Anleitungen einen blitzschnellen Einstieg. So kannst du professionelle und verkaufsfördernde Shops schneller den je umsetzen.
Gleichzeitig setzt dir ThemeWare® niemals Grenzen. Du kannst neben umfangreichsten Konfigurationen jederzeit grenzenlose Individualisierungen vornehmen.
Nachfolgend findest du eine Zusammenfassung der wichtigsten Artikel für erfahrende Anwender und Profis.
Im ersten Schritt findest du einige Artikel, welche dir ein grundsätzliches Verständnis von Themes in Shopware 6 vermitteln. Darüber hinaus findest du natürlich auch in der Shopware Dokumentation viele hilfreiche Informationen.
In der Konfiguration des Themes stehen dir verschiedene Feldtypen zur Verfügung. In diesem Artikel geben wir dir eine Übersicht und erklären, wie welcher Feldtyp verwendet wird und welche Werte er enthalten kann.
ThemeWare® auf dem FTP-Server
ThemeWare® findest du wie jede andere Erweiterung welche du installiert hast auf deinem FTP-Server. Es werden keine externen Inhalte geladen, alles was du benötigst liegt lokal, auf deinem FTP-Server.
Shopware installiert Erweiterungen abhängig von Ihrem Typ. Grundsätzlich findest du Apps und Plugins aber unter dem selben Pfad (/custom). Lediglich der Unterordner variiert:
ThemeWare® Konfiguration sichern und wiederherstellen
Das Sichern und Wiederherstellen der Theme-Konfiguration entspricht derzeit grundsätzlich dem Import bzw. Export der Theme-Konfiguration. Mehr dazu findest du im Artikel:
Twig
Twig ist eine Template-Engine für die Programmiersprache PHP. Sie kompiliert Templates zu einfachem, optimiertem PHP-Code. Der Overhead im Vergleich zu regulärem PHP-Code wird dabei auf ein Minimum reduziert.
Hinweis: Der "Experten-Modus" fällt in den Bereich "individuelle Anpassungen". Wir können hier im Rahmen des Plugin-Supports nicht bzw. nur sehr begrenzt unterstützen.
Weiterführende Informationen
ThemeWare® "Debug-Modus"
Hinweis: Der "Debug-Modus" sollte nicht in Produktivumgebungen genutzt werden.
Mit dieser Anleitung findest du heraus, welche ThemeWare® Version von deinem Kunden in Shopware 6 einsetzt wird.
In diesem Artikel erfährst du, wie du das Theme aktualisieren kannst.
In diesem Artikel erfährst du, wie du das Theme aktualisieren kannst.
Die Artikel in diesem Abschnitt gehen einen Schritt weiter und bieten dir Hintergrundwissen zum Thema "Konfiguration" und dem Umgang mit der Konfiguration in der Datenbank.
In diesem Artikel erklären wir dir, wo die Theme-Konfiguration in Shopware 6 gespeichert wird.
Wir empfehlen für einen einfachen Zugriff auf die Datenbank die kostenlose Erweiterung "Adminer für das Admin".
Über einen Export und Import der Konfigurationswerte kannst du eine Konfiguration speichern, eine gespeicherte Konfiguration wiederherstellen, Konfigurationen zwischen einem Theme und seinen Ableitungen übertragen und Theme-Konfigurationen in eine andere Installation übertragen.
Wie du ein Theme in seinen Originalzustand zurücksetzt, erfährst du in diesem Artikel.
Nachfolgend findest du Artikel, welche dir zeigen, wie du mit ThemeWare® schnell und einfach einen professionell gestalteten Shop realisieren kannst.
In diesem Video zeigt dir Thorsten, wie einfach du andere ThemeWare® Themes als Vorlage nutzen kannst, um Teile davon miteinander zu kombinieren. So gelangst du schnell und einfach zu einem individuellen und professionell gestalteten Theme, was genau deinen Wünschen entspricht.
In diesem Artikel zeigen wir dir, wie du mit Theme-Variablen das Farbbild der Storefront vereinheitlichst und schneller an deine Wünsche anpassen kannst.
In der Theme-Konfiguration kannst du in Farbfeldern neben Theme-Variablen auch einfache SCSS-Funktionen verwenden. Mit solchen Funktionen kannst du beispielsweise Farben abdunkeln oder aufhellen.
In diesem Artikel findest du eine Übersicht aller zusätzlichen CSS-Klassen, die wir mit ThemeWare® für Erlebniswelten bereitstellen.
Im sogenannten ThemeWare® "Erlebniswelt-Header" überlagert der Header die Erlebniswelt auf der Startseite. In Themes wie ThemeWare® Outdoor, ThemeWare® Exquisite oder ThemeWare® Lights ist der "Erlebniswelt-Header" bereits vorkonfiguriert.
In diesem Artikel erfährst du, wie du die Kategorie-Erlebniswelten aus unseren Shopware 6 Demoshops nachbauen kannst.
In unseren beliebten Utilities sind unter anderem alle Theme-Grafiken im PSD-Format für dich enthalten.
Wenn du Erfahrung mit CSS und HTML hast und das Erscheinungsbild noch weiter individualisieren möchtest oder Anpassungen an Templates vornehmen möchtest haben wir ebenfalls einige umfangreiche Artikel für dich zusammengestellt.
Du hast mit ThemeWare® verschiedene Möglichkeiten, um eigenes CSS-Styling zu deinem Shop hinzuzufügen. Mehr dazu findest du in diesem Artikel.
Wie du visuelle Anpassungen mittels SCSS vornehmen kannst, erfährst du in diesem Artikel.
Wenn du das Erscheinungsbild von ThemeWare® mittels einer Template-Anpassung individuell verändern möchtest, dann kannst du diese Anpassung mithilfe dieses Artikels in Shopware 6 (Self-hosted) umsetzen.
Wie du eigene Fonts oder einen Google Font lokal in einen Shopware 6 Shop (Self-hosted) einbinden kannst, erfährst du in diesem Artikel.
Last but not least zeigen wir dir, wie du mithilfe des Shopware 6 zugrundeliegenden Bootstrap-Frameworks noch mehr Möglichkeiten zur Individualisierung hast.
Die Shopware 6 Storefront basiert auf dem Bootstrap-Framework. Aufgrund unserer HC-Architecture® ist ThemeWare® ebenfalls vollständig kompatibel mit Bootstrap. Wie du Bootstrap CSS-Klassen und HTML-Elemente für Kundenprojekte einsetzen kannst erfährst du in diesen Artikeln.
In diesem Tutorial erfährst du, wie du responsive Erlebniswelten mit Bootstrap CSS-Klassen erstellen kannst.
Und nun wünschen wir dir viel Spaß beim Stöbern und gut Geschäfte mit ThemeWare®.
Google Fonts oder eigene Fonts DSGVO-konform lokal einbinden
5. Mit Bootstrap richtig durchstarten
Erlebniswelten mit Bootstrap HTML- und CSS-Klassen optimieren
Responsive Erlebniswelten mit Bootstrap
custom/plugins/TcinnThemeWareXYZ
Hinweis: In der Shopware Cloud gibt es derzeit keine Möglichkeit Dateien von Erweiterungen (Plugins, Apps oder Themes) einzusehen.
Achtung: Bearbeite in keinem Fall Originaldateien von Shopware oder Erweiterungen (Plugins, Apps oder Themes)!
ThemeWare® Pro-Edition
ThemeWare® Cloud-Edition
custom/apps/TcinnThemeWareXYZApp
Die manuelle Bearbeitung der Datenbank eignet sich für erfahrende Anwender, die im Umgang mit der Datenbank geübt sind. Hole dir Hilfe, wenn das auf dich nicht zutrifft.
Hinweis: Dieser Artikel richtet sich an Profis und Experten. Bist du dir nicht absolut sicher, unterstützen wir dich gerne: ThemeWare® Services im Überblick
Wichtig: In der Shopware 6 Cloud gibt es aktuell keine Möglichkeit die Konfiguration über die Datenbank zu erreichen.
Anwendungsbeispiele
Tipp: Für einen schnellen Zugriff auf die Datenbank nutzen wir gerne die Erweiterung Adminer für das Admin von Friends of Shopware.
Backup zur Sicherheit
Achtung: Lege unbedingt ein Backup deiner Datenbank an, bevor du hier irgendwelche Änderungen vornimmst!
Achtung: Bitte beachte, dass durch individuellen Code durchaus erhebliche Probleme oder potenziell gefährliche Schwachstellen entstehen können!
Tipp: Damit die "Experten-Einstellungen" in der Storefront angewendet werden aktiviere bitten den "Experten-Modus" und deaktiviere den "Debug-Modus" von ThemeWare®:
Tab "Weiteres" => Bereich "Experten-Einstellungen" => Experten-Modus
Hinweis: Die "Experten-Einstellungen" fallen in den Bereich "individuelle Anpassungen". Wir können hier im Rahmen des Plugin-Supports nur sehr begrenzt unterstützen.
Weiterführende Informationen
Weiterführende Informationen
Datenbank mit dem Adminer bearbeiten
In diesem Artikel erfährst du, wie du die Datenbank mit der Adminer-Erweiterung für Shopware 6 bearbeiten kannst.
Hinweis: Dieser Artikel richtet sich an Profis und Experten. Bist du dir nicht absolut sicher, unterstützen wir dich gerne:
Datenbank bearbeiten
Wir empfehlen für einen einfachen Zugriff auf die Datenbank die kostenlose Erweiterung "Adminer für das Admin".
Wichtig: In der Shopware 6 Cloud gibt es aktuell keine Möglichkeit die Konfiguration über die Datenbank zu erreichen.
Backup zur Sicherheit
Die manuelle Bearbeitung der Datenbank eignet sich für erfahrende Anwender, die im Umgang mit der Datenbank geübt sind. Hole dir Hilfe, wenn das auf dich nicht zutrifft.
Achtung: Lege unbedingt ein Backup deiner Datenbank an, bevor du hier irgendwelche Änderungen vornimmst!
1. Erweiterung installieren
Hinweis: Du kannst die Erweiterung auch über den Shopware Store beziehen. Ist dies dort einmal nicht gelistet, nutze einfach die GitHub-Version.
Installiere und aktiviere die Erweiterung anschließend
Wurde die Erweiterung erfolgreich aktiviert, kannst du deine Datenbank über die Shopware Einstellungen erreichen ("Einstellungen" => "Erweiterungen" => "Adminer")
Nun kannst du Änderungen in der Datenbank vornehmen
ThemeWare® per FTP hochladen
In diesem Artikel erfährst du, wie du ThemeWare® für Shopware 6 per FTP hochladen kannst.
Hinweis: Dieser Artikel richtet sich an Profis und Experten. Bist du dir nicht absolut sicher, unterstützen wir dich gerne:
Vorab möchten wir darauf hinweisen, dass erworbene Erweiterungen automatisch in der Erweiterungs-Verwaltung erscheinen. Ein manueller Upload ist daher nicht nötig.
Der manuelle Upload von Erweiterungen ist auf zwei Wegen möglich:
In diesem Artikel erfährst du, wie du ThemeWare® für Shopware 6 manuell installieren kannst.
Hinweis: Dieser Artikel richtet sich an Profis und Experten. Bist du dir nicht absolut sicher, unterstützen wir dich gerne:
Wichtig: Diese Anleitung richtet sich an erfahrene Anwender. Bei einer manuellen Installation muss unbedingt geprüft werden ob eine Erweiterung bzw. ein Theme überhaupt kompatible mit der aktuell genutzten Shopware Version ist! – Wir empfehlen daher grundsätzlich die Installation über die Shopware Installations-Routine durchzuführen.
Lade eine Zip von ThemeWare® über deinen Shopware Account herunter
Öffne die Administration deines Shops
Wechsel über die Hauptnavigation in die "Erweiterungs-Verwaltung" (1) (2) ("Erweiterungen" => "Meine Erweiterungen")
Wechsel in den Tab "Themes" (3)
Lade die Zip-Datei über den Button "Erweiterung hochladen" (4) in deinen Shop
ThemeWare® wird nun in der Übersicht angezeigt
Installiere die Erweiterung nun über die Option "App installieren" (5)
ThemeWare® wurde nun installiert.
ThemeWare® über die Datenbank deaktivieren
In diesem Artikel erfährst du wie du ThemeWare® über die Datenbank deaktivieren kannst.
Hinweis: Dieser Artikel richtet sich an Profis und Experten. Bist du dir nicht absolut sicher, unterstützen wir dich gerne:
Möchtest du eine Erweiterung bzw. ThemeWare® deaktivieren, weil du beispielsweise versehentlich eine inkompatible Version installiert hast und die Administration ist nicht erreichbar, musst du diese Erweiterung über die Datenbank deaktivieren.
Wichtig: In der Shopware 6 Cloud gibt es aktuell keine Möglichkeit die Konfiguration über die Datenbank zu erreichen.
Backup zur Sicherheit
Die manuelle Bearbeitung der Datenbank eignet sich für erfahrende Anwender, die im Umgang mit der Datenbank geübt sind. Hole dir Hilfe, wenn das auf dich nicht zutrifft.
Achtung: Lege am besten ein Backup deiner Datenbank an, bevor du hier irgendwelche Änderungen vornimmst!
Manuelle Vorgehensweise (für erfahrende Anwender)
Tipp: Für einen schnellen Zugriff auf die Datenbank nutzen wir gerne die Erweiterung von Friends of Shopware. Ist die Administration nicht erreichbar empfehlen wir den oder phpMyAdmin zu nutzen.
Erweiterung deaktivieren
Datenbank öffnen (z.B. Adminer oder phpMyAdmin)
Tabelle "plugin" (1) über das Suchfeld suchen
Öffne die Tabelle
Bearbeite den Eintrag der gewünschten Erweiterung (z.B. "TcinnThemeWareModern") mit "edit" (3)
Ändere den Inhalt der Spalte "active" (4) von 1 auf 0
Speicher diese Änderung und verlasse die Datenbank
Du hast die Erweiterung nun über die Datenbank deaktiviert.
ThemeWare® Konfiguration zurücksetzen
In diesem Artikel erfährst du wie die ThemeWare® Konfiguration zurücksetzen kannst.
Aktuell gibt es leider von Shopware aus keine Möglichkeit die Theme-Konfiguration über die Administration zurückzusetzen. Auch eine entsprechende Erweiterung ist uns bisher nicht bekannt.
Die manuelle Bearbeitung der Datenbank eignet sich für erfahrende Anwender, die im Umgang mit der Datenbank geübt sind. Hole dir Hilfe, wenn das auf dich nicht zutrifft.
Datenbank öffnen (z.B. Adminer oder phpMyAdmin)
ThemeWare® manuell updaten
In diesem Artikel erfährst du, wie du ThemeWare® für Shopware 6 manuell updaten bzw. aktualisieren kannst.
Lade dir dazu die aktuelle ThemeWare® Zip-Datei über deinen Shopware Account runter.
Achtung: Der Upload per FTP ist durchaus möglich, wir empfehlen aber den Weg über die Erweiterungs-Verwaltung von Shopware zu wählen.
Beim FTP-Upload kann es durchaus vorkommen, dass Schreibrechter durcheinander kommen und eine Erweiterung nicht mehr funktioniert oder nicht aktualisiert oder deinstalliert werden kann.
Datensatz des gewünschten Themes (z.B. "TcinnThemeWareModern") mit "edit" (3) bearbeiten
Speichere den Inhalt der Spalte "config_values" (4) in einer *.txt Datei um ein "Backup" der aktuellen Konfiguration zu machen
Leere den Inhalt der Spalte "config_values" und setze die Spalte auf "NULL" (5)
Speichere die Änderung des Datensatzes (6) und verlasse die Datenbank
Die Änderung wird beim nächsten öffnen der Theme-Konfiguration in dein Theme geladen.
Hinweis: Dieser Artikel richtet sich an Profis und Experten. Bist du dir nicht absolut sicher, unterstützen wir dich gerne: ThemeWare® Services im Überblick
Wichtig: In der Shopware 6 Cloud gibt es aktuell keine Möglichkeit die Konfiguration über die Datenbank zu erreichen.
Backup zur Sicherheit
Achtung: Lege unbedingt ein Backup deiner Datenbank an, bevor du hier irgendwelche Änderungen vornimmst!
Manuelle Vorgehensweise (für erfahrende Anwender)
Tipp: Für einen schnellen Zugriff auf die Datenbank nutzen wir gerne die Erweiterung Adminer für das Admin von Friends of Shopware.
ThemeWare® Konfiguration manuell zurücksetzen
Screenshots
Wechsel über die Hauptnavigation in die "Erweiterungs-Verwaltung" (1) (2) ("Erweiterungen" => "Meine Erweiterungen")
Wechsel in den Tab "Themes" (3)
Lade die Zip über den Button "Erweiterung hochladen" (4) in deinen Shop
Suche dein Theme in der Liste deiner Erweiterungen
Klicke auf "Aktualisieren" (5) oder
Klicke auf den Kontext-Button neben dem Theme um das Kontextmenü zu öffnen und darin auf "Aktualisieren auf x.y.z" (5)
ThemeWare® wurde nun aktualisiert.
ThemeWare® manuell updaten
Hinweis: Dieser Artikel richtet sich an Profis und Experten. Bist du dir nicht absolut sicher, unterstützen wir dich gerne: ThemeWare® Services im Überblick
Achtung: Diese Anleitung richtet sich an erfahrene Anwender. Bei einem manuellen Update muss unbedingt geprüft werden ob eine Erweiterung bzw. ein Theme überhaupt kompatible mit der aktuell genutzten Shopware Version ist! – Wir empfehlen daher grundsätzlich das Update über die Shopware Update-Routine durchzuführen.
Wichtig: Um Darstellungsfehlern durch einen veralteten Cache vorzubeugen aktualisiere nach einem Theme-Update einmal die Storefront:
In diesem Artikel erfährst du, wie du die Konfiguration "CSS-Klasse (Spalte)" in CMS-Elementen von ThemeWare® nutzen kannst.
Hinweis: Dieser Artikel richtet sich an Profis und Experten. Bist du dir nicht absolut sicher, unterstützen wir dich gerne:
Spalten-CSS-Klassen
Bestimmte CMS-Blöcke von ThemeWare® (z.B. "Sechs Spalten (Individuell)") können die Experten-Konfiguration "CSS-Klasse (Spalte)" bestimmter CMS-Element (z.B. "Runder Teaser") übernehmen.
Dadurch kannst du die Spaltenanzahl in verschiedenen Viewports festlegen, vorausgesetzt du kennst dich ausreichend mit dem Grid-System von Bootstrap aus.
Wichtig: Bitte beachte, dass sich diese Funktion derzeit in einer Testphase befindet und ggf. noch einmal geändert werden kann.
Beispiel
Standardmäßig haben die "individuellen" CMS-Blöcke ihr vorgesehenes Spaltenlayout. Hier zum Beispiel der 6-Spalter:
ThemeWare® "Sechs Spalten (Individuell)"
Mit der Experten-Konfiguration "CSS-Klasse (Spalte)" im Tab "Erweitert" des CMS-Elementes (hier "Runder Teaser"), kannst du mit Bootstrap-Klassen (z.B. col-3) eine Spaltenbreite für das entsprechende Element definieren.
Nun sieht der Block wie folgt aus:
Wie du sicherlich bemerkt hast, sind alle Spalten üblicherweise links ausgerichtet. Auch dies kannst du beeinflussen.
Zusätzlich zu den CSS-Klassen, welche du in den CMS-Elementen einsetzen kannst, kannst du auch CSS-Klassen an den CMS-Blöcken nutzen um beispielsweise die horizontale Ausrichtung der Spalten im CMS-Block definieren.
Nutze dafür einfach die entsprechenden (siehe justify-content-...) im entsprechenden CMS-Block. Da die Block-Klassen nicht an der – in diesem Fall – benötigten Stelle platziert werden, verwende bitte den Prefix twt- (also twt-justify-content-...) . Diese Klassen werden dann automatisch von den "individuellen" CMS-Blöcken erkannt und an die row weitervererbt.
Verwendest du die CSS-Klasse twt-justify-content-center im CMS-Block sieht unser Beispiel nun wie folgt aus:
Möchtest du keine Spaltenbreiten definieren, kannst du die Klasse twt-flex-columns im CMS-Block verwenden. Hierbei richten sich die Spalten nach der Größe der entsprechenden CMS-Elemente (diese wird i.d.R. durch die verwendeten Bilder vorgegeben).
In unserem Beispiel sind die Thumbnails der Bilder 227px groß. Dies führt zu folgendem Ergebnis:
Über die Konfiguration "Maximale Breite" im Bereich "Allgemein" vom Tab "Layout", kannst du die maximale Breite eines Teasers definieren. Stellst du hier z.B. 140px ein werden die Teaser in unserem Beispiel wie folgt dargestellt:
ThemeWare® Konfiguration exportieren und importieren
In diesem Artikel erfährst du wie du die ThemeWare® Konfiguration exportieren und importieren kannst.
Aktuell gibt es leider von Shopware aus keine Möglichkeit einen Export und Import der Theme-Konfiguration über die Administration durchzuführen. Auch eine entsprechende Erweiterung ist uns bisher nicht bekannt.
Über einen Export und Import der Konfigurationswerte kannst du:
deine Konfiguration sichern
eine gesicherte Konfiguration wiederherstellen
Konfigurationen zwischen einem Theme und seinem Duplikat übertragen
Theme-Konfigurationen in eine andere Installation übertragen
Backup zur Sicherheit
Die manuelle Bearbeitung der Datenbank eignet sich für erfahrende Anwender, die im Umgang mit der Datenbank geübt sind. Hole dir Hilfe, wenn das auf dich nicht zutrifft.
Datenbank öffnen (z.B. Adminer oder phpMyAdmin)
Tabelle "themes" (1) über das Suchfeld suchen
Öffne die Tabell mit "select" (2)
Datensatz des gewünschten Themes (z.B. "TcinnThemeWareModern") mit "edit" (3) bearbeiten
Speichere den Inhalt der Spalte "config_values" (4) in einer *.txt oder *.json Datei um ein "Backup" der aktuellen Konfiguration zu machen
Verlasse die Datenbank ohne Änderungen zu speichern
Datenbank öffnen (z.B. Adminer oder phpMyAdmin)
Tabelle "themes" (1) über das Suchfeld suchen
Öffne die Tabell mit "select" (2)
Datensatz des gewünschten Themes (z.B. "TcinnThemeWareModern") mit "edit" (3) bearbeiten
Füge deine gesicherte Konfiguration in das Feld "config_values" (4) ein
Speicher diese Änderung und verlasse die Datenbank
Achte beim Übertragen einer Theme-Konfiguration darauf, dass die Themes miteinander kompatibel sind! Du solltest z.B. vermeiden, dass du eine Konfiguration von ThemeWare® in dem Standard-Theme "Storefront" hinterlegst oder umgekehrt.
Achte beim übertragen einer Theme-Konfiguration zudem darauf, dass die Versionsnummer des Ursprungs- und Ziel-Themes übereinstimmt!
Wenn die Konfiguration in eine andere Shopware Installation übertragen werden soll, dann müssen alle Medien (Hintergrundbild, etc.) neu hochgeladen und zugewiesen werden.
Hinweis: Dieser Artikel richtet sich an Profis und Experten. Bist du dir nicht absolut sicher, unterstützen wir dich gerne: ThemeWare® Services im Überblick
Export und Import der Theme-Konfiguration
Wichtig: In der Shopware 6 Cloud gibt es aktuell keine Möglichkeit die Konfiguration über die Datenbank zu erreichen.
Achtung: Lege unbedingt ein Backup deiner Datenbank an, bevor du hier irgendwelche Änderungen vornimmst!
Manuelle Vorgehensweise (für erfahrende Anwender)
Tipp: Für einen schnellen Zugriff auf die Datenbank nutzen wir gerne die Erweiterung von Friends of Shopware.
Theme-Konfiguration exportieren
Theme-Konfiguration importieren
Hinweis: Die Änderung wird beim nächsten öffnen der "Theme-Konfiguration" in dein Theme übernommen.
Erlebniswelten mit Bootstrap CSS-Klassen optimieren
Die Shopware 6 Storefront basiert auf dem Bootstrap-Framework. Aufgrund unserer HC-Architecture® ist ThemeWare® ebenfalls vollständig kompatibel mit Bootstrap.
In diesem Tutorial findest du eine Übersicht über der wichtigsten Bootstrap CSS-Klassen, welche du in deinen Erlebniswelten nutzen kannst.
Die folgenden CSS-Klassen kannst du ganz einfach über die Sektion- oder Block-Einstellungen hinzufügen.
Du kannst natürlich auch den Shopware 6 HTML-Editor (z.B. in einem CMS-Element) nutzen, um eigenen HTML-Code zu integrieren. Bitte beachte hierbei, das der Editor deinen Code – aus Sicherheitsgründen – automatisch bereinigt und nicht all HTML-Tags und CSS-Klassen funktionieren.
Zusätzliche CSS-Klassen für Animationen
In diesem Artikel erfährst du mehr über zusätzliche CSS-Klassen für Animationen in ThemeWare®.
ThemeWare® verfügt über unterschiedliche Sammlungen an CSS-Klassen die du je nach Bedarf aktivieren oder deaktivieren kannst.
Die Konfiguration dafür findest du im Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen".
In diesem Artikel erklären wir dir die Funktion der zusätzlichen "CSS-Klassen für Animationen".
Diese Sammlung aktivierst/deaktivierst du über die Konfiguration "CSS-Klassen für Animationen laden (optional)".
Zum Ausrichten von Texten liefert dir Bootstrap CSS-Klassen, welche du nutzen kannst.
Zum Einfärben von Texten liefert Bootstrap bereits einige Klassen für verschiedene Farben mit. Nachfolgend findest du Beispiele für die verfügbaren Farb-Varianten.
Das Bootstrap-Framework liefert dir auch Klassen zum Einfärben von Hintergründen von Erlebniswelt-Elementen in verschiedenen Farben mit. Für dunkle Hintergründe empfiehlt es sich eine helle Textfarbe zu wählen (siehe oben).
Über Bootstrap-Klassen können auch die Rahmen von Erlebniswelt-Elementen definiert werden. Die Klasse "border-0" entfernt beispielsweise Rahmen von Elementen.
Mit folgenden Bootstrap-Klassen können Abstände für Erlebniswelt-Elemente definiert werden. Es gibt Abstandsklassen auch für verschiedene Viewports.
Die Klassen werden nach dem Format {Eigenschaft}{Seiten}-{Größe} für xs und {Eigenschaft}{Seiten}-{Breakpoint}-{Größe} für sm, md, lg und xl benannt.
m - margin (Außenabstand)
p - padding (Innenabstand)
t - top
b - bottom
l - left
r - right
x - sowohl *-left als auch *-right
y - sowohl *-top als auch *-bottom
ohne - alle 4 Seiten
sm - ab 576px
md - ab 768px
lg - ab 992px
xl - ab 1200px
ohne - ab 0px
0 - Abstand auf 0 setzen
1 - Abstand auf $spacer * .25 setzen
2 - Abstand auf $spacer * .5 setzen
3 - Abstand $spacer setzen
4 - Abstand $spacer * 1,5 setzen
5 - Abstand $spacer * 3 setzen
auto - Abstand 'auto' setzen
Achtung: Shopware ab Version 6.5 nutzt Bootstrap 5. Dieser Artikel ist dann veraltet und wird bald überarbeitet.
Hinweis: Dieser Artikel richtet sich an Profis und Experten. Bist du dir nicht absolut sicher, unterstützen wir dich gerne: ThemeWare® Services im Überblick
Bootstrap CSS-Klassen
Hinweis: Ergänzend empfehlen wir dir unsere Bootstrap-Beispiele in unseren Demoshops.
Text
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
Hinweis: ThemeWare® bietet dir darüber hinaus eine umfangreiche Sammlung an Abstandsklassen auf Pixel-Basis.
Mehr dazu findest du im Artikel:
Weiterführende Informationen
Ist diese Konfiguration aktiviert lädt ThemeWare® die folgenden Animations-Klassen:
CSS-Klasse
Beschreibung
twt-back-in-down
folgt...
twt-back-in-left
twt-back-in-right
Die oben genannten CSS-Klassen kannst du einfach im HTML-Editor eines CMS-Elements nutzen um ein bestimmtes HTML-Element damit zu animieren. Damit die Animation ausgeführt wird, ist zusätzlich die CSS-Klasse twt-animate nötig.
Der Code sieht dann etwas wie folgt aus:
Beispiel: CSS-Klassen für Scroll-Animationen
Hinweis: Dieser Artikel richtet sich an Profis und Experten. Bist du dir nicht absolut sicher, unterstützen wir dich gerne: ThemeWare® Services im Überblick
CSS-Klassen für Animationen
<h2 style="text-align: center;" class="twt-animate twt-back-in-down">Überschrift für einen Text</h2>
<hr>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
Erlebniswelten mit Bootstrap HTML-Elementen optimieren
Achtung: Shopware ab Version 6.5 nutzt Bootstrap 5. Dieser Artikel ist dann veraltet und wird bald überarbeitet.
Die Shopware 6 Storefront basiert auf dem Bootstrap-Framework. Aufgrund unserer HC-Architecture® ist ThemeWare® ebenfalls vollständig kompatibel mit Bootstrap.
Hinweis: Dieser Artikel richtet sich an Profis und Experten. Bist du dir nicht absolut sicher, unterstützen wir dich gerne:
Bootstrap HTML-Eemente
In diesem Tutorial findest du die gängigsten Bootstrap HTML-Elemente, welche du in deinen Erlebniswelten nutzen kannst. Diese Elemente kannst du über den HTML-Editor von Text-Elementen in deiner Erlebniswelt platzieren.
Hinweis: Ergänzend empfehlen wir dir unsere in unseren Demoshops.
Buttons
Bootstrap bietet dir mehrere vordefinierte Button-Styles, welche du in deinen Erlebniswelten nutzen kannst und von denen jeder seinen eigenen semantischen Zweck erfüllt. Nachfolgend findest du alle verfügbaren Buttons-Styles mit Codebeispielen.
Das Bootstrap-Framework enthält mehrere vordefinierte Table-Styles. Es gibt beispielsweise helle und dunkle Layouts. Nachfolgend findest du ein Beispiel für eine helle Variante.
Auch Modals sind bereits in Bootstrap und damit auch in Shopware bzw. ThemeWare® enthallten. Nachfolgend findest du ein Beispiel für ein Standard-Modal.
Ein Accordion ist ein Element, das du für deine Erlebniswelt nutzen kannst. Das Accordion dient dazu umfangreiche Inhalte platzsparend abzubilden. Auch dies ist mit dem Bootstrap-Framework möglich.
