In diesem Artikel erfährst du was es mit den Experten-Einstellungen in den ThemeWare® CMS-Elementen auf sich hat.

In einigen CMS-Elementen findest du im Tab "Erweitert" den Abschnitt "Experten-Einstellungen".

Diese Einstellungen richten sich an Experten die sich mit CMS-Blöcken, CMS-Elementen und dem Bootstrap Grid-System sehr gut auskennen.

Weitere folgen...

In diesem Artikel erfährst du, wie du Bootstrap HTML-Elemente in der Shopware 6 Storefront nutzen kannst.

Folgt bald...

In diesem Artikel erfährst du, wie du Bootstrap CSS-Klassen in der Shopware 6 Storefront nutzen kannst.

Folgt bald...

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":

Das Sichern und Wiederherstellen der Theme-Konfiguration entspricht derzeit grundsätzlich dem Import bzw. Export der Theme-Konfiguration. Mehr dazu findest du im Artikel:

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".

CSS-Klassen für Animationen

Diese Sammlung aktivierst/deaktivierst du über die Konfiguration "CSS-Klassen für Animationen laden (optional)".

Ist diese Konfiguration aktiviert lädt ThemeWare® die folgenden Animations-Klassen:

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:

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.

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.

Anwendungsbeispiele

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.

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.

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.

In diesem Artikel erfährst du, wie du ThemeWare® für Shopware 6 manuell installieren kannst.

1. Lade eine Zip von ThemeWare® über deinen Shopware Account herunter

2. Öffne die Administration deines Shops

In diesem Artikel erfährst du, wie du ThemeWare® für Shopware 6 per FTP hochladen kannst.

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:

• Upload über die Erweiterungs-Verwaltung

• Upload per

Folgt bald...

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.

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.

Manuelle Vorgehensweise (für erfahrende Anwender)

ThemeWare® Konfiguration manuell zurücksetzen

1. Datenbank öffnen (z.B. Adminer oder phpMyAdmin)

2. Tabelle "themes" (1) über das Suchfeld suchen

3. Öffne die Tabell mit "select" (2)

4. Datensatz des gewünschten Themes (z.B. "TcinnThemeWareModern") mit "edit" (3) bearbeiten

5. Speichere den Inhalt der Spalte "config_values" (4) in einer *.txt Datei um ein "Backup" der aktuellen Konfiguration zu machen

6. Leere den Inhalt der Spalte "config_values" und setze die Spalte auf "NULL" (5)

7. Speichere die Änderung des Datensatzes (6) und verlasse die Datenbank

Die Änderung wird beim nächsten öffnen der Theme-Konfiguration in dein Theme geladen.

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.

In diesem Artikel erfährst du wie du die ThemeWare® Konfiguration exportieren und importieren kannst.

Export und Import der Theme-Konfiguration

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

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)

1. Datenbank öffnen (z.B. Adminer oder phpMyAdmin)

2. Tabelle "themes" (1) über das Suchfeld suchen

3. Öffne die Tabell mit "select" (2)

• 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.

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.

Storefront-Indikator

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!

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.

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.

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® Pro-Edition

custom/plugins/TcinnThemeWareXYZ

ThemeWare® Cloud-Edition

In diesem Artikel erfährst du wie du ThemeWare® über die Datenbank deaktivieren kannst.

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.

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.

1. Datenbank öffnen (z.B. Adminer oder phpMyAdmin)

Die Shopware 6 Storefront basiert auf dem Bootstrap-Framework. Aufgrund unserer HC-Architecture® ist ThemeWare® ebenfalls vollständig kompatibel mit Bootstrap.

Bootstrap CSS-Klassen

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.

Text

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

• sm - ab 576px

• md - ab 768px

• lg - ab 992px

• 0 - Abstand auf 0 setzen

• 1 - Abstand auf $spacer * .25 setzen

• 2 - Abstand auf $spacer * .5 setzen

In diesem Artikel erfährst du, wie du die Datenbank mit der Adminer-Erweiterung für Shopware 6 bearbeiten kannst.

Datenbank bearbeiten

Wir empfehlen für einen einfachen Zugriff auf die Datenbank die kostenlose Erweiterung "Adminer für das Admin".

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.

1. Erweiterung installieren

1. Lade den aktuellsten Release als Zip-Datei herunter

2. Lade die Zip-Datei in deinen Shop hoch

3. Installiere und aktiviere die Erweiterung anschließend

1. Wurde die Erweiterung erfolgreich aktiviert, kannst du deine Datenbank über die Shopware Einstellungen erreichen ("Einstellungen" => "Erweiterungen" => "Adminer")

2. Nun kannst du Änderungen in der Datenbank vornehmen

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.

In diesem Artikel erfährst du, wie du ein manuelles Backup der Theme-Konfiguration machen kannst.

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.

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.

Backup der Theme-Konfiguration

1. Datenbank öffnen (z.B. Adminer oder phpMyAdmin)

2. Tabelle "themes" (1) über das Suchfeld suchen

3. Öffne die Tabell mit "select" (2)

4. Datensatz des gewünschten Themes (z.B. "TcinnThemeWareModern") mit "edit" (3) bearbeiten

5. Speichere den Inhalt der Spalte "config_values" (4) in einer *.txt oder .json Datei um ein "Backup" der aktuellen Konfiguration zu machen

6. Verlasse die Datenbank ohne etwaige Änderungen zu speichern

In diesem Artikel erfährst du, wie du ThemeWare® für Shopware 6 manuell updaten bzw. aktualisieren kannst.

1. Lade dir dazu die aktuelle ThemeWare® Zip-Datei über deinen Shopware Account runter.

2. Öffne die Administration deines Shops

3. Wechsel über die Hauptnavigation in die "Erweiterungs-Verwaltung" (1) (2) ("Erweiterungen" => "Meine Erweiterungen")

4. Wechsel in den Tab "Themes" (3)

5. Lade die Zip über den Button "Erweiterung hochladen" (4) in deinen Shop

6. 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.

Die Shopware 6 Storefront basiert auf dem Bootstrap-Framework. Aufgrund unserer HC-Architecture® ist ThemeWare® ebenfalls vollständig kompatibel mit Bootstrap.

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.

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.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Tabellen

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.

In diesem Artikel erfährst du, wie du die Konfiguration "CSS-Klasse (Spalte)" in CMS-Elementen von ThemeWare® nutzen kannst.

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.

Beispiel

Standardmäßig haben die "individuellen" CMS-Blöcke ihr vorgesehenes Spaltenlayout. Hier zum Beispiel der 6-Spalter:

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: