# Willkommen **Willkommen in der ThemeWare® Wissensdatenbank und vielen Dank, dass du dich für ThemeWare® entschieden hast!** Die Dokumentation von ThemeWare® für Shopware 6 basiert auf 3 "Säulen": 1. Das **Service Portal** * Das Service Portal ist stets deine **erste Anlaufstelle** bei allen Anliegen rund um ThemeWare®. Es ist quasi dein persönliches Dashboard für ThemeWare®. * Dort findest du **immer alle relevanten Links und Informationen** zu ThemeWare®, das ThemeWare® Video-Tutorial, die ThemeWare® Utilities, die ThemeWare® Suchmaschine, den ThemeWare® Config-Finder, Assistenten, Rabattaktionen, nützliche Tools, Feedback- und Kontaktformulare und vieles mehr. * Das Service Portal erreichst du unter: [service.themeware.design](https://service.themeware.design) 2. Die **ThemeWare® Wissensdatenbank** * In der ThemeWare® Wissensdatenbank findest du die **ThemeWare® Einführung**, viele **Anleitungen** und **Tutorials**, das ThemeWare® Lexikon, **Antworten** auf die häufigsten Fragen, **Lösungen** für die häufigsten Fehler, **Profiwissen** für Agenturen und Freelancer und viele nützliche Informationen zu Shopware 6. * Die ThemeWare® Wissensdatenbank erreichst du unter: [wiki.themeware.design](https://wiki.themeware.design) 3. Das **ThemeWare® Handbuch** * Im ThemeWare® Handbuch findest du Informationen zu allen **Funktionen und Features** von ThemeWare®. * Das ThemeWare® Handbuch erreichst du unter: [doku.themeware.design](https://doku.themeware.design/) ## Die **ThemeWare® Wissensdatenbank** Du befindest dich gerade in der ThemeWare® Wissensdatenbank. Hier findest du auf die meisten Fragen sofort eine Antwort und musst gar nicht erst auf unsere E-Mail warten. Falls du einmal keine Antwort findest, erstelle kurz ein neues Ticket über unser Service Portal. So bekommst du dann am schnellsten unsere Unterstützung. {% hint style="info" %} **Hinweis**: Shopware 5-Benutzer finden unsere Dokumentation hier: [service.tc-innovations.de](https://service.tc-innovations.de/themeware/sw5) {% endhint %} ## Shopware 6 Die ThemeWare® Wissensdatenbank bietet in erster Linie Artikel zu Funktionen von ThemeWare®. Es gibt dabei natürlich Überschneidungen mit Funktionen von Shopware 6. Möchtest du mehr Informationen zu Funktionen von Shopware 6 empfehlen wir dir einen Blick in die [Shopware-Dokumentation](https://docs.shopware.com/de/shopware-6-de/erste-schritte) und den Bereich [Shopware](/wissensdatenbank/shopware). # Einführung Willkommen im ThemeWare® Einführung Die ThemeWare® Einführung ist eine schriftliche Form des beliebten ThemeWare® Video-Tutorials. Da wir das Video-Tutorial derzeit überarbeiten ist die Einführung noch nicht fertig, aber sie wächst Stück für Stück. Fehlt ein Artikel noch oder ist ein Artikel unvollständige, schaue derweil gerne in das [ThemeWare® Video-Tutorial](https://service.themeware.design/themeware-tutorial). {% hint style="info" %} **Hinweis:** Das ThemeWare® Video-Tutorial und die ThemeWare® Einführung werden gerade überarbeitet bzw. geschrieben und stehen dir bald in einer neuen Version zur Verfügung. {% endhint %} ## ThemeWare® Demoshops Die ThemeWare® Demoshops präsentieren dir alle ThemeWare® Themes Live und in Farbe. ### Gibt es Unterschiede zum frisch installierten Theme? Technisch bedingt installieren Themes weder Kategorien noch Erlebniswelten. Du kannst beispielsweise das kostenlose Demodaten-Plugin von Shopware nutzen um damit Beispiel-Produkte und -Kategorien zu importieren. Darüber hinaus erklären wir dir im kostenfreien ThemeWare® Video-Tutorial und Schritt-für-Schritt PDF-Anleitungen wie du Kategorien und die Erlebniswelt der Startseite anlegen kannst. ### Konfiguration Mit ThemeWare® profitierst du von extrem regelmäßigen Updates mit neuen Features und Konfigurationen. Um die vielen ThemeWare® Shops unserer Kunden dabei nicht zu beeinflussen sind neue Funktionen und Features bei der Veröffentlichung natürlich deaktiviert. Du kannst so selber entscheiden ob und wenn ja welches neue Feature du nutzen möchtest. Da wir neue Features aber dennoch in unseren Demoshops präsentieren möchten, weichen die Demoshops mit der Zeit etwas von der Default-Konfiguration unserer Themes ab. Aber keine Sorge, die Demoshops basieren vollständig auf ThemeWare®, du kannst alles was wir in den Demoshops zeigen auch selber mit wenigen Klicks aktivieren. {% hint style="info" %} **Hinweis**: Bitte beachte, dass es zwischen der Pro-Edition und der Cloud-Edition, technisch bedingt, natürlich unterschiede gibt. Diese beziehen sich aber komplett auf den Bereich "CMS-Elemente (Erlebniswelten)". Mehr Informationen dazu findest du [hier](https://service.themeware.design/articles/themeware-editionen-im-vergleich). {% endhint %} Alle Informationen zu unseren Demoshops und zur Konfiguration findest du in folgendem Artikel. Wir empfehlen dir vorab aber erst einmal die Einführung abzuschließen. {% content-ref url="/pages/JbsAexxmabOjTFuU6dTA" %} [Demoshops](/wissensdatenbank/anleitungen/demoshops) {% endcontent-ref %} # ThemeWare® testen In diesem Artikel erfährst du, wie du ThemeWare® testen kannst. Die ThemeWare® Mietversion enthält einen kostenlosen Probemonat. Nutze diese Möglichkeit gerne um verschiedene Varianten zu testen bevor du dich final entscheidest. Die Miete kann jederzeit monatlich gekündigt werden oder wird zu den bei der Buchung angegebenen Preisen automatisch verlängert. {% hint style="success" %} **Tipp**: Erwirbst du Erweiterungen für eine Testdomain kannst du über deinen Shopware-Account später die Lizenzen auf die Live-Domain übertragen. Mehr Informationen dazu findest du in der Shopware-Dokumentation. {% endhint %} ## ThemeWare® testen 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in den "**Store**" (1) (2) ("Erweiterungen" => "Store") 3. Wechsel in den Tab "**Themes**" (3) 4. *Optional*: Gebe "**ThemeWare**" oder z.B. "Modern" in der Suche ein 5. Klicke nun in der Übersicht auf das gewünschte ThemeWare® Theme 6. Es öffnet sich nun die Detailseite des ThemeWare® Themes 7. Klicke auf den Button "**Theme hinzufügen**" (4) 8. Es öffnet sich nun ein Pop-up 9. Hier findest du alle Details zu den Kosten nach Ablauf des Probemonats (5) 10. Lese und akzeptiere die **AGB** (6) 11. Und bestätige die Buchung jetzt mit "**Miete jetzt diese Erweiterung**" (7) Du hast ThemeWare® mit einem kostenlosen Probemonat erworben. Im nächsten Artikel erfährst du, wie du ThemeWare® installieren kannst. #### Screenshots ![Shopware Store in der Administration](/files/yJUtU7sAVsRhDur7jI4j) ![ThemeWare® Modern Pro](/files/AoEwxWMw6c08GQp3ari2) ![ThemeWare® testen](/files/OMfNRz5DYWqyXEMB0qrt) ![Fertig!](/files/tdtGXUiSKmuGRdDAHay6) *** ## Weiterführende Informationen Bei Fragen oder Problemen findest du eine weitere Informationen in unserer ausführlichen Anleitung: [ThemeWare® testen](/wissensdatenbank/anleitungen/administration/themeware-testen) #### ThemeWare® Video-Tutorial {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # ThemeWare® installieren In diesem Artikel erfährst du, wie du ThemeWare® installieren kannst. Wenn du eine Shopware-Erweiterung über den Shopware Store erworben hast und du deinen Shopware Account in deinem Shop angemeldet hast, kannst du diese ganz einfach über die Erweiterungs-Verwaltung installieren. {% hint style="success" %} **Tipp**: Melde deinen Shopware Account in deinem Shop an um auf erworbene Lizenzen zugreifen zu können: [Shopware Account in der Administration anmelden](/wissensdatenbank/shopware/shopware-account/shopware-account-in-der-administration-anmelden) {% endhint %} ## ThemeWare® installieren 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in die "**Erweiterungs-Verwaltung**" (1) (2) ("Erweiterungen" => "Meine Erweiterungen") 3. Wechsel in den Tab "**Themes**" (3) 4. ThemeWare® wird in der Übersicht angezeigt 5. Installiere die Erweiterung nun über die Option "**Installieren**" (5) ThemeWare® wurde nun installiert. Im nächsten Artikel erfährst du, wie du ThemeWare® aktivieren kannst. #### Screenshots ![ThemeWare® installieren](/files/kDu9HTXgVhiONrySwZdm) *** ## Weiterführende Informationen Bei Fragen oder Problemen findest du eine weitere Informationen in unserer ausführlichen Anleitung: [ThemeWare® installieren](/wissensdatenbank/anleitungen/administration/themeware-installieren) #### ThemeWare® Video-Tutorial {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # ThemeWare® aktivieren In diesem Artikel erfährst du, wie du ThemeWare® aktivieren kannst. Hast du eine Erweiterung installiert ist diese grundsätzlich "einsatzbereit". Damit die Erweiterung nun auch genutzt werden kann muss sie noch aktiviert werden. ## ThemeWare® aktivieren 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in die "**Erweiterungs-Verwaltung**" (1) (2) ("Erweiterungen" => "Meine Erweiterungen") 3. Wechsel in den Tab "**Themes**" (3) 4. Aktiviere ThemeWare® über dem ![](/files/990snByAu1IDPQV9v1og) **Switch-Button** (4) links neben dem ThemeWare® Logo ThemeWare® wurde nun aktiviert. Im nächsten Artikel erfährst du, wie du ThemeWare® zuweisen kannst. #### Screenshots ![ThemeWare® aktivieren](/files/c3mEjVclKfrDg1GjwXIT) *** ## Weiterführende Informationen Bei Fragen oder Problemen findest du eine weitere Informationen in unserer ausführlichen Anleitung: [ThemeWare® aktivieren](/wissensdatenbank/anleitungen/administration/themeware-aktivieren) #### ThemeWare® Video-Tutorial {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # ThemeWare® zuweisen In diesem Artikel erfährst du, wie du ThemeWare® zuweist. Das bedeutet, wie du dafür sorgst, dass du ThemeWare® in deiner Storefront dargestellt wird. Wichtig ist erstmal zu verstehen, dass die Basis zur Auslieferung eines Themes immer ein Verkaufskanal ist. Dieser Verkaufskanal muss vom Typ "**Storefront**" ![](/files/jcxWkOEIUd20r9APO6P2) sein. ![Verkaufskanal anlegen](/files/SzRgKGXIClb7cjukMACW) Wenn man einen Verkaufskanal anlegt kann man verschiedene Arten auswählen. Und "Storefront" wäre dann die Art die notwendig ist, damit das Theme "ausgeliefert" wird. {% hint style="success" %} **Tipp**: Du brauchst keinen Verkaufskanal vom Typ "Storefront" ![](/files/jcxWkOEIUd20r9APO6P2) anlegen wenn du bereits einen entsprechenden Verkaufskanal hast. Bei der Standard-Installation erstellt Shopware i.d.R. einen passenden Verkaufskanal der mit dem bei der Installation gewählten Shopnamen betitelt ist. {% endhint %} ## ThemeWare® zuweisen 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in den Verkaufskanal deiner Storefront ![](/files/jcxWkOEIUd20r9APO6P2) im Bereich "**Verkaufskanäle**" (1) 3. Wechsel in den Tab "**Theme**" (2) 4. Klicke nun im Bereich "Theme-Zuweisung" auf den Button "**Theme ändern**" (3) 5. Wähle ThemeWare® im Pop-up "Theme auswählen" aus (4) und klicke auf den Button "**Theme ändern**" (5) 6. Klicke nun oben noch einmal auf "**Speichern**" damit das Theme zugewiesen und kompiliert wird (6) ThemeWare® wurde nun deiner Storefront zugewiesen. #### Screenshots ![ThemeWare® zuweisen](/files/P6LKonDn7gHjCAMf2wIr) ![Pop-up "Theme auswählen"](/files/xhRkmq5MizG3UDw7vh2q) *** ## Weiterführende Informationen Bei Fragen oder Problemen findest du eine weitere Informationen in unserer ausführlichen Anleitung: [ThemeWare® zuweisen](/wissensdatenbank/anleitungen/administration/themeware-zuweisen) #### ThemeWare® Video-Tutorial {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # ThemeWare® Utilities herunterladen In diesem Artikel erfährst du, wie du kostenfreien Zugang zu den beliebten ThemeWare® Utilities für dein ThemeWare® Theme erhältst. #### ThemeWare® Utilities: Hilfreiche Tools und Extras für die Gestaltung deines Shops * **Import-Plugin** für eine **Profi-Erlebniswelt** mit Storytelling-Elementen (Self-hosted) * **Schritt-für-Schritt Anleitung** für eine **Profi-Erlebniswelt** mit Storytelling-Elementen (Cloud) * Alle Grafiken im **offenen PSD-Format** * Logo-Set mit 40 Pagespeed optimierten Grafiken für **Versandanbieter** * Logo-Set mit 90 Pagespeed optimierten Grafiken für **Zahlungsarten** * Grafik-Sets mit verschiedenen **Vorlagen** und **SSL-Siegeln** * **ThemeWare® Customizing Plugin** für individuelle Anpassungen (Self-hosted) * **ThemeWare® Customizing App** für individuelle Anpassungen (Cloud) * Online-Kurse **SEO/Pagespeed**, **Conversion Steigerung** & **Grafik-Gestaltung** * Inkl. **11 essenzielle Tipps** für mehr Bestellungen * Überraschung: kleines **Geschenk als Dank** {% hint style="info" %} **Hinweis**: Zusätzlich profitierst du von unserem neuen Update-Newsletter und erfährst so alles über Updates, Änderungen und neue Funktionen von ThemeWare®. {% endhint %} Auf der folgenden Seite findest du ein Formular über welches du die Tools kostenlos anfordern kannst. Diese werden dir sofort per E-Mail zugeschickt und unterstützen dich bei der Gestaltung deines Shops. {% embed url="" %} ThemeWare® Utilities {% endembed %} *** ## ThemeWare® Utilities anfordern 1. Wähle deine Shopware Version aus 2. Wähle dein ThemeWare® Theme aus 3. Gib deine E-Mail-Adresse ein 4. Wähle aus ob du als Shopbetreiber oder Agentur (Freelancer) für einen Kunden tätig bist 5. Lese und bestätige die Datenschutzerklärung 6. Klicke auf den Button "Jetzt kostenfrei registrieren" Du hast Dich nun erfolgreich registriert und erhältst eine E-Mail mit allen Informationen, Download-Links und mehr. {% hint style="success" %} **Tipp**: Prüfe Deinen Spam-Ordner, wenn du die E-Mail nicht zeitnah erhalten hast und fordere die Utilities im Zweifelsfall erneut an. {% endhint %} {% hint style="info" %} **Hinweis**: Die ThemeWare® Utilities werden von Zeit zu Zeit aktualisiert. Fehlt dir ein Link, führe die Registrierung einfach noch einmal durch um die ThemeWare® Utilities E-Mail noch einmal zu erhalten. {% endhint %} *** ## Weiterführende Informationen #### ThemeWare® Video-Tutorial {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # Überblick Theme-Konfiguration In diesem Artikel geben wir dir einen Überblick über die Theme-Konfiguration im Theme-Manager. Der Theme-Manager ist die **Theme-Verwaltung** in der Administration. Du erreichst diese über die Hauptnavigation "Inhalte" => "Themes". (**Hinweis**: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation.) In der **Theme-Übersicht** findest du alle installierten und aktivierten Themes deines Systems. Mit einem Klick auf das entsprechende Theme gelangst du in die **Theme-Konfiguration** des entsprechenden Themes. #### Screenshots ![Theme-Übersicht in Shopware 6 Self-hosted](/files/U4AvMJgh2YKyISOGBE1r) ![Theme-Übersicht in der Shopware 6 Cloud](/files/z9e9N9M7ALUp0RDDVThx) ## Theme-Konfiguration Die ThemeWare® Theme-Konfiguration unterscheidet sich von der Standard Theme-Konfiguration in Shopware 6. Wir haben einige nützliche Anpassungen integriert und die Darstellung der Konfiguration verbessert. (**Hinweis**: In der Shopware Cloud sind diese Verbesserungen derzeit nicht möglich.) Die ThemeWare® Konfigurationen ist in verschiedene Ebenen untergliedert. Die erste Ebene sind die **Tabs** (1) am oberen Rand der Konfiguration. Hier siehst du ganz grob den Aufbau der Storefromt in Form der wichtigsten Bereiche – wie beispielsweise "Header", "Footer", "Inhalt", "Erlebniswelten" usw. Die nächste Ebene sind die **Accordions** (2). Dies sind aufklappbare **Abschnitte** (Blöcke) welche die Konfiguration in bestimmte Elemente – wie beispielsweise das "Logo", die "Top-Navigation", den "Cookie-Hinweis" usw. – gruppieren. Innerhalb dieser Abschnitte findest du nochmal eine Gruppierung für Konfigurationsfelder in **Bereiche** (Sektionen) (3) wie beispielsweise die "Basiskonfiguration", die "Farbkonfiguration", die "Bildkonfiguration", die "Schriftkonfiguration" usw. Innerhalb dieser Bereiche findest du dann die eigentlichen **Konfigurationsfelder** (4). #### Screenshots ![ThemeWare® Theme-Konfiguration](/files/CJHrWJopVneim20ASoyK) {% hint style="success" %} **Tipp**: Viele Konfigurationsfelder haben Hilfe-Texte ![](/files/sLacuSDb9SxjIJlBh65J). Diese sind sehr wichtig. Schau dir die Hilfe-Texte daher immer an, sie erklären dir genau was die einzelnen Optionen oder die Konfiguration bedeutet und geben dir so eine wichtige Hilfestellung. {% endhint %} ## Tabs im Überblick Grundsätzlich ist die ThemeWare® Konfiguration mit Tabs in die wichtigsten Bereiche der Shopware 6 Storefront eines Shops aufgeteilt. Es fängt erstmal mit dem "**Layout**" an, welches sich auf den gesamten Shop auswirkt. Dann kommt der Tab "**Header**", der Kopfbereich deiner Storefront. Darauf folgt der "**Footer**", der untere Bereich deines Shops in deiner Storefront den du sehr umfangreich konfigurieren kannst. Im Tab "**Inhalt**" findest du seitenübergreifende Inhaltselemente wie beispielsweise die "Breadcrumb" oder den "Cookie-Hinweis". Der Tab "**Erlebniswelten**" enthält Konfigurationsfelder rund um die Gestaltung deiner Erlebniswelten. Die Tabs "**Kategorieseiten**" und "**Produktseiten**" beinhalten die Konfiguration für die entsprechenden Seitentypen deines Shops. Dazu gibt es noch ein paar besondere Tabs: Zum einen gibt es den Tab "**Widgets**". Hier findest du die Konfiguration für die ThemeWare® Widgets. Widgets sind ein neues Feature von ThemeWare® für Shopware 6. Sie sind Inhaltselemente welche an verschiedenen Stellen in der Storefront ausgegeben werden können (z.B. Zahlungs- und Versandarten, Social-Icons). Beispielsweise besteht der Footer aus diesen Widgets. Das bedeutet, dass du den eigentlichen Footer im Tab "Footer" und die Widgets (welche du im Footer verwendest) im Tab "Widgets" konfigurierst. Zum anderen gibt es den Tab "**Erweiterungen**". Hier findest du größere und völlig eigenständige Zusatzfunktionen von ThemeWare® welche i.d.R. an einer bestimmten Stellen in der Storefront ausgegeben werden (z.B. die USP-Bar). Zum Schluss folgt noch der Tab "**Weiteres**". Dieser beinhaltet verschiedene allgemeine Konfigurationen für fortgeschrittene Anwender, Beta-Features und Kompatibilitäts-Konfigurationen der ThemeWare® HC-Architecture®. ## Konfiguration speichern Wenn du die Konfiguration speicherst, wundere dich nicht, dass der Theme-Manager wieder auf den ersten Tab springt. Das ist leider ein Verhalten von Shopware, was wir nicht beeinflussen können. Vielleicht wird dies mit einem künftigen Shopware Update behoben. Merke dir daher einfach, in welchem Tab du gerade warst. Wenn du in den Tab zurück wechselst, dann ist immer das entsprechenden Accordion wieder geöffnet. ## Tipps zur Konfiguration Nimm bei der Konfiguration eher kleine bzw. wenige Änderungen auf einmal vor. Speicher dann und sieh dir die Auswirkung in der Storefront an. {% hint style="success" %} **Tipp**: Mit vielen kleinen Schritten kommst du erfahrungsgemäß schneller ans Ziel. {% endhint %} Wenn du langsam und in kleinen Schritten vorgehst, kannst du besser nachvollziehen, was du zuletzt bearbeitet hast um leichter erneute Änderungen oder Korrekturen vornehmen zu können. Vielleicht speicherst oder kopierst du dir auch, welchen Wert du verändert hast bzw. wie der vorherige Wert war damit du die Änderung einfach wieder zurücksetzen kannst, wenn dir diese nicht gefallen hat. #### Weiterführende Informationen {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # ThemeWare® bearbeiten In diesem Artikel erfährst du, wie du ThemeWare® bearbeitest, also wie du ThemeWare® konfigurierst. Themes bzw. ThemeWare® kannst über die **Theme-Verwaltung** bearbeiten. Es gibt zwei Wege dorthin: 1. Der erste Weg ist, dass du auf "**Inhalte**" und dann auf "**Themes**" klickst. (**Hinweis**: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation.)\ Dann siehst du alle installierten Themes. Dort klickst du das jeweilige Theme bzw. ThemeWare® einfach an und gelangst so in die Theme-Konfiguration und kannst das Theme bearbeiten. 2. Der andere Weg ist, dass du deinen **Verkaufskanal** wählst. Dann klickst du auf den Reiter "**Theme**" und dort klickst du auf "**Theme bearbeiten**". Damit landest du direkt in der Theme-Konfiguration und kannst das Theme bearbeiten. ## Beispiel > **Beispiel**: Das Erste was einem in der Storefront auffällt ist die **USP-Bar**. In diesem Beispiel bearbeiten wir nun einmal die Hintergrundfarbe der USP-Bar. Öffne die Administration deines Shops 1. Wechsel über die Hauptnavigation in die "**Theme-Verwaltung**" (1) (2) ("Inhalte" => "Themes") * **Hinweis**: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation. 2. Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen 3. Die USP-Bar ist eine Erweiterung, daher wechseln wir in den Tab "**Erweiterungen**" (3) 4. Scrolle ein Stück nach unten und öffne den Bereich "**USP-Bar**" (4) 5. Scrolle noch ein Stück nach unten zum Abschnitt "**Farbkonfiguration**" 6. Mit einem Klick auf den Button links neben dem Eingabefeld "**Hintergrundfarbe (Header)**" (5) öffnet sich die "Farbauswahl" (6) 7. Wir wählen die Farbe `#e2f4fd` 8. Speicher die Theme-Konfiguration (7) 9. Wechsel in die Storefront und lade die Seite einmal neu Du hast nun die Hintergrundfarbe der USP-Bar geändert. {% hint style="success" %} **Tipp**: Wenn Sie mal eine Änderung in der Storefront auswirkt, aktualisiere die Storefront bitte einmal mit der folgenden Anleitung: [Storefront aktualisieren](/wissensdatenbank/anleitungen/sonstiges/storefront-aktualisieren) {% endhint %} {% hint style="info" %} **Hinweis**: Für mehr Informationen zur USP-Bar gibt es später noch ein separaten Artikel. {% endhint %} #### Screenshots ![](/files/6VepTuR4xQOoza1CXlYj) **Nachher** ![Beispiel](/files/sBiOwuSZPJtB2Kf2Ce5K) *** ## Weiterführende Informationen Bei Fragen oder Problemen findest du eine weitere Informationen in unserer ausführlichen Anleitung: [ThemeWare® bearbeiten](/wissensdatenbank/anleitungen/administration/themeware-bearbeiten) #### ThemeWare® Video-Tutorial {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # Themes kombinieren {% hint style="info" %} **Info**: Dieser Artikel ist in Arbeit. Schaue derweil gerne in das [ThemeWare® Video-Tutorial](https://service.themeware.design/themeware-tutorial). {% endhint %} In diesem Artikel erfährst du, wie du ThemeWare® Themes kombinieren bearbeitest. ## Beispiel 1. Andere Themes ([Demoshops](https://demo.themeware.design/)) ansehen 2. Installiere ein zusätzliches Theme mit kostenlosem Probemonat * achte darauf, dass beide ThemeWare® Versionen gleich sind * das Vorgehen ist 100% kostenfrei (Achte darauf die weiteren Themes vor Ablauf des Probemonats zu kündigen!) 3. *Optional*: Backup deiner Theme-Konfiguration machen 4. Theme-Konfiguration vergleichen 5. Theme-Konfiguration teilweise übernehmen 6. Theme kompilieren – fertig! 7. Zusätzliches Theme deinstallieren und vollständig löschen #### Weiterführende Informationen {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # Farben konfigurieren In diesem Artikel erfährst du, wie du die Farben in deinem Shop konfigurierst. Farben kannst du in verschiedenen Bereichen konfigurieren: * Theme-Konfiguration * Erlebniswelten * jegliche HTML-Elemente (Inline-Styles) * Shopware Core (sehr wenige, nicht für die Gestaltung relevant) Nachfolgend zeigen wir dir wie du die Hauptfarben in der Theme-Konfiguration an deine Wünsche anpassen kannst, stellen dir das Farbkonfigurationsfeld vor und zeigen dir mögliche Konfigurationswerte. ## Beispiel Wahrscheinlich möchtest du als erstes die Primärfarbe an dein Corporate-Design anpassen. 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in die "**Theme-Verwaltung**" (1) (2) ("Inhalte" => "Themes") * **Hinweis**: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation. 3. Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen 4. Wechsel in den Tab "**Layout**" (3) 5. Öffne den Bereich "**Hauptfarben**" (4) 6. Als "**Primärfarbe**" (5) wählen wir den Wert `#0e8ed3` 7. Im Feld Primärfarbe (hell) wählen wir die Nuance `#6ac5f5` 8. Als Primärfarbe (dunkel) wählen wir `#0c7ebb` 9. Speicher die Theme-Konfiguration 10. Wechsel in die Storefront und lade die Seite einmal neu Du hast nun erfolgreich die Primärfarbe geändert. #### Screenshots ![ThemeWare® Hauptfarben](/files/vQAhn04Zmc2t4Ae4P4Xw) ![TemeWare® Strong - Orange](/files/Su2eBfx8ZmR0VmeeJggc) ![ThemeWare® Strong - Blau](/files/rwewakG0pSirOduDiuBa) {% hint style="info" %} **Hinweis**: Die Farbe vom Logo oder Design-Elementen in Bannern der Erlebniswelt ändert sich dadurch nicht. Dies sind Grafiken die nicht vom Browser umgefärbt werden können. Du kannst aber alle Grafiken im PSD-Format über die ThemeWare® Utilities herunterladen und diese beliebig anpassen. {% endhint %} *** ## Weiterführende Informationen * Grundwissen: Mehr Informationen zum Thema "Farbkonfiguration" findest du im Artikel [Farbkonfiguration](/wissensdatenbank/grundwissen/farbkonfiguration). #### ThemeWare® Video-Tutorial {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # Schriften konfigurieren In diesem Artikel geht es um Typografie, dass heißt, wir zeigen dir, wie du Schriftarten in deinem Shop konfigurieren kannst. ## Beispiel Schriften bzw. Fonts konfigurierst du über die ThemeWare® Konfiguration im Shopware 6 Theme-Manager deiner Administration. > **Beispiel**: In unserem Beispiel ändern wir die Schriftart für Überschriften auf die Schrift "Helvetica". 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in die "**Theme-Verwaltung**" (1) (2) ("Inhalte" => "Themes") * **Hinweis**: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation. 3. Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen 4. Wechsel in den Tab "**Layout**" (3) 5. Öffne den Bereich "**Typografie**" (4) 6. Ändere im Abschnitt "**Headlines**" die **Schriftart** auf `'Helvetica', sans-serif` 7. Scrolle zum Abschnitt "**Strichstärke**" * Diese ist in unserem Beispiel auf `Light: 400`, `Normal: 400` und `Bold: 600` konfiguriert. * Wähle die in Deiner gewünschten Schriftart verfügbaren Strichstärken aus. 8. Speicher die Theme-Konfiguration 9. Wechsel in die Storefront und lade die Seite einmal neu Du hast nun die Schrift für die Headlines in deiner Storefront geändert. #### Screenshots ![Schrift-Konfiguration in ThemeWare®](/files/8wuPmyNshAkMNVo9jjMo) ## Ideales Vorgehen bei der Schrift-Konfiguration Konfiguriere immer zuerst die Schriftart und erst dann die Schriftgröße und die Strichstärke. Schriften sind sehr individuell und je nach Schriftart wirkt sich die Größe bzw. die Strichstärke unterschiedlich aus. {% hint style="success" %} **Tipp**: Es ist sinnvoll für den Text eine möglichst klar lesbare, schlichte Schriftart zu verwenden. Wenn du einen schnörkeligeren Font nutzen möchtest, dann maximal in der Überschrift. {% endhint %} ## Schriftkonfiguration für Shop-Elemente Es gibt paar Bereiche in der Theme-Konfiguration (z.B. die "Top-Navigation" im Tab "Header" oder in den ThemeWare® CMS-Elementen) wo du auswählen kannst ob du die konfigurierte Schrift für "Text" oder für "Überschriften" verwenden möchtest. ![](/files/XgJvJXGTevfd3qmZkFh6) *** ## Weiterführende Informationen * Grundwissen: Mehr Informationen zum Thema "Schriftkonfiguration" findest du im Artikel [Schriftkonfiguration](/wissensdatenbank/grundwissen/schriftkonfiguration) #### ThemeWare® Video-Tutorial {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # Logo einbinden In diesem Artikel zeigen wir dir, wie du dein Logo in deinen Online-Shop einbinden kannst, was du dabei beachten solltest und welche Optimierungsmöglichkeiten du dabei hast. Wir gehen in diesem Artikel davon aus, dass du bereits ein Logo für deinen Shop hast oder einfach unsere PSD-Vorlage nutzt. ## Beispiel Neben den Hauptfarben und der Schrift ist das Logo eins der Shop-Elemente welches essentiell für dein Branding bzw. Corporate-Design ist. Über die ThemeWare Utilities erhältst du für dein Theme eine passende Logo-Vorlage im PSD-Format die du nutzen kannst. Das Shop-Logo bindest du am einfachsten direkt über die ThemeWare® Konfiguration im Shopware 6 Theme-Manager deiner Administration ein. > **Beispiel**: In unserem Beispiel binden wir das ThemeWare® Logo in unseren Shop ein. 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in die "**Theme-Verwaltung**" (1) (2) ("Inhalte" => "Themes") * **Hinweis**: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation. 3. Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen 4. Wechsel in den Tab "**Layout**" (3) 5. Öffne den Bereich "**Bilder**" (4) 6. Klicke auf den ![](/files/lz9MQCBHsyBN4agsnnlD) **Button** (5) um das aktuelle "Logo @Desktop" zu entfernen 7. Logo hochladen oder öffnen * Über den Button "**Dateien hochladen**" (6) kannst du nun dein Logo hochladen und einbinden * Über den Button "**Medien öffnen**" (7) kannst du ein bereits hochgeladenes Bild auswählen und per **Drag-and-Drop** (8) in das Media-Feld ziehen 8. Wiederhole die Schritte 6 und 7 für alle Logos die du austauschen möchtest 9. Speicher die Theme-Konfiguration 10. Wechsel in die Storefront und lade die Seite einmal neu Du hast nun das Shop-Logo erfolgreich ausgetauscht. #### Screenshots ![Bild-Konfiguration in ThemeWare®](/files/SoTfJlJXbg1eGzkyn3r6) ![Dateien hochladen](/files/ezx3O02pJKe5SLnsgKV1) ![Medien öffnen](/files/RJCqAzObnFTTqLmbPq37) ![Beispiel](/files/dPlPxTHXy9iuK4MnIGkN) {% hint style="success" %} **Tipp**: Orientiert dich einfach an unseren PSD-Dateien in unserem Bildvorlagen-Downloadpaket welches du über die [ThemeWare® Utilities](https://service.themeware.design/themeware-utilities) erhältst. {% endhint %} *** ## Weiterführende Informationen * Grundwissen: Mehr Informationen zum Thema "Shop-Logo" findest du im Artikel [Shop-Logo](/wissensdatenbank/grundwissen/shop-logo) #### ThemeWare® Video-Tutorial {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # Logo konfigurieren {% hint style="info" %} **Info**: Dieser Artikel ist in Arbeit. Schaue derweil gerne in das [ThemeWare® Video-Tutorial](https://service.themeware.design/themeware-tutorial). {% endhint %} In diesem Artikel zeigen wir dir, wie du dein Shop-Logo konfigurieren kannst. ## Beispiel Das Shop-Logo konfigurierst du über die ThemeWare® Konfiguration im Shopware 6 Theme-Manager deiner Administration. > **Beispiel**: In unserem Beispiel möchten wir Logo etwas vergrößern. 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in die "**Theme-Verwaltung**" (1) (2) ("Inhalte" => "Themes") * **Hinweis**: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation. 3. Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen 4. Wechsel in den Tab "**Header**" (3) 5. Öffne den Bereich "**Logo**" (4) 6. Hier wählst du im Abschnitt "**Basiskonfiguration**" im Konfigurationsfeld "**Logoart**" (5) die Option "**Bild-Logo**" aus 7. Im Abschnitt "**Logo**" (6) kannst du beispielsweise die "Breite", die "Höhe", den "Abstand nach oben" oder den Hover-Effekt des Shop-Logos konfigurieren 8. Wir ändern die "**Breite**" auf `240` 9. Speicher die Theme-Konfiguration 10. Wechsel in die Storefront und lade die Seite einmal neu Du hast nun dein Shop-Logo konfiguriert. #### Screenshots ![Logo-Konfiguration in ThemeWare®](/files/E4XsfWotAWkOwAW4CfLI) ![Beispiel](/files/ClXK0JPFFRrBnScmrRHg) ## Sticky Top-Navigation Im Bereich "**Sticky Top-Navigation**" findest du im Abschnitt "**Logo**" die Konfiguration für das Logo der Sticky Top-Navigation. **TODO**: Custom-Header ![Logo-Konfiguration für die Sticky Top-Navigation von ThemeWare®](/files/prtZU8tGsGPE3CutXkBN) ## Erlebniswelt-Header Das Logo für den "Erlebniswelt-Header" hat keine gesonderte Konfiguration. Es ersetzt lediglich das eigentliche Logo auf Seiten welche den Erlebniswelt-Header nutzen. **TODO**: ... *** ## Weiterführende Informationen * Grundwissen: Mehr Informationen zum Thema "Shop-Logo" findest du im Artikel [Shop-Logo](/wissensdatenbank/grundwissen/shop-logo) #### ThemeWare® Video-Tutorial {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # Text-Logo konfigurieren Möchtest du ein reines Text-Logo nutzen bietet dir ThemeWare® natürlich auch dafür eine komfortable Möglichkeit. ## Beispiel Das Text-Logo kannst du über die ThemeWare® Konfiguration im Shopware 6 Theme-Manager deiner Administration konfigurieren. > **Beispiel**: In unserem Beispiel aktivieren wir das Text-Logo in der ThemeWare® Konfiguration. 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in die "**Theme-Verwaltung**" (1) (2) ("Inhalte" => "Themes") * **Hinweis**: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation. 3. Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen 4. Wechsel in den Tab "**Header**" (3) 5. Öffne den Bereich "**Logo**" (4) 6. Hier wählst du im Abschnitt "**Basiskonfiguration**" im Konfigurationsfeld "**Logoart**" (5) die Option "**Text-Logo**" aus 7. Im Abschnitt "**Text-Logo**" (6) kannst du beispielsweise den "Logo-Text", die "Schriftart", die "Schriftgröße" oder die "Textfarbe" des Text-Logos konfigurieren 8. Wir ändern die "**Textfarbe**" auf `#0c7ebb` 9. Speicher die Theme-Konfiguration 10. Wechsel in die Storefront und lade die Seite einmal neu Du hast nun das Text-Logo konfiguriert. #### Screenshots ![Text-Logo-Konfiguration in ThemeWare®](/files/ZFJjL0r7mGaZbh1XbZD8) *** ## Weiterführende Informationen #### ThemeWare® Video-Tutorial {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # Texte im Theme bearbeiten Textbausteine - Texte im Theme bearbeiten {% hint style="info" %} **Info**: Dieser Artikel ist in Arbeit. Schaue derweil gerne in das [ThemeWare® Video-Tutorial](https://service.themeware.design/themeware-tutorial). {% endhint %} ... ### Anmerkung Findest du einen Text nicht, versuche das Suchwort zu variieren. Es kann sein, dass in manchen Texten Hyperlinks vorkommen, deren HTML-Code dann das Suchwort "stört". **Beispiel**: Angenommen du suchst nach einem Textbaustein der USP-Bar und in der Storefront lautet der Text "Exzellenter Support". Es kann sein, dass du damit den Textbaustein direkt findest, es kann aber auch sein, dass der Textbaustein einen Link enthält: z.B. `Exzellenter Support`. Die Suche nach `Exzellenter Support` würde in diesem Fall nicht zum Ergebnis führen. Suchst du in diesem Fall lediglich nach "Exzellenter", wirst du den Textbaustein finden. #### Weiterführende Informationen * Anleitung: [Texte bearbeiten und übersetzen](/wissensdatenbank/anleitungen/texte-bearbeiten-und-uebersetzen) {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # USP-Bar konfigurieren {% hint style="info" %} **Info**: Dieser Artikel ist in Arbeit. Schaue derweil gerne in das [ThemeWare® Video-Tutorial](https://service.themeware.design/themeware-tutorial). {% endhint %} ... #### Shopware 6 Icons Eine Übersicht aller Icons von Shopware 6 findest du über folgenden Link. In der Theme-Konfiguration bzw. in Textbausteinen von ThemeWare® kannst du die Icons aus dem Icon-Set "default" nutzen. {% embed url="" %} Shopware 6 Icons {% endembed %} #### Weiterführende Informationen {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # Erlebniswelten verstehen {% hint style="info" %} **Info**: Dieser Artikel ist in Arbeit. Schaue derweil gerne in das [ThemeWare® Video-Tutorial](https://service.themeware.design/themeware-tutorial). {% endhint %} ... #### Weiterführende Informationen {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # Startseite (ThemeWare® Erlebniswelt) einrichten {% hint style="info" %} **Info**: Dieser Artikel ist in Arbeit. Schaue derweil gerne in das [ThemeWare® Video-Tutorial](https://service.themeware.design/themeware-tutorial). {% endhint %} Mit den ThemeWare® bzw. den ThemeWare® Utilities erhältst du alles was du für deine erste Erlebniswelt benötigst: Du erhältst ein **kostenloses Import-Plugin** mit welchem du die Erlebniswelt deines Themes mit wenigen Klicks in deinen Shop (Self-hosted) importieren kannst. Als Shopware Cloud Nutzer erhältst du eine **Schritt-für-Schritt-Anleitung im PDF-Format** zum erstellen der entsprechenden Erlebniswelt für dein Theme. Darüber hinaus erhältst du **alle benötigten Grafik-Vorlagen** im offenen PSD-Format. {% embed url="" %} ThemeWare® Utilities {% endembed %} ... {% hint style="info" %} **Hinweis**: Mit der Shopware 6.5 wurde ein **HTML Sanitzer** implementiert. Dieser Sanitizer verbessert Sicherheit, Zuverlässigkeit und Benutzerfreundlichkeit des Editors, 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. (siehe [HTML Sanitizer](/wissensdatenbank/profiwissen/html-sanitizer)) {% endhint %} #### Weiterführende Informationen {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # Shopseiten bearbeiten und anlegen {% hint style="info" %} **Info**: Dieser Artikel ist in Arbeit. Schaue derweil gerne in das [ThemeWare® Video-Tutorial](https://service.themeware.design/themeware-tutorial). {% endhint %} ... #### Weiterführende Informationen {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # Landingpages bearbeiten und anlegen {% hint style="info" %} **Info**: Dieser Artikel ist in Arbeit. Schaue derweil gerne in das [ThemeWare® Video-Tutorial](https://service.themeware.design/themeware-tutorial). {% endhint %} ... #### Weiterführende Informationen {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # Kategorieseiten bearbeiten und anlegen {% hint style="info" %} **Info**: Dieser Artikel ist in Arbeit. Schaue derweil gerne in das [ThemeWare® Video-Tutorial](https://service.themeware.design/themeware-tutorial). {% endhint %} ... #### Weiterführende Informationen {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # Produktseiten bearbeiten und anlegen {% hint style="info" %} **Info**: Dieser Artikel ist in Arbeit. Schaue derweil gerne in das [ThemeWare® Video-Tutorial](https://service.themeware.design/themeware-tutorial). {% endhint %} ... #### Weiterführende Informationen {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # Shopseiten bearbeiten und anlegen {% hint style="info" %} **Info**: Dieser Artikel ist in Arbeit. Schaue derweil gerne in das [ThemeWare® Video-Tutorial](https://service.themeware.design/themeware-tutorial). {% endhint %} ... #### Weiterführende Informationen {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # Shop-Navigation konfigurieren {% hint style="info" %} **Info**: Dieser Artikel ist in Arbeit. Schaue derweil gerne in das [ThemeWare® Video-Tutorial](https://service.themeware.design/themeware-tutorial). {% endhint %} ... #### Weiterführende Informationen {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # Service-Navigation konfigurieren {% hint style="info" %} **Info**: Dieser Artikel ist in Arbeit. Schaue derweil gerne in das [ThemeWare® Video-Tutorial](https://service.themeware.design/themeware-tutorial). {% endhint %} ... #### Weiterführende Informationen {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # Footer-Navigation konfigurieren {% hint style="info" %} **Info**: Dieser Artikel ist in Arbeit. Schaue derweil gerne in das [ThemeWare® Video-Tutorial](https://service.themeware.design/themeware-tutorial). {% endhint %} ... #### Weiterführende Informationen {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # Footer konfigurieren {% hint style="info" %} **Info**: Dieser Artikel ist in Arbeit. Schaue derweil gerne in das [ThemeWare® Video-Tutorial](https://service.themeware.design/themeware-tutorial). {% endhint %} ... #### Weiterführende Informationen {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # Zahlungs- und Versandanbieter konfigurieren {% hint style="info" %} **Info**: Dieser Artikel ist in Arbeit. Schaue derweil gerne in das [ThemeWare® Video-Tutorial](https://service.themeware.design/themeware-tutorial). {% endhint %} ... #### Weiterführende Informationen {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # Zahlungs- und Versandanbieter Logos {% hint style="info" %} **Info**: Dieser Artikel ist in Arbeit. Schaue derweil gerne in das [ThemeWare® Video-Tutorial](https://service.themeware.design/themeware-tutorial). {% endhint %} ... #### Weiterführende Informationen {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # Mehrsprachigkeit mit ThemeWare® {% hint style="info" %} **Info**: Dieser Artikel ist in Arbeit. Schaue derweil gerne in das [ThemeWare® Video-Tutorial](https://service.themeware.design/themeware-tutorial). {% endhint %} ... #### Weiterführende Informationen {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # Mehr als ein ThemeWare® Theme nutzen {% hint style="info" %} **Info**: Dieser Artikel ist in Arbeit. Schaue derweil gerne in das [ThemeWare® Video-Tutorial](https://service.themeware.design/themeware-tutorial). {% endhint %} Du kannst durchaus mehr als ein ThemeWare® Theme in deinem Shop nutzen. Auch ist es möglich die Pro-Edition und gleichzeitig die Cloud-Edition zu nutzen. {% hint style="warning" %} **Wichtig**: Achte darauf, dass alle ThemeWare® Themes in deinem Shop stets die selbe Versionsnummer haben, damit sie wie gewünscht funktionieren! {% endhint %} ### Besonderheiten #### Doppelte Inhalten in der Theme-Konfiguration ... #### Zusatzfelder ... #### CMS-Blöcke bzw. CMS-Elemente Nutzt du mehr als ein ThemeWare® Theme in deinem Shop, gibt es jeden CMS-Block bzw. jedes CMS-Element nur einmal in der Administration auch wenn diese mehrfach angezeigt werden. Die Blöcke bzw. Elemente funktionieren dann solange, bis du das letzte ThemeWare® Theme deaktivierst. #### Weiterführende Informationen {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # ThemeWare® erwerben In diesem Artikel erfährst du, wie du ThemeWare® nach Ablauf des kostenlosen Probemonats erwerben kannst. Die ThemeWare® Mietversion enthält einen kostenlosen Probemonat. Die Miete kann jederzeit monatlich gekündigt werden. Nach Ablauf des Probemonats wird ThemeWare® zu den bei der Buchung angegebenen Preisen automatisch verlängert. #### Weiterführende Informationen {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} # Support erhalten ## Kunden lieben unseren Service! Bei Fragen oder Problemen steht dir rund um die Uhr unser beliebtes **ThemeWare® Service Portal** zur Verfügung. Dort findest du alle Links zu ThemeWare®, nützliche Tools, Antworten auf die häufigsten Fragen, Lösungen für jedes bekannte Problem sowie Neuigkeiten rund um ThemeWare® und Shopware 6. Das Service Portal ist daher immer die **erste Anlaufstelle bei allen Anliegen** rund um ThemeWare®: {% embed url="" %} ThemeWare® Service Portal {% endembed %} ### ThemeWare® Support Die meisten Fragen haben wir dank tausender Tickets bereits beantwortet, die meisten Fehler sind längst bekannt und gelöst. Damit alle Kunden von diesem Wissen profitieren können, haben wir unser Wissen in der **ThemeWare® Wissensdatenbank**, im **ThemeWare® Handbuch** und im **ThemeWare® Video-Tutorial** dokumentiert. Zusätzlich findest Du in der **Shopware Dokumentation** nahezu alle Informationen zu Shopware 6. So kannst Du fast alle Fragen und Probleme einfach selber lösen ohne auf unsere Antwort zu warten müssen. * [ThemeWare® Wissensdatenbank](https://wiki.themeware.design/) * [ThemeWare® Handbuch](https://doku.themeware.design/) * [ThemeWare® Video-Tutorial](https://service.themeware.design/themeware-tutorial) * [Shopware Dokumentation](https://docs.shopware.com/de/shopware-6-de) Falls du dennoch Unterstützung benötigst, kannst du über das **ThemeWare® Service Portal** ein Ticket eröffnen um schnelle Hilfe zu erhalten. #### Support erhalten 1. Schaue in die [Shopware Dokumentation](https://docs.shopware.com/de/shopware-6-de) 2. Schaue bei Problemen/Fehlern in den [Shopware Issuetracker](https://issues.shopware.com/) 3. Schaue in die ThemeWare® Dokumentation * [ThemeWare® Video-Tutorial](https://service.themeware.design/themeware-tutorial) * [ThemeWare® Wissensdatenbank](https://wiki.themeware.design/) * [ThemeWare® Handbuch](https://doku.themeware.design/) 4. Nutze die [ThemeWare® Suche](https://search.themeware.design/) um die gesamte ThemeWare® Dokumentation zu durchsuchen 5. Optional: **ThemeWare® Service Portal** 1. Rufe das Service Portal auf: [service.themeware.design](https://service.themeware.design/) 2. Klicke in der blauen Navigation (oben am Bildschirmrand) auf "Support anfordern" 3. Scrolle zum Abschnitt "Ticket eröffnen" 4. Öffne den Reitern "ThemeWare® Support anfragen" 6. **Shopware Account** 1. Logge dich in deinen [Shopware Account](https://account.shopware.com/) ein 2. Wechsel in den Bereich "Händler" (ehemals "Shopbetreiber") 3. Öffne die Rubrik "Support" 4. Klicke oben rechts in der Navigation auf "Support anfragen" 5. Wähle Deinen Shop aus 6. Wähle die Option "Support für Erweiterungen" 7. Wähle die Erweiterung aus, für die Du Support benötigst {% embed url="" %} ThemeWare® Support {% endembed %} Wir beantworten alle Tickets in kürzester Zeit. Wenn du nicht innerhalb von 24 Stunden eine Antwort erhältst gab es daher wahrscheinlich ein technisches Problem bei deiner Anfrage. Versuche es einfach erneut. {% hint style="success" %} **Tipp**: Achte darauf deine Antwort-Adresse korrekt zu übermitteln. Es kommt leider gelegentlich vor, dass Antworten nicht übermittelt werden können. {% endhint %} *** ### Aufwands-/Kosteneinschätzung von unseren ThemeWare® Experten Benötigst du eine Aufwands-/Kosteneinschätzung von unseren ThemeWare® Experten für ein individuelles Shopware Design, Landingpage Designs, individuelle Anpassungen oder andere Shopware-Services, nutze in jedem Fall das ThemeWare® Service Portal: {% embed url="" %} ThemeWare® Services im Überblick {% endembed %} *** ### Wünsche, Vorschläge, Feedback oder Kritik Du hast eine Idee für eine bislang fehlende Funktion, von der auch viele andere Shopbetreiber profitieren würden? Du bist mit ThemeWare® oder einem Service unzufrieden? Du hast Wünsche oder Feedback zu Artikeln oder Videos? Dann lasse es uns wissen! Wir freuen uns immer über Vorschläge und Hinweise, um unsere Produkte noch weiter zu verbessern. Jedes Feedback wird von unseren Entwicklern geprüft und beantwortet. Wir informieren Dich auch gerne sobald Dein Feedback Einzug in ThemeWare® gefunden hat. {% embed url="" %} Verbesserungsvorschlag (Feature-Request) {% endembed %} *** #### Weiterführende Informationen {% embed url="" %} ThemeWare® Video-Tutorial {% endembed %} {% embed url="" %} Shopware Dokumentation: Händler-Support {% endembed %} # Updates und Neuigkeiten Eine der größten Vorteile von ThemeWare® ist die stätig Weiterentwicklung. Du erhältst so regelmäßig neue Funktionen, verkaufsfördernde Features, Aktualisierungen, Verbesserungen und natürlich auch Fixes. {% hint style="success" %} **Tipp**: Schaue regelmäßig auf die Seite "[Neuigkeiten und Ankündigungen](https://service.themeware.design/news)" in unserem Service Portal um über Neuigkeiten bzw. bevorstehende Änderungen informiert zu sein! {% endhint %} Auf welche Änderungen du dich in welchem Release freuen kannst, erfährst du auf diversen Wegen: ## Der ThemeWare® Newsletter Der ThemeWare® Update-Newsletter ist Bestandteil der ThemeWare® Utilities. So verpasst du keine Neuigkeiten mehr! {% embed url="" %} Hilfreiche Tools und Extras für die Gestaltung deines Shops {% endembed %} ## Der ThemeWare® Changelog Den ThemeWare® Changelog findest du zum einen auf der [Shopware Store](https://store.shopware.com/tc-innovations-gmbh.html?p=1\&o=12\&n=21\&c=1033\&shopwareVersion=6)-Seite deines Themes im Tab "Änderungen": ![](/files/wL3PyPDbVHgCp8NzRKyt) Und zum anderen im Bereich "Changelogs" im ThemeWare® [Service Portal](https://service.themeware.design/changelogs): ![](/files/ii5nRkxtBaPNM4Pyz7RU) *** ## Update-Leitfaden ⭐ * [ ] Führe Updates möglichst regelmäßig durch um stets Neuerungen, Verbesserungen und Fixes zu erhalten und Probleme bei großen Versionssprüngen zu vermeiden. * [ ] Warte mit Updates nach Möglichkeit ein paar Tage. * [ ] Teste Updates vorab in einem Testsystem. * [ ] Erstelle in jedem Fall vor jedem Shopware Update ein [Backup](https://cnkdy04.na1.hubspotlinks.com/Ctc/ZT+113/cNkdY04/VWVRsk4Q1nsBW77-x983D8d27VLsY3L5p8DzzN5yXtlK3qn9gW95jsWP6lZ3kvVCLh647ftt5HW5xTX_m6J8t4vW90dZzj7ysJ0DW3VfPks2Nm8GmW4Jvw-H3XFNrSW2q1m_32Pd_6DW884rqG3xtbklVVzRqR16W7gSW1N2vds3QzNHYW7K-z9D6_g4qpW2n8Gv_1wPnykW4hZvcx4p1dGBW2NQQv14n8rCtW45XC-z5v4xRhW33DSFy92cbYzW1dG67c5q64msW67-pGj8pCFY7W25bsnQ5cbf5-W3VWbWh7NJ7ZrW6M7jC92RNfH2N7TD7TmGtzmpW81J7Bw5CYDcgW6dsbkh5Bn36NW52z6hV9c7wByW8LxdbG79zfDlW5RXq6-4PzgnsW6Z4rnN1hvZHbW5N9VKj6krb67M3mCZ__c9F0W7Rtl4K7lFMYTf7Lw2ds04). * [ ] Informiere dich vor dem Shopware Update über vergangene [Shopware Releases](https://www.shopware.com/de/news/features-and-releases/). * [ ] Informiere dich vor Shopware und ThemeWare® Updates über vergangene [News](https://service.themeware.design/news) im Service Portal. * [ ] Prüfe vor jedem Shopware Update den [Shopware Changelog](https://www.shopware.com/de/changelog/). * [ ] Prüfe vor ThemeWare® Updates den [ThemeWare® Changelog](https://service.themeware.design/changelog) auf dich betreffende Änderungen und Update Hinweise. * [ ] Deaktiviere inkompatible Erweiterungen vor dem Update und aktiviere diese erst wenn du sicher gestellt hast, dass die Version in deinem Shop Kompatibel ist. (z.B. [ThemeWare® Kompatibilität](https://service.themeware.design/shopware-kompatibilitaet)) * [ ] Beachte bei Updates unsere Update-Anleitungen: * Tutorial: [ThemeWare® updaten](/wissensdatenbank/anleitungen/administration/themeware-update-durchfuehren) * Tutorial: [Shopware Updates und ThemeWare®](/wissensdatenbank/anleitungen/administration/shopware-updates-und-themeware) * [ ] Wir freuen uns auf [Feedback](https://service.themeware.design/support#feedback) zu unseren Updates. # Anleitungen Hier findest du viele hilfreiche Anleitungen zu ThemeWare® für Shopware 6. Bevor du mit unseren Anleitungen startest empfehlen wir dir einen Blick in unser [Video-Tutorial](https://service.themeware.design/themeware-tutorial) und das [Einführung](/wissensdatenbank/einfuehrung). Dort erfährst alle wichtigen Grundlagen welche dir bei den Anleitungen sehr weiterhelfen. Ergänzend dazu empfehlen wir dir unbedingt einen Blick in die offizielle **Shopware Dokumentation** denn viele Sachen die du in den Anleitungen konfigurieren betreffen einige Shopware Grundfunktionen: {% embed url="" %} Shopware 6 {% endembed %} # Administration # ThemeWare® testen In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 testen kannst. Die ThemeWare® Mietversion enthält einen **kostenlosen Probemonat**. Die Miete kann jederzeit monatlich gekündigt werden oder wird zu den bei der Buchung angegebenen Preisen automatisch verlängert. 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in den "**Store**" (1) (2) ("Erweiterungen" => "Store") 3. Wechsel in den Tab "**Themes**" (3) 4. *Optional*: Gebe "**ThemeWare**" oder z.B. "Modern" in der Suche ein 5. Klicke nun in der Übersicht auf das gewünschte ThemeWare® Theme 6. Es öffnet sich nun die Detailseite des ThemeWare® Themes 7. Klicke auf den Button "**Theme hinzufügen**" (4)\ ![](/files/HySqXDIgVAFyu4C3svaJ) 8. Es öffnet sich nun ein Pop-up 9. Hier findest du alle Details zu den Kosten nach Ablauf des Probemonats (5) 10. Lese und akzeptiere die **AGB** (6) 11. Und bestätige die "Buchung" jetzt mit "**Miete jetzt diese Erweiterung**" (7)\ ![](/files/55tXm1ORbjDcOmglP635) Du hast ThemeWare® mit einem kostenlosen Probemonat erworben. {% hint style="success" %} **Tipp**: Installiere ThemeWare® als nächstes: [ThemeWare® installieren](/wissensdatenbank/anleitungen/administration/themeware-installieren) {% endhint %} #### Screenshots ![Shopware Store in der Administration](/files/yJUtU7sAVsRhDur7jI4j) ![ThemeWare® Modern Pro](/files/AoEwxWMw6c08GQp3ari2) ![ThemeWare® testen](/files/OMfNRz5DYWqyXEMB0qrt) ![Fertig!](/files/tdtGXUiSKmuGRdDAHay6) *** #### Weiterführende Informationen {% hint style="info" %} **Hinweis**: Erworbene Erweiterungen erscheinen automatisch in der Erweiterungs-Verwaltung. Ein manueller Upload ist nicht nötig. Du kannst Erweiterungen nach dem Bestellabschluss direkt über die Detailseite installieren, wir empfehlen dir aber den weg über die Erweiterungs-Verwaltung. {% endhint %} {% hint style="success" %} **Tipp**: Erwirbst du Erweiterungen für eine Testdomain kannst du über deinen Shopware-Account später die Lizenzen auf die Live-Domain übertragen. Mehr Informationen dazu findest du in der Shopware-Dokumentation. {% endhint %} {% hint style="success" %} **Info**: Es gibt keine gesonderte "**Testversion**" von ThemeWare®. Technisch gesehen, testest du stets die Vollversion von ThemeWare® mit dem vollen Funktionsumfang. **Einstellungen die du im Probemonat vornimmst bleiben darüber hinaus erhalten.** {% endhint %} {% hint style="warning" %} **Wichtig**: Um den Store in der Administration nutzen zu können musst du die folgenden Punkte beachten: 1. Registriere deinen Shop in deinem Shopware Account: [Shop im Shopware Account einrichten](/wissensdatenbank/shopware/shopware-account/shop-im-shopware-account-einrichten) 2. Verknüpfe deinen Shopware Account mit der Shop-Administration: [Shopware Account mit Shop verknüpfen](/wissensdatenbank/shopware/shopware-account/shopware-account-mit-shop-verknuepfen) 3. Melde dich mit deinen Shopware Account in der Administration an: [Shopware Account in der Administration anmelden](/wissensdatenbank/shopware/shopware-account/shopware-account-in-der-administration-anmelden) {% endhint %} # ThemeWare® kaufen In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 kaufen kannst. {% hint style="info" %} **Hinweis**: Shopware hat am 28. Dezember 2023 die Buchungsmöglichkeiten für Erweiterungen im Store geändert. Erweiterungen können nun ausschließlich gemietet werden: [ThemeWare® mieten](/wissensdatenbank/anleitungen/administration/themeware-mieten) {% endhint %} # ThemeWare® mieten In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 mieten kannst. Die ThemeWare® Mietversion enthält einen kostenlosen Probemonat. Die Miete kann jederzeit monatlich gekündigt werden oder wird zu den bei der Buchung angegebenen Preisen automatisch verlängert. 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in den "**Store**" (1) (2) ("Erweiterungen" => "Store") 3. Wechsel in den Tab "**Themes**" (3) 4. *Optional*: Gebe "**ThemeWare**" oder z.B. "Outdoor" in der Suche ein 5. Klicke nun in der Übersicht auf das gewünschte ThemeWare® Theme 6. Es öffnet sich nun die Detailseite des ThemeWare® Themes 7. Klicke auf den Button "**Theme hinzufügen**" (4)\ ![](/files/HySqXDIgVAFyu4C3svaJ) 8. Es öffnet sich nun ein Pop-up 9. Hier findest du alle Details zu den Kosten nach Ablauf des Probemonats (5) 10. Lese und akzeptiere die **AGB** (6) 11. Und bestätige die Buchung jetzt mit "**Miete jetzt diese Erweiterung**" (7)\ ![](/files/55tXm1ORbjDcOmglP635) Du hast ThemeWare® nun gemietet. {% hint style="success" %} **Tipp**: Installiere ThemeWare® als nächstes: [ThemeWare® installieren](/wissensdatenbank/anleitungen/administration/themeware-installieren) {% endhint %} #### Screenshots ![Shopware Store in der Administration](/files/yJUtU7sAVsRhDur7jI4j) ![ThemeWare® Outdoor Cloud](/files/AoEwxWMw6c08GQp3ari2) ![ThemeWare® mieten](/files/OMfNRz5DYWqyXEMB0qrt) ![Fertig!](/files/tdtGXUiSKmuGRdDAHay6) *** #### Weiterführende Informationen {% hint style="info" %} **Hinweis**: Erworbene Erweiterungen erscheinen automatisch in der Erweiterungs-Verwaltung. Ein manueller Upload ist nicht nötig. Du kannst Erweiterungen nach dem Bestellabschluss direkt über die Detailseite installieren, wir empfehlen dir aber den weg über die Erweiterungs-Verwaltung. {% endhint %} {% hint style="success" %} **Tipp**: Erwirbst du Erweiterungen für eine Testdomain kannst du über deinen Shopware-Account später die Lizenzen auf die Live-Domain übertragen. Mehr Informationen dazu findest du in der Shopware-Dokumentation. {% endhint %} {% hint style="warning" %} **Wichtig**: Um den Store in der Administration nutzen zu können musst du die folgenden Punkte beachten: 1. Registriere deinen Shop in deinem Shopware Account: [Shop im Shopware Account einrichten](/wissensdatenbank/shopware/shopware-account/shop-im-shopware-account-einrichten) 2. Verknüpfe deinen Shopware Account mit der Shop-Administration: [Shopware Account mit Shop verknüpfen](/wissensdatenbank/shopware/shopware-account/shopware-account-mit-shop-verknuepfen) 3. Melde dich mit deinen Shopware Account in der Administration an: [Shopware Account in der Administration anmelden](/wissensdatenbank/shopware/shopware-account/shopware-account-in-der-administration-anmelden) {% endhint %} # ThemeWare® hochladen In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 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](#1-erweiterungs-verwaltung) (empfohlen) * Upload per [FTP](#2-ftp) ## 1) Erweiterungs-Verwaltung 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in die "**Erweiterungs-Verwaltung**" (1) (2) ("Erweiterungen" => "Meine Erweiterungen") 3. Wechsel in den Tab "**Themes**" (3) 4. Klicke auf den Button "**Erweiterung hochladen**" (4)\ ![](/files/5HwXkkdyOiKubcbVbZwa) ThemeWare® wird jetzt hochgeladen. {% hint style="success" %} **Tipp**: Installiere ThemeWare® als nächstes: [ThemeWare® installieren](/wissensdatenbank/anleitungen/administration/themeware-installieren) {% endhint %} #### Screenshots
## 2) FTP {% hint style="info" %} **Hinweis**: 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. {% endhint %} {% content-ref url="/pages/3t8mqH6QjVwQOPg8tT6F" %} [ThemeWare® per FTP hochladen](/wissensdatenbank/profiwissen/themeware-per-ftp-hochladen) {% endcontent-ref %} # ThemeWare® installieren In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 mieten kannst. 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in die "**Erweiterungs-Verwaltung**" (1) (2) ("Erweiterungen" => "Meine Erweiterungen") 3. Wechsel in den Tab "**Themes**" (3) 4. ThemeWare® wird nun in der Übersicht angezeigt 5. Installiere die Erweiterung nun über die Option "**Installieren**" (5) ThemeWare® wurde nun installiert. {% hint style="success" %} **Tipp**: Aktiviere ThemeWare® als nächstes: [ThemeWare® aktivieren](/wissensdatenbank/anleitungen/administration/themeware-aktivieren) {% endhint %} #### Screenshots ![ThemeWare® installieren](/files/kDu9HTXgVhiONrySwZdm) *** #### Weiterführende Informationen {% hint style="warning" %} **Hinweis**: Deine Erweiterungen erscheinen automatisch in der Erweiterungs-Verwaltung deines Shops sofern du die folgenden Punkte beachtet hast: 1. Registriere deinen Shop in deinem Shopware Account: [Shop im Shopware Account einrichten](/wissensdatenbank/shopware/shopware-account/shop-im-shopware-account-einrichten) 2. Verknüpfe deinen Shopware Account mit der Shop-Administration: [Shopware Account mit Shop verknüpfen](/wissensdatenbank/shopware/shopware-account/shopware-account-mit-shop-verknuepfen) 3. Melde dich mit deinen Shopware Account in der Administration an: [Shopware Account in der Administration anmelden](/wissensdatenbank/shopware/shopware-account/shopware-account-in-der-administration-anmelden) {% endhint %} # ThemeWare® aktivieren In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 aktivieren kannst. 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in die "**Erweiterungs-Verwaltung**" (1) (2) ("Erweiterungen" => "Meine Erweiterungen") 3. Wechsel in den Tab "**Themes**" (3) 4. Aktiviere ThemeWare® über dem ![](/files/990snByAu1IDPQV9v1og) **Switch-Button** (4) links neben dem ThemeWare® Logo 5. Leere den gesamten Shopware-Cache und lade die Administration neu ThemeWare® wurde nun aktiviert. {% hint style="success" %} **Tipp**: Weise ThemeWare® als nächstes deiner Storefront zu: [ThemeWare® zuweisen](/wissensdatenbank/anleitungen/administration/themeware-zuweisen) {% endhint %} #### Screenshots ![ThemeWare® aktivieren](/files/c3mEjVclKfrDg1GjwXIT) # ThemeWare® zuweisen In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 einem Verkaufskanal zuweisen kannst. Die Theme-Konfiguration von ThemeWare® kannst du über zwei Wege erreichen: 1. Über den entsprechenden [**Verkaufskanal**](#1.-verkaufskanal) (empfohlen) 2. Über die [**Theme-Konfiguration**](#2.-theme-konfiguration) Nachfolgend zeigen wir dir beide Wege im Detail. {% hint style="info" %} **Hinweis**: Zur Auslieferung eines Themes ist immer ein Verkaufskanal der Art "Storefront" nötig. Wie du einen weiteren Verkaufskanal anlegst, erfährst du hier: [Verkaufskanäle](/wissensdatenbank/shopware/konfiguration/verkaufskanal) {% endhint %} ## 1. Verkaufskanal 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in den Verkaufskanal deiner Storefront ![](/files/jcxWkOEIUd20r9APO6P2) im Bereich "**Verkaufskanäle**" (1) 3. Wechsel in den Tab "**Theme**" (2) 4. Klicke nun im Bereich "Theme-Zuweisung" auf den Button "**Theme ändern**" (3) 5. Wähle ThemeWare® im Pop-up "Theme auswählen" aus (4) und klicke auf den Button "**Theme ändern**" (5) 6. Klicke nun oben noch einmal auf "**Speichern**" damit das Theme zugewiesen und kompiliert wird (6) ThemeWare® wurde nun deiner Storefront zugewiesen. #### Screenshots ![ThemeWare® zuweisen](/files/P6LKonDn7gHjCAMf2wIr) ![Pop-up "Theme auswählen"](/files/xhRkmq5MizG3UDw7vh2q) {% hint style="success" %} **Tipp**: Beginne nun mit der Bearbeitung von ThemeWare®: [ThemeWare® bearbeiten](/wissensdatenbank/anleitungen/administration/themeware-bearbeiten) {% endhint %} ## 2. Theme-Konfiguration 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in die "**Theme-Verwaltung**" (1) (2) ("Inhalte" => "Themes") * **Hinweis**: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation. 3. Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen 4. Du befindest dich automatisch im Tab "**Allgemein**" (3) 5. Wähle nun im Dropdown "**Folgenden Verkaufskanälen zugewiesen**" (4) neben dem Theme-Vorschaubild deinen Verkaufskanal vom Typ "**Storefront**" (5) aus 6. Klicke auf oben auf den Button "**Speichern**" (6) 7. Es erscheint ein Pop-up welches nochmal "nachfragt" ob du die Änderung vornehmen bzw. die aktuelle Zuweisung wirklich ändern möchtest. Klicke hier einfach auf "**Speichern**" ThemeWare® wurde nun deiner Storefront zugewiesen. #### Screenshots ![ThemeWare® zuweisen](/files/wz7lIk7U2YFeydCmTYJX) ![Pop-up "Theme speichern"](/files/QO6zVYBlYAvJWdi77IcN) {% hint style="success" %} **Tipp**: Beginne nun mit der Bearbeitung von ThemeWare®: [ThemeWare® bearbeiten](/wissensdatenbank/anleitungen/administration/themeware-bearbeiten) {% endhint %} # ThemeWare® bearbeiten In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 konfigurieren kannst. Die Theme-Konfiguration von ThemeWare® kannst du über zwei Wege erreichen: 1. Über die [**Theme-Verwaltung**](#1.-theme-verwaltung) (empfohlen) 2. Über den entsprechenden [**Verkaufskanal**](#2.-verkaufskanal) Nachfolgend zeigen wir dir beide Wege im Detail. ## 1. Theme-Verwaltung 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in die "**Theme-Verwaltung**" (1) (2) ("Inhalte" => "Themes") * **Hinweis**: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation. 3. Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen (3) 4. Speicher deine Änderungen nach der Bearbeitung, damit diese in die Storefront übertragen werden #### Screenshots ![Theme-Konfiguration über die Theme-Verwaltung erreichen](/files/Teb3sQqnUdt4c6gzS6LI) ## 2. Verkaufskanal 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in den Verkaufskanal deiner Storefront ![](/files/jcxWkOEIUd20r9APO6P2) im Bereich "**Verkaufskanäle**" (1) 3. Wechsel in den Tab "**Theme**" (2) 4. Klicke nun im Bereich "Theme-Zuweisung" auf den Button "**Theme bearbeiten**" (3) 5. Speicher deine Änderungen nach der Bearbeitung, damit diese in die Storefront übertagen werden #### Screenshots ![Theme-Konfiguration über den Verkaufskanal erreichen](/files/Teb3sQqnUdt4c6gzS6LI) *** #### Weiterführende Informationen {% hint style="info" %} **Hinweis**: Wenn sich eine Änderung in der Storefront nicht auswirkt, aktualisiere die Storefront bitte einmal mit der folgenden Anleitung: [Storefront aktualisieren](/wissensdatenbank/anleitungen/sonstiges/storefront-aktualisieren) {% endhint %} # ThemeWare® zurücksetzen In dieser Anleitung erfährst du, wie du die Konfiguration von ThemeWare® für Shopware 6 zurücksetzen kannst. 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in die "**Theme-Verwaltung**" (1) (2) ("Inhalte" => "Themes") * **Hinweis**: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation. 3. Klicke nun auf dein ThemeWare® Theme um die Theme-Konfiguration zu öffnen 4. Scrolle im Tab "**Allgemein**" zum Abschnitt mit der Zuweisung deines Themes 5. Klicke auf den ![](/files/znXlnW8jdihoBRSSx10u) **Kontext-Button** (3) oben rechts um ein Kontextmenü zu öffnen 6. Wähle die Option "**Theme zurücksetzen**" (4) aus 7. Es erscheint ein Pop-up "Theme zurücksetzen" 8. Setze die Theme-Konfiguration mit dem Button "**Theme zurücksetzen**" (5) zurück #### Screenshots

ThemeWare® zurücksetzen

#### Manuelle Vorgehensweise (für erfahrende Anwender) Erfahrene Anwender können die Konfiguration manuell über die Datenbank zurücksetzen. Eine Anleitung dazu findest du im folgenden Artikel: {% content-ref url="/pages/IMSEpJt7slRn92Vrt2Lj" %} [ThemeWare® Konfiguration zurücksetzen](/wissensdatenbank/profiwissen/themeware-konfiguration-zuruecksetzen) {% endcontent-ref %} # ThemeWare® bewerten In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 bewerten kannst. Wir freuen uns immer über eine ehrliche Bewertung. Die Bewertung muss auch gar nicht lang sein, 1-2 Sätze reichen. {% hint style="success" %} **Tipp**: Falls du uns Feedback geben möchtest kannst du jederzeit Verbesserungsvorschläge oder eine Beschwerde über unser [Service Portal](https://service.tc-innovations.de/themeware/sw6) einsenden. Wir beantworten jedes Feedback. {% endhint %} Es gibt zwei Möglichkeiten wie du ThemeWare® bewerten kannst: 1. Über deinen [**Shopware-Account**](#1.-shopware-account) (empfohlen) 2. Über deine [**Shop-Administration**](#2.-shop-administration) {% hint style="info" %} **Hinweis**: Die Bewertung über den Shopware Account ist detaillierter und daher zielführender als eine Bewertung über die Shop Administration. {% endhint %} Nachfolgend zeigen wir dir beide Wege im Detail. ## 1. Shopware-Account 1. Logge dich in deinen [Shopware-Account](https://account.shopware.com/) ein 2. Wechsel oben links über das Auswahlfeld in den "**Shopbetreiberbereich**" (1) 3. Klicke in der Navigation auf "**Shops**" (2) 4. Wähle nun den Shop, für den du die Erweiterung getestet, gekauft oder gemietet hast 5. Scrolle nach unten bis zur "**Lizenzliste**" 6. Klicke hier die Erweiterung an, welche du bewerten möchtest 7. Rechts oben findest du den Link "**Bewerten**" (3) 8. Im folgenden Pop-up kannst du deine Bewertung vornehmen 9. Gebe deinen **Namen** (4), eine Überschrift bzw. **Zusammenfassung** (5) für deine Bewertung und die deine Rezension bzw. **Beschreibung** (6) ein 10. Bewerte die **Funktionalität**, **Benutzbarkeit**, **Dokumentation** und **Support** (7) von ThemeWare® über die 5-Sterne 11. Bestätige die **AGB** (8) 12. Sende die Bewertung mit "**Bewertung abschicken**" (9) ab #### Screenshots ![](/files/8vwKXJ6g9deYQcoiZMnm) ![](/files/5dPxraES4Rm4UyRq0HHb) ## 2. Shop-Administration 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in die "**Erweiterungs-Verwaltung**" (1) (2) ("Erweiterungen" => "Meine Erweiterungen") 3. Wechsel in den Tab "**Themes**" (3) 4. Klicke auf den ![](/files/znXlnW8jdihoBRSSx10u) **Kontext-Button** (4) neben dem Theme um das Kontextmenü zu öffnen und darin auf "**Bewerten**" (5) 5. Im folgenden Pop-up kannst du deine Bewertung vornehmen 6. Gebe eine **Überschrift** (6) für deine Bewertung und deine **Rezension** (8) ein 7. Bewerte ThemeWare® über die 5-Sterne im Bereich **Bewertung** (7) 8. Bestätige die **AGB** (9) und sende die Bewertung mit "**Abschicken**" (10) ab #### Screenshots ![](/files/SNT9IUnNgUpwrvXr2Fyk) ![](/files/rE0CVknBNLJbMtDmEhXk) # ThemeWare® updaten In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 updaten bzw. aktualisieren kannst. 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in die "**Erweiterungs-Verwaltung**" (1) (2) ("Erweiterungen" => "Meine Erweiterungen") 3. Wechsel in den Tab "**Themes**" (3) 4. Suche dein Theme in der Liste deiner Erweiterungen * Klicke auf "**Aktualisieren**" (4) oder * Klicke auf den ![](/files/znXlnW8jdihoBRSSx10u) **Kontext-Button** neben dem Theme um das Kontextmenü zu öffnen und darin auf "**Aktualisieren auf x.y.z**" (4) * :white\_check\_mark: **Tipp**: Deaktiviere das Theme vor dem Update und leere nach dem Deaktivieren einmal den Shopware-Cache. [ThemeWare® deaktivieren](/wissensdatenbank/anleitungen/administration/themeware-deaktivieren) 5. Leere den gesamten Shopware-Cache und lade die Administration neu ThemeWare® wurde nun aktualisiert. {% hint style="warning" %} **Wichtig**: Um Darstellungsfehlern durch einen veralteten Cache vorzubeugen aktualisiere nach einem Theme-Update einmal die Storefront: [Storefront aktualisieren](/wissensdatenbank/anleitungen/sonstiges/storefront-aktualisieren) {% endhint %} #### Screenshots ![ThemeWare® updaten](/files/YJRe6POU8QgwjzHovKdR) *** ## Update-Leitfaden 💡 Beachte bei Updates von ThemeWare® stets unseren Update-Leitfaden: {% content-ref url="/pages/qWyqwns5jjMp60vx0mWB" %} [Update-Leitfaden](/wissensdatenbank/grundwissen/update-leitfaden) {% endcontent-ref %} *** #### Weiterführende Informationen {% hint style="success" %} **Tipp**: Es ist sinnvoll ThemeWare® vor einem Theme-Update zu deaktivieren: [ThemeWare® deaktivieren](/wissensdatenbank/anleitungen/administration/themeware-deaktivieren) {% endhint %} {% hint style="info" %} **Hinweis**: Wird dir im Kontextmenü kein Update angezeigt schaue bitte einmal in den Artikel [ThemeWare® Update nicht verfügbar](/wissensdatenbank/haeufige-fehler/administration/themeware-update-veroeffentlicht-aber-nicht-verfuegbar). {% endhint %} {% hint style="info" %} **Hinweis**: Funktioniert das Update wie hier beschrieben nicht, schaue bitte einmal in den Artikel [ThemeWare® lässt sich nicht updaten](/wissensdatenbank/haeufige-fehler/administration/themeware-laesst-sich-nicht-updaten). {% endhint %} {% hint style="warning" %} **Wichtig**: Möchtest du ein Shopware Update durchführen ist es immer sinnvoll vorab bzw. danach ThemeWare® zu aktualisieren! Schaue dazu bitte in den Artikel [Shopware Updates und ThemeWare®](/wissensdatenbank/anleitungen/administration/shopware-updates-und-themeware). {% endhint %} # ThemeWare® bereinigen In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 nach Updates bereinigen kannst. Mit ThemeWare® profitierst du von einer kontinuierlichen Weiterentwicklung. Von Zeit zu Zeit kann es daher vorkommen, dass wir Konfigurationsfelder entfernen oder ersetzen. Verbleiben "verwaiste Konfigurationsfelder" in der Konfiguration kannst du diese wie folgt entfernen: 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in die "**Theme-Verwaltung**" (1) (2) ("Inhalte" => "Themes") * **Hinweis**: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation. 3. Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen 4. Klicke auf das Dropdown-Icon am "**Speichern**"-Button 5. Speicher deine Konfiguration mit der Option "**Bereinigen**" (4) ThemeWare® wurde nun bereinigt. #### Screenshots ![Bereinigen der Theme-Konfiguration](/files/KPDExNqHcN325DcSS44f) *** #### Weiterführende Informationen {% hint style="info" %} **Hinweis**: Mehr zum Thema "verwaiste Konfigurationsfelder" findest du im Artikel [Verwaiste Konfigurationsfelder](/wissensdatenbank/anleitungen/konfiguration/verwaiste-konfigurationsfelder). {% endhint %} # ThemeWare® deaktivieren In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 deaktivieren kannst. 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in die "**Erweiterungs-Verwaltung**" (1) (2) ("Erweiterungen" => "Meine Erweiterungen") 3. Wechsel in den Tab "**Themes**" (3) 4. Deaktiviere ThemeWare® über den ![](/files/hLVopes9WzUCr5JUKUYX) **Switch-Button** (4) links neben dem ThemeWare® Logo * :information\_source: **Hinweis**: Damit du ein Theme deaktivieren kannst, darf dieses keinem Verkaufskanal mehr zugewiesen sein! 5. Leere den gesamten Shopware-Cache und lade die Administration neu ThemeWare® wurde nun deaktiviert. {% hint style="warning" %} **Wichtig**: Nicht lizenzierte Erweiterungen müssen komplett gelöscht werden und dürfen nicht mehr in der Erweiterungs-Verwaltung deines Shops auftauchen! {% endhint %} #### Screenshots ![ThemeWare® deaktivieren](/files/uZLDg7JYjt12ArgXPO1X) *** #### Weiterführende Informationen {% hint style="info" %} **Hinweis**: Damit du ein Theme deaktivieren kannst, darf dieses keinem Verkaufskanal mehr zugewiesen sein! {% endhint %} {% hint style="info" %} **Hinweis**: Das "Deaktivieren" von Erweiterungen (Plugins, Apps oder Themes) löscht keine Daten. *(Stand: Shopware 6.5.6.0)* {% endhint %} {% hint style="success" %} **Tipp**: Bei Darstellungsfehlern in der Storefront, kann es helfen Erweiterungen (Plugins, Apps oder Themes) einmal zu deaktivieren und dann wieder zu aktivieren. {% endhint %} # ThemeWare® deinstallieren In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 deaktivieren kannst. 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in die "**Erweiterungs-Verwaltung**" (1) (2) ("Erweiterungen" => "Meine Erweiterungen") 3. Wechsel in den Tab "**Themes**" (3) 4. Klicke auf den ![](/files/znXlnW8jdihoBRSSx10u) **Kontext-Button** (4) neben dem Theme um das Kontextmenü zu öffnen und darin auf "**Deinstallieren**" (5) * :information\_source: **Hinweis**: Deaktiviere das Theme vor dem Update und leere nach dem Deaktivieren einmal den Shopware-Cache. [ThemeWare® deaktivieren](/wissensdatenbank/anleitungen/administration/themeware-deaktivieren) 5. Im folgenden Pop-up musst du die Deinstallation noch einmal mit dem Button "**Deinstallieren**" bestätigen\ ![](/files/J2XLkeBb0b2vHiyxLI6c) 6. Leere den gesamten Shopware-Cache und lade die Administration neu ThemeWare® wurde nun deinstalliert. {% hint style="warning" %} **Wichtig**: Nicht lizenzierte Erweiterungen müssen komplett gelöscht werden und dürfen nicht mehr in der Erweiterungs-Verwaltung deines Shops auftauchen! {% endhint %} #### Screenshots ![ThemeWare® deaktivieren](/files/qztVlNYkQeEDjik5moBR) *** ### Option: Alle App-Daten endgültig entfernen Wenn du ThemeWare® deinstallierst, kannst du die Option "Alle App-Daten endgültig entfernen" nutzen. Diese löscht alle Daten von ThemeWare® wie beispielsweise die Theme-Konfiguration, ThemeWare® Duplikate und die ThemeWare® Zusatzfelder. Möchtest du ThemeWare® also rückstandslos entfernen, nutze diese Option. {% hint style="success" %} **Tipp**: Bist du dir nicht sicher ob du ThemeWare® nicht doch weiter nutzen möchtest, oder die Deinstallation zum Debugging nutzt, behalte die Daten damit Sie bei einer späteren Installation wieder verfügbar sind. {% endhint %} Wird die Option **nicht** genutzt verbleiben alle Daten weiterhin im System und können wieder genutzt werden sobald du ThemeWare® wieder installierst. *** #### Weiterführende Informationen {% hint style="info" %} **Hinweis**: Es ist sinnvoll aber nicht unbedingt nötig Erweiterungen vor der Deinstallation zu deaktivieren. {% endhint %} {% hint style="success" %} **Tipp**: Die Deinstallation kann genutzt werden um Fehler zu beheben, falls beispielsweise Schreibrechte auf dem Server falsch gesetzt wurden. In diesem Fall solltest du die Option "Alle App-Daten endgültig entfernen" auf keinen Fall nutzen! {% endhint %} # ThemeWare® löschen In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 löschen kannst. 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in die "**Erweiterungs-Verwaltung**" (1) (2) ("Erweiterungen" => "Meine Erweiterungen") 3. Wechsel in den Tab "**Themes**" (3) 4. Klicke auf den ![](/files/znXlnW8jdihoBRSSx10u) **Kontext-Button** (4) neben dem Theme um das Kontextmenü zu öffnen und darin auf "**Entfernen**" (5) 5. Melde dich im Tab "**Shopware Account**" mit deinen Account-Zugangsdaten an, damit die Löschung der Erweiterung im gesamten System aktualisiert wird. {% hint style="info" %} **Hinweis**: Es ist nötig Erweiterungen vor dem Löschen zu deinstallieren. {% endhint %} #### Screenshots
ThemeWare® löschen
{% hint style="info" %} **Hinweis**: Sollte sich die Erweiterung nicht direkt löschen lassen, kann sie in den meisten Fällen direkt per FTP und aus der Datenbank gelöscht werden. {% endhint %} *** ### Lizenz entfernen Erweiterungen mit gültigen Lizenzen werden auch nach dem "Löschen" in der Erweiterungs-Verwaltung angezeigt, da der entsprechende Account nach wie vor im Besitz dieser Lizenz ist. Die Lizenz selber kannst du in deinem Shopware-Account endgültig entfernen/archivieren: * Wechsle in deinen Shopware Account unter und kündige dort die Miete. Ohne diese Kündigung wird der Mietvertrag weiter berechnet. # ThemeWare® zurückgeben In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 zurückgeben kannst. Generell ist es beim Erwerb von Erweiterungen (Apps, Plugins oder Theme) im Shopware Store zunächst immer sinnvoll, diese vorab als "Testversion" in Form eines kostenlosen Probemonats zu installieren. So kannst du die entsprechende Erweiterung **30 Tage kostenfrei testen** und sicher gehen, dass diese auch seine Erwartungen erfüllt. Sollte es trotz dessen versehentlich zu einem "Fehlkauf" einer Erweiterung gekommen sein, melde dich bitte einmal über das folgende Kontaktformular beim Shopware-Vertrieb: {% embed url="" %} Shopware-Vertrieb {% endembed %} # ThemeWare® Version ermitteln In dieser Anleitung erfährst du, wie du die Version von ThemeWare® für Shopware 6 ermitteln kannst. 1. Öffne die Administration deines Shops 2. Wechsel über die Hauptnavigation in die "**Erweiterungs-Verwaltung**" (1) (2) ("Erweiterungen" => "Meine Erweiterungen") 3. Wechsel in den Tab "**Themes**" (3) 4. Lese die Versionsnummer bei dem Eintrag für ThemeWare® ab (4) #### Screenshots ![ThemeWare® Version ermitteln](/files/C9K5roBMy5g11xCuk0IU) # Shopware Updates und ThemeWare® In dieser Anleitung erfährst du, wie du vorgehen sollst, wenn du Shopware 6 gemeinsam mit ThemeWare® aktualisieren bzw. updaten musst. Wir veröffentlichen regelmäßig Updates von ThemeWare®. Die meisten ThemeWare® Updates machst du unabhängig von Shopware Updates. Es gibt aber natürlich auch Fälle in denen du ein Shopware Update durchführen möchtest. In diesen Fällen ist es immer sinnvoll vorab bzw. danach Erweiterungen (Plugins, Apps oder Themes) zu aktualisieren. {% hint style="info" %} **Hinweis**: Wie du ThemeWare® aktualisieren kannst erfährst du im Artikel [ThemeWare® updaten](/wissensdatenbank/anleitungen/administration/themeware-update-durchfuehren). {% endhint %} Ob du Erweiterungen vor oder nach dem Shopware-Update aktualisieren musst hängt von der Kompatibilität der Erweiterungen (Plugins, Apps oder Themes) ab. Hier ist auch die Art des Shopware-Releases zu beachten, denn es gibt verschiedene Arten von Shopware-Releases: > **Shopware Versionierung** > > * **Major-Release** > * Wenn inkompatible API-Änderungen durchgeführt wurden (= breaking changes) > * z.B. 6.**5** > 6.**6** > * **Minor-Release** > * Wenn eine neue Funktionalität hinzugefügt wurde, die rückwärtskompatibel ist > * z.B. 6.5.**1** > 6.5.**2** > * **Patch-Release** > * Wenn rückwärtskompatible Fehlerbehebungen durchgeführt wurden > * z.B. 6.5.1.**1** > 6.5.1.**2** *** ## Kompatibilität Grundsätzlich ist ThemeWare® immer mit der aktuellsten Shopware Version kompatibel bzw. wird kurzfristig in einer kompatiblen Version veröffentlicht. Dementsprechend gibt es für ältere Shopware Versionen auch immer eine passende ThemeWare® Version. Da wir ThemeWare® in jedem neuen Shopware-Release testen, kann es – abhängig davon, wie umfangreich die nötigen Anpassungen sind – vorkommen, dass sich ein ThemeWare® Update erst kurz nach dem Shopware-Update veröffentlicht wird. **Major-Releases** Es kann aber vorkommen, dass es keine ThemeWare® Version (dies gilt so übrigens für alle Erweiterungen) gibt, welche – gleichzeitig – sowohl mit der alten als auch mit der neuen Shopware Version kompatibel ist. Dies gilt immer dann, wenn Shopware sogenannte "Breaking Changes" macht, die eine Kompatibilität mit beiden Versionen unmöglich machen. Wie du oben in der "Shopware Versionierung" sehen kannst, sind "Breaking Changes" vor allem in Major-Releases möglich. {% hint style="info" %} **Hinweis**: Mehr Informationen zum Thema "Shopware Kompatibilität" findest du in unserem Artikel [Shopware Kompatibilität](/wissensdatenbank/grundwissen/shopware-kompatibilitaet). {% endhint %} {% hint style="success" %} **Tipp**: Mehr Informationen über mögliche Inkompatibilitäten oder Hinweise zu Updates findest du im Bereich [Neuigkeiten und Ankündigungen](https://service.themeware.design/news) in unserem Service Portal. {% endhint %} {% hint style="warning" %} **Wichtig**: Nutze stets die Update-Funktion der Erweiterungsverwaltung und installiere Erweiterungen nicht manuell um zu vermeiden, dass du eine inkompatible Erweiterung installierst. {% endhint %} *** ## Shopware-Update Der Shopware-Update-Assistent informiert dich falls es inkompatible Erweiterungen gibt. Inkompatible Erweiterungen müssen vor dem Shopware-Update unbedingt deaktiviert werden und sollten erst aktiviert werden, wenn eine kompatible Version veröffentlicht wurde. {% hint style="info" %} **Hinweis**: Das "Deaktivieren" von Erweiterungen (Plugins, Apps oder Themes) löscht keine Daten. *(Stand: Shopware 6.6)* {% endhint %} #### Schritt-für-Schritt Anleitung: Nachfolgend findest du eine Schritt-für-Schritt Anleitung für Shopware Updates. Grundsätzlich gibt es dabei vier mögliche Fälle: 1. Ist die aktuelle Version von ThemeWare® sowohl **mit der aktuellen als auch mit der neuen Shopware Version kompatibel**, kannst du Shopware problemlos updaten ([A](#a.-bereits-kompatibel)). 2. Ist die aktuelle Version von ThemeWare® **nicht** mit der neuen Shopware Version kompatibel aber es gibt eine **kompatible ThemeWare® Version für die aktuelle und die neue Shopware** Version, aktualisiere vor dem Shopware-Update zuerst ThemeWare® ([B](#b.-jetzt-verfuegbar)). 3. Ist die aktuelle Version von ThemeWare® **nicht** mit der neuen Shopware Version kompatibel aber es gibt eine **kompatible Version für die neue Shopware Version**, deaktiviere ThemeWare®, aktualisiere erst Shopware und dann ThemeWare® ([C](#c.-mit-der-neuen-shopware-version)). 4. Ist die aktuelle Version von ThemeWare® **nicht** mit der neuen Shopware Version kompatibel und gibt es derzeit **keine kompatible ThemeWare® Version**, deaktiviere ThemeWare®, führe das Shopware-Update aus und aktiviere ThemeWare® erst wieder nachdem du es aktualisieren konntest ([D](#c.-nicht-kompatibel)). Diese vier Fälle berücksichtigt unsere nachfolgende Anleitung. {% hint style="success" %} **Tipp**: Das meiste in dieser Anleitung gilt so übrigens für alle Erweiterungen (Plugins, Apps oder Themes), wir beziehen uns aber der Einfachheit halber auf ThemeWare®. {% endhint %} *** ## 1) Vorbereitung Wir empfehlen mit Shopware Updates – insbesondere bei Major-Releases von dem Update – nach Möglichkeit – ein paar Tage/Wochen mit dem Update zu warten. {% hint style="success" %} **Tipp**: Warte besonders bei Major-Releases von Shopware ein paar Tage/Wochen mit dem Shopware-Update. {% endhint %} Teste jedes Update vorab in einem Testsystem oder einer Staging-Umgebung und prüfe ob alles reibungslos funktioniert. Erstelle zudem unbedingt ein vollständiges Backup deines Shops vor dem Shopware-Update. {% hint style="success" %} **Tipp**: Erstelle vor dem Shopware-Update ein **vollständiges Backup** deines Shops und **teste das Update** vorab in einem Test- bzw. Staging-System. {% endhint %} Aktualisiere ThemeWare® und alle Erweiterungen (Plugins, Apps oder Themes) in deinem System auf die aktuellsten Versionen. {% hint style="warning" %} **Wichtig**: Aktualisiere vor jedem Shopware-Update alle Erweiterungen (Plugins, Apps oder Themes) in deinem System. {% endhint %} Prüfe ob es für alle Erweiterungen (Plugins, Apps oder Themes) bzw. Themes schon eine kompatible Version gibt. Führe das Shopware-Update am besten nur dann durch, wenn du sichergestellt hast, das alle genutzten Erweiterungen in einer kompatiblen und fehlerfreien Version installiert sind. {% hint style="success" %} **Tipp**: Wenn du sicher gehen möchtest ob eine Erweiterung bereits kompatible ist, kannst du auf der Store-Seite der entsprechenden Erweiterung im [Shopware Store](https://store.shopware.com/tc-innovations-gmbh.html?p=1\&o=12\&n=21\&c=1033\&shopwareVersion=6) prüfen, welche Versionen aktuell unterstützt werden. {% endhint %} Möchtest du das Shopware-Update durchführen, auch wenn nicht alle genutzten Erweiterungen kompatibel sind, lasse inkompatible Erweiterungen solange deaktiviert, bis du eine kompatible Version installieren konntest. {% hint style="warning" %} **Wichtig**: Deaktiviere am besten alle Erweiterungen vor dem Shopware-Update und aktiviere diese erst, wenn diese in einer kompatiblen Version installiert sind. {% endhint %} *** ## 2) Shopware-Update Kommen wir nun zum eigentlichen Update. Es gibt bei Shopware-Updates vier Möglichkeiten: * [#a.-bereits-kompatibel](#a.-bereits-kompatibel "mention") * [#b.-jetzt-verfugbar](#b.-jetzt-verfugbar "mention") * [#c.-mit-der-neuen-shopware-version](#c.-mit-der-neuen-shopware-version "mention") * [#d.-nicht-kompatibel](#d.-nicht-kompatibel "mention") ### A. Bereits kompatibel #### ThemeWare® ist bereits mit der aktuellen als auch mit der neuen Shopware Version kompatibel: ![Bereits kompatibel](/files/WLlyUAJZplCRn5GXwmIA) 1. *Optional*: Weise das "Shopware default theme" deinem Verkaufskanal zu 2. *Optional*: Deaktiviere danach dein ThemeWare® Theme * **Tipp**: Leere einmal den gesamten Shopware-Cache 3. *Optional*: Führe ein ThemeWare® Update aus 4. Führe das Shopware-Update aus * **Wichtig**: Nur wenn wirklich *alle* Erweiterungen "Bereits kompatibel" sind! 5. *Optional*: Aktiviere ThemeWare® nun wieder * **Tipp**: Leere einmal den gesamten Shopware-Cache 6. *Optional*: Weise ThemeWare® zum Abschluss deinem Verkaufskanal zu 7. Leere einmal den gesamten Shopware-Cache und lade die Administration neu {% hint style="info" %} **Hinweis**: Konntest du ThemeWare® nicht auf die neuste Version aktualisieren, schaue einmal in den Artikel [ThemeWare® Update nicht verfügbar](/wissensdatenbank/haeufige-fehler/administration/themeware-update-veroeffentlicht-aber-nicht-verfuegbar). {% endhint %} ### B. Jetzt verfügbar #### Eine kompatible ThemeWare® Version ist vor dem Shopware-Update verfügbar: ![Jetzt verfügbar](/files/zjVRPOxywWgaaRTqT6TJ) 1. Weise das "Shopware default theme" deinem Verkaufskanal zu 2. Deaktiviere danach dein ThemeWare® Theme * **Tipp**: Leere einmal den gesamten Shopware-Cache 3. Führe das ThemeWare® Update aus 4. ThemeWare® ist nun "Bereits kompatibel" ([A](#a.-bereits-kompatibel)) 5. Führe nun das Shopware-Update aus * **Wichtig**: Nur wenn wirklich *alle* Erweiterungen "Bereits kompatibel" sind! 6. Aktiviere ThemeWare® anschließend wieder * **Tipp**: Leere einmal den gesamten Shopware-Cache 7. Weise ThemeWare® zum Abschluss deinem Verkaufskanal zu 8. Leere einmal den gesamten Shopware-Cache und lade die Administration neu {% hint style="info" %} **Hinweis**: Konntest du ThemeWare® nicht auf die neuste Version aktualisieren, schaue einmal in den Artikel [ThemeWare® Update nicht verfügbar](/wissensdatenbank/haeufige-fehler/administration/themeware-update-veroeffentlicht-aber-nicht-verfuegbar). {% endhint %} ### C. Mit der neuen Shopware Version #### Eine kompatible ThemeWare® Version ist nach dem Shopware-Update verfügbar:

Mit der neuen Shopware Version

1. Weise das "Shopware default theme" deinem Verkaufskanal zu 2. Deaktiviere danach dein ThemeWare® Theme 3. Leere einmal den gesamten Shopware-Cache 4. Führe das Shopware-Update aus 5. Führe nun das ThemeWare® Update aus 6. **Wichtig**: Vergewissere dich, dass deine ThemeWare® Version wirklich kompatibel mit der aktuellen Shopware Version ist: [Shopware-Kompatibilität](https://service.themeware.design/shopware-kompatibilitaet) 7. Aktiviere ThemeWare® (in der kompatiblen Version) anschließend wieder * **Tipp**: Leere einmal den gesamten Shopware-Cache 8. Weise ThemeWare® zum Abschluss deinem Verkaufskanal zu 9. Leere einmal den gesamten Shopware-Cache und lade die Administration neu {% hint style="danger" %} **Achtung**: Aktiviere keine inkompatible Version einer Erweiterung in deinem Shopware-Shop! In diesem Szenario ist die alte ThemeWare® Version nicht mit der neuen Shopware Version und die neue ThemeWare® Version nicht mit der alten Shopware Version kompatibel. {% endhint %} {% hint style="info" %} **Hinweis**: Konntest du ThemeWare® nicht auf die neuste Version aktualisieren, schaue einmal in den Artikel [ThemeWare® Update nicht verfügbar](/wissensdatenbank/haeufige-fehler/administration/themeware-update-veroeffentlicht-aber-nicht-verfuegbar). {% endhint %} ### D. Nicht kompatibel #### Eine kompatible ThemeWare® Version für die neue Shopware Version ist noch NICHT verfügbar: ![Nicht kompatibel](/files/BazW43bER8G4QtIxu1Bc) * Gibt es von ThemeWare® noch **keine kompatible Version für den neuen Shopware Release**, warte mit dem Shopware-Update bis dies der Fall ist. * Wenn du dennoch das Shopware-Update durchführen möchtest, lasse ThemeWare® (bzw. jede inkompatible Erweiterung) solange deaktiviert, bist du ein Update auf eine kompatible Version machen konntest. ### Diese Erweiterung ist im Store nicht verfügbar.
Diese Meldung ist weitgehend selbsterklärend. Die betreffende Erweiterung ist nicht im Shopware Store verfügbar und kann daher nicht automatisch aktualisiert werden. Aktualisiere sie in diesem Fall manuell oder deaktiviere sie vor einem Shopware-Update, bis die Kompatibilität geprüft und sichergestellt wurde. *** ## Fehlerbehebung Hoffentlich hast du die Hinweise bezüglich der Erstellung eines Backups und dem Testen in einem Staging-System berücksichtigt und du kannst dein Backup wieder einspielen bzw. einen neuen Testlauf starten. Falls dies nicht der Fall ist, deaktiviere die problematische Erweiterung und aktiviere diese erst wenn du die entsprechende Erweiterung auf eine kompatible Version updaten konntest (siehe [Shopware Kompatibilität](/wissensdatenbank/grundwissen/shopware-kompatibilitaet#kompatibilitat-prufen)). Ist die Administration aufgrund einer inkompatiblen Erweiterung nicht erreichbar, deaktiviere die entsprechende Erweiterung über die Datenbank (siehe [ThemeWare® über die Datenbank deaktivieren](/wissensdatenbank/profiwissen/themeware-ueber-die-datenbank-deaktivieren)). Danach sollte die Administration wieder funktionieren. *** ## Update-Leitfaden 💡 Beachte bei Updates von ThemeWare® stets unseren Update-Leitfaden: {% content-ref url="/pages/qWyqwns5jjMp60vx0mWB" %} [Update-Leitfaden](/wissensdatenbank/grundwissen/update-leitfaden) {% endcontent-ref %} *** ## Weiterfürhende Informationen * FAQ: [Was bedeutet "Bereits kompatibel"?](/wissensdatenbank/haeufige-fragen/was-bedeutet-bereits-kompatibel) * FAQ: [Was bedeutet "Jetzt verfügbar"?](/wissensdatenbank/haeufige-fragen/was-bedeutet-jetzt-verfugbar) * FAQ: [Was bedeutet "Mit der neuen Shopware Version"?](/wissensdatenbank/haeufige-fragen/was-bedeutet-mit-der-neuen-shopware-version) * FAQ: [Was bedeutet "Nicht kompatibel"?](/wissensdatenbank/haeufige-fragen/was-bedeutet-nicht-kompatibel) # Demoshops # Startseite Wie du die Startseite deines Themes erstellen kannst, erfährst du in folgendem Artikel: {% content-ref url="/pages/ZO4n0k7ZaMvpqjN5fSNn" %} [Startseite (ThemeWare® Erlebniswelt) einrichten](/wissensdatenbank/einfuehrung/startseite-themeware-erlebniswelt-einrichten) {% endcontent-ref %} # Kategorie "Höhenluft & Abenteuer" Wie wir die Kategorie "Höhenluft & Abenteuer" in unseren Demoshops erstellt haben findest du in folgender Schritt-für-Schritt-Anleitung: {% content-ref url="/pages/HTSomxWdLv0wUkZlBwGa" %} [Kategorie-Erlebniswelten der Demoshops nachbauen](/wissensdatenbank/anleitungen/erlebniswelten/kategorie-erlebniswelten-der-demoshops-nachbauen) {% endcontent-ref %} # Kategorie "Kochlust & Provence" Wie wir die Kategorie "Kochlust & Provence" in unseren Demoshops erstellt haben findest du in folgender Schritt-für-Schritt-Anleitung: {% content-ref url="/pages/HTSomxWdLv0wUkZlBwGa" %} [Kategorie-Erlebniswelten der Demoshops nachbauen](/wissensdatenbank/anleitungen/erlebniswelten/kategorie-erlebniswelten-der-demoshops-nachbauen) {% endcontent-ref %} # Kategorie "Handwerk & Tradition" Wie wir die Kategorie "Handwerk & Tradition" in unseren Demoshops erstellt haben findest du in folgender Schritt-für-Schritt-Anleitung: {% content-ref url="/pages/HTSomxWdLv0wUkZlBwGa" %} [Kategorie-Erlebniswelten der Demoshops nachbauen](/wissensdatenbank/anleitungen/erlebniswelten/kategorie-erlebniswelten-der-demoshops-nachbauen) {% endcontent-ref %} # Konfiguration Die ThemeWare® Demoshops präsentieren dir alle ThemeWare® Themes Live und in Farbe. Du wirst unter Umständen feststellen, dass es in den Demos in manchen Punkten von deinem frisch installierten Theme abweichen. In diesem Artikel erfährst du, welche Unterschiede es gibt und warum bestimmte Abweichungen normal sind – da neue Funktionen in bestehenden Kundenshops nicht automatisch aktiviert werden, in unseren Demos aber präsentiert werden sollen. *** #### Gibt es Unterschiede in der Konfiguration zwischen meinem Theme und den Demoshops? Ja. Diese betreffen hauptsächlich die ThemeWare®-Konfiguration. Du kannst sie aber problemlos in dein ThemeWare®-Theme übernehmen. #### Warum gibt es Unterschiede in der Konfiguration zwischen meinem Theme und den Demoshops? Mit ThemeWare® profitierst du von extrem regelmäßigen Updates mit neuen Features und Konfigurationsmöglichkeiten. Um sicherzustellen, dass neue Funktionen keinen unerwünschten Einfluss auf bestehende ThemeWare® Kunden-Shops haben, sind diese bei der Veröffentlichung standardmäßig deaktiviert. Unsere Demoshops basieren vollständig auf ThemeWare® und dienen dazu, dir die neuesten Features anschaulich zu präsentieren. Daher weichen sie mit der Zeit etwas von der Standard-Konfiguration ab. Keine Sorge: Alles, was wir in den Demoshops zeigen, kannst du mit wenigen Klicks auch in deinem eigenen Theme aktivieren. So hast du die volle Kontrolle und kannst selbst entscheiden, welche Neuerungen du nutzen möchtest und welche nicht. #### Gibt es andere Unterschiede zwischen meinem Theme und den Demoshops? **Damodaten**: ThemeWare® installiert weder Produkte noch Kategorien oder Erlebniswelten in deinem Shop, damit bereits bestehende Daten nicht beeinträchtigt werden. Du kannst Demodaten aber mit den kostenfreien Demodaten-Plugins von Shopware oder von ThemeWare® bei Bedarf ganz einfach importieren. **Pro- und Cloud-Edition**: Bitte beachte, dass es technisch bedingt Unterschiede zwischen der Pro-Edition und der Cloud-Edition gibt. Diese betreffen ausschließlich den Bereich "CMS-Elemente" (= Erlebniswelten). Unsere Demoshops basieren auf der Pro-Edition und zeigen daher den vollen Funktionsumfang von ThemeWare®. Mehr Informationen dazu findest du [hier](https://service.themeware.design/articles/themeware-editionen-im-vergleich). #### Welche Konfigurationen wurden in den Demoshops geändert? Nachfolgend zeigen wir dir, welche Konfigurationen wir in den Demos vorgenommen haben und wo du sie findest. *** ## Header Im Header haben wir die Schriftgröße im Flyout der Top-Navigation etwas reduziert. ### Top-Navigation Flyout * Tab "Header" * Bereich "Top-Navigation Flyout" * Abschnitt "Level 2" * **Schriftgröße**: 15 * Abschnitt "Level 3 ..." * **Schriftgröße**: 15 *** ## Inhalt In unseren Demoshops blenden wir die Standard-Breadcrumb aus und nutzen bei Bedarf die ThemeWare® CMS-Breadcrumb der Pro-Edition oder die Breadcrumb der ThemeWare® Hero-Sektion. Darüber hinaus haben wir die Lagerbestand-Badge etwas umkonfiguriert. ### Breadcrumb * Tab "Inhalt" * Bereich "Breadcrumb" * **Breadcrumb anzeigen (Startseite)**: nicht anzeigen * **Breadcrumb anzeigen (CMS-Shopseiten)**: nicht anzeigen * **Breadcrumb anzeigen (CMS-Landingpages)**: nicht anzeigen * **Breadcrumb anzeigen (CMS-Kategorieseiten)**: nicht anzeigen * **Breadcrumb anzeigen (CMS-Produktseite)**: nicht anzeigen ### Produkt-Badges * Tab "Inhalt" * Bereich "Produkt-Badges" * Abschnitt "Badge: Lagerbestand-Badge" * **Schwellwert (hoher Bestand)**: 1000 * Abschnitt "Badge: Rabatt-Badge" * **Layout**: -25 % *** ## Erlebniswelten Im Bereich "Erlebniswelten" nutzen wir die ThemeWare® CSS-Scroll-Animationen und blenden die Filter-Überschrift in der Sidebar ein. ### Alle Typen (Shopseiten, Landingpages, Kategorieseiten, Produktseiten) * Tab "Erlebniswelten" * Bereich "Alle Typen (Shopseiten, Landingpages, Kategorieseiten, Produktseiten)" * Abschnitt "CSS-Scroll-Animationen" * **CSS-Scroll-Animation (CMS-Blöcke)**: fade in * **CSS-Scroll-Animation (Überschriften in CMS-Blöcken)**: keine ### Produkt-Filter (Kategorie "Sidebar") * Tab "Erlebniswelten" * Bereich "Produkt-Filter (Kategorie "Sidebar")" * Abschnitt "Headline (in der Sidebar)" * **Filter-Überschrift anzeigen**: anzeigen *** ## Kategorieseiten Auf Kategorieseiten haben wir die Produkt-Boxen um konfiguriert und nutzen das "Hover-Bild"-Feature von ThemeWare®. ### Produkt-Box * Tab "Kategorieseiten" * Bereich "Produkt-Box" * Abschnitt "Inhalte" * **Variantenmerkmale anzeigen**: nicht anzeigen * **Produktnummer anzeigen**: je Layout-Typ * **Hersteller anzeigen**: je Layout-Typ * **Preiseinheit anzeigen**: nicht anzeigen * **Kurzbeschreibung verwenden**: verwenden * Abschnitt "Basiskonfiguration" * **Hover-Effekt (Kaufen-Button / Details-Button)**: slide up * Abschnitt "Produktbild" * **Hover-Effekt**: Bilder überblenden (Zusatzfeld) * Abschnitt "Produkt-Bewertung" * **Produkt-Bewertung anzeigen**: Produkt-Bewertung immer anzeigen * Abschnitt "Layout- und Responsive-Verbesserungen" * **Kompakte Produkt-Boxen**: ja ### Produkt-Box (Layout-Typ "Standard") * Tab "Kategorieseiten" * Bereich "Produkt-Box (Layout-Typ "Standard")" * Abschnitt "Inhalte" * **Produktnummer anzeigen**: anzeigen * **Hersteller anzeigen**: anzeigen *** ## Produktseiten Auf Produktseiten haben wir die vielen neuen und verkaufsfördernden Funktionen von ThemeWare® aktiviert. * Tab "Produktseiten" * Bereich "Layout" * Abschnitt "Basiskonfiguration" * **Sticky "Galerie und Buybox"**: ja ### Galerie * Tab "Produktseiten" * Bereich "Galerie" * Abschnitt "Basiskonfiguration" * **Hinweistext "Abbildung ähnlich" anzeigen**: anzeigen ### Buybox * Tab "Produktseiten" * Bereich "Buybox" * Abschnitt "Basiskonfiguration" * **Kurzbeschreibung anzeigen**: anzeigen ### Produkt-Badges (in der Galerie oder Buybox) * Tab "Produktseiten" * Bereich "Produkt-Badges (in der Galerie oder Buybox)" * **Produkt-Badges anzeigen**: anzeigen ### Lieferinformationen-Label * Tab "Produktseiten" * Bereich "Lieferinformationen-Labels (in der Buybox)" * Abschnitt "Label: Lagerbestand-Label" * **Lagerbestand-Label anzeigen**: anzeigen ### Produkt-Spezifikationen (in der Buybox) * Tab "Produktseiten" * Bereich "Produkt-Spezifikationen (in der Buybox)" * Abschnitt "Abschnitt: Allgemeine Informationen" * **Hersteller anzeigen**: anzeigen * Abschnitt "Abschnitt: Auszeichnung" * **Hersteller-Produktnummer anzeigen**: anzeigen * **GTIN/EAN anzeigen**: anzeigen * Abschnitt "Abschnitt: Maße" * **Gewicht anzeigen**: anzeigen * **Länge anzeigen**: anzeigen * **Breite anzeigen**: anzeigen * **Höhe anzeigen**: anzeigen * Abschnitt "Abschnitt: Lieferbarkeit" * **Verfügbaren Bestand anzeigen**: anzeigen * **Minimale Bestellmenge anzeigen**: anzeigen * **Maximale Bestellmenge anzeigen**: anzeigen * **Zusatzfeld 3 anzeigen**: anzeigen ### Vorteile (in der Buybox) * Tab "Produktseiten" * Bereich "Vorteile (in der Buybox)" * **Vorteile anzeigen**: anzeigen * Abschnitt "Basiskonfiguration" * **Inhalt**: Zusatzfeld oder Textbaustein ### Teilen-Links (in der Buybox) * Tab "Produktseiten" * Bereich "Teilen-Links (in der Buybox)" * **Teilen-Links anzeigen**: anzeigen * Abschnitt "Links" * **Facebook-Link anzeigen**: anzeigen * **X-Link anzeigen**: anzeigen * **Pinterest-Link anzeigen**: anzeigen * **WhatsApp-Link anzeigen**: anzeigen ### Tab "Beschreibung" * Tab "Produktseiten" * Bereich "Tab "Beschreibung"" * Abschnitt "Eigenschaften-Tabelle" * **Zwischenüberschrift über der Eigenschaften-Tabelle anzeigen**: anzeigen * **Hinweistext unter der Eigenschaften-Tabelle anzeigen**: anzeigen * Abschnitt "Weiterführende Links" * **Weiterführende Links anzeigen**: anzeigen * Abschnitt "Downloads" * **Downloads anzeigen**: anzeigen * Abschnitt "Kommentar" * **Kommentar anzeigen**: anzeigen ### Tab "Eigenschaften" * Tab "Produktseiten" * Bereich "Tab "Eigenschaften"" * Abschnitt "Basiskonfiguration" * **Hinweistext unter der Eigenschaften-Tabelle anzeigen**: anzeigen ### Tab "Produktvideos" * Tab "Produktseiten" * Bereich "Tab "Produktvideos"" * **Produktvideos-Tab anzeigen**: anzeigen ### Tab "Datenblätter" * Tab "Datenblätter" * Bereich "Tab "Datenblätter" * **Datenblätter-Tab anzeigen**: anzeigen ### Tab "Benutzerdefinierter Inhalt" * Tab "Produktseiten" * Bereich "Tab "Benutzerdefinierter Inhalt"" * **Benuzerdefinierten Tab anzeigen**: anzeigen ### Tab "Hersteller" * Tab "Produktseiten" * Bereich "Tab "Hersteller"" * **Hersteller-Tab anzeigen**: anzeigen *** ## Sidebar In der "Sidebar" haben wir zwei Elemente aktiviert: * Tab "Sidebar" * Bereich "Sidebar-Widgets: Inhalte zuweisen und anordnen" * Abschnitt "Element 2" * **Inhalt (Widget)**: Vorteile * Abschnitt "Element 3" * **Inhalt (Widget)**: Communities bzw. Social Media *** ## Widgets Im Bereich "Widgets" nutzen wir das Standard SSL-Siegel. Zudem blenden wir das alte Twitter Logo aus und das neue X-Logo ein. ### SSL-Siegel * Tab "Widgets" * Bereich "Auszeichnungen, Siegel oder Zertifikate" * Abschnitt "Basiskonfiguration" * **Standard SSL-Siegel anzeigen**: anzeigen * Bereich "Communities bzw. Social Media" * Abschnitt "Social Icons" * **Twitter-Link anzeigen**: nein * **X-Link anzeigen**: ja *** ## Erweiterungen In den Demoshops haben wir die neue "Hero-Sektion" aktiviert und die breite der USP-Bar angepasst. ### Hero-Sektion * Tab "Erweiterungen" * Bereich "Hero-Sektion (auf Kategorieseiten)" * **Hero-Sektion anzeigen (CMS-Listingseiten)**: anzeigen (per Zusatzfeld) * Abschnitt "Breadcrumb" * **Breadcrumb anzeigen**: ja * **Inhalt ausrichten**: rechts ausrichten * Abschnitt "Basiskonfiguration" * **Nächstes Element hochziehen**: ja (über Zusatzfeld) ### USP-Bar * Tab "Erweiterungen" * Bereich "USP-Bar" * Abschnitt "Basiskonfiguration" * **Größenmodus (Header)**: 100% (Full-width) *** ## Weiteres Im Tab "Weiteres" nutzen wir zusätzliche CSS-Klassen von ThemeWare® für die Individualisierung der Erlebniswelten. * Tab "Weiteres" * Bereich "Erweiterte Einstellungen" * Abschnitt "Zusätzliche CSS-Klassen" * **Erweiterte CSS-Abstandsklassen laden (optional)**: ja * **CSS-Klassen für Animationen laden (optional)**: ja * **CSS "max-width"-Klassen (optional)**: ja ### Beta-Features Darüber hinaus haben wir eine spannende Beta-Funktion aktiviert: * Tab "Weiteres" * Bereich "Beta" * Abschnitt "Top-Navigation Flyout" * **Icon für externe Links anzeigen**: ja * Abschnitt "Produkt-Box" * **Kompakte Produkt-Boxen**: ja *** Dies sind die Konfigurations-Änderungen in den ThemeWare® Demoshops. Stand 01/2025 # Erlebniswelten Erlebniswelten sind eine Grundfunktion von Shopware 6 und ersetzen die Einkaufswelten aus Shopware 5. Mit Erlebniswelten kannst du **Content-Seiten** wie **Landingpages**, **Shopseiten**, **Kategorieseiten** und **Produktseiten** erstellen und gestalten. In diesem Bereich findest du viele nützliche Anleitungen rund um das Thema **Erlebniswelten**. *** #### Weiterführende Informationen Mehr Grundlagen und Informationen zum Thema **Erlebniswelten** findet du hier: {% content-ref url="/pages/SFKrveSRyMJT2c8bfOVE" %} [Erlebniswelten](/wissensdatenbank/grundwissen/erlebniswelten) {% endcontent-ref %} # ThemeWare® CMS-Styling für Erlebniswelten In dieser Anleitung erfährst du, alles über das ThemeWare® CMS-Styling. Für eine maximale Flexibilität und Kompatibilität, basiert das "ThemeWare® CMS-Styling" auf CMS-Blöcken und kann im Tab "Erlebniswelten" für verschiedene Seitentypen aktiviert/deaktiviert werden. * Tab "Erlebniswelten" => Bereich "ThemeWare® CMS-Styling" => ThemeWare® CMS-Styling laden (CMS-Shopseiten / CMS-Landingpages / CMS-Kategorieseiten / CMS-Produktseiten) Das "ThemeWare® CMS-Styling" wird nur in Erlebniswelten mit dem Größenmodus "Zentrierter Inhalt" (=boxed) und angewendet. {% hint style="success" %} **Tipp**: Anwendungsbeispiele findest du in unseren [Demoshops](https://demo.themeware.design/modern/Features/ThemeWare-CMS-Styling/ThemeWare-CMS-Styling-fuer-Erlebniswelten/). {% endhint %} ## ThemeWare® CMS-Styling Auf CMS-Seiten mit aktivem "ThemeWare® CMS-Styling" bekommen CMS-Blöcke eine Grundkonfiguration. Diese besteht derzeit aus einer Rahmenfarbe, einer Hintergrundfarbe und einem Außenabstand nach unten. Diese Farben sind ebenfalls über den Tab "Erlebniswelten" konfigurierbar und werden auf allen Seiten mit aktivem "ThemeWare® CMS-Styling" angewendet. * Tab "Erlebniswelten" => Bereich "ThemeWare® CMS-Styling" => Abschnitt "CMS-Block" bzw. "CMS-Sektion" ### Individuelle Anpassungen mit CSS-Klassen Da das "ThemeWare® CMS-Styling" quasi für alle CMS-Blöcke gleich ist, gibt es zusätzlich zum globalen Styling neue CSS-Klassen um gewünschte Blöcke gezielt zu "resetten". Damit kannst du das gesamte "ThemeWare® CMS-Styling" für einen CMS-Block oder jeweils die Rahmenfarbe, die Hintergrundfarbe oder den Außenabstand entfernen bzw. resetten. Umgekehrt gibt es natürlich auch Fälle wo auf Seiten ohne "ThemeWare® CMS-Styling" dennoch CMS-Blöcke passend gestylt werden sollen. Auch daran haben wir gedacht: Über weitere neue CSS-Klassen kann jedem gewünschten CMS-Block manuell das "ThemeWare® CMS-Styling" hinzugefügt werden. Damit kann man das gesamte "ThemeWare® CMS-Styling" oder jeweils für die Rahmenfarbe, die Hintergrundfarbe oder den Außenabstand auf einem CMS-Block anwenden. **CSS-Klassen** | Klasse | Bereich | Funktionsbeschreibung | | ---------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | **twt-cms-block** | Block | Der entsprechende CMS-Block erhält vordefiniertes Styling (Rahmenfarbe, Hintergrundfarbe, Außenabstand nach unten). | | **twt-cms-block-margin** | Block | Der entsprechende CMS-Block erhält den Außenabstand nach unten vom vordefinierten Styling. | | **twt-cms-block-border** | Block | Der entsprechende CMS-Block erhält die Rahmenfarbe vom vordefinierten Styling. | | **twt-cms-block-background** | Block | Der entsprechende CMS-Block erhält die Hintergrundfarbe vom vordefinierten Styling. | | **twt-cms-block-reset** | Block | Das vordefinierte Styling wird auf den entsprechenden CMS-Block nicht angewendet (Rahmenfarbe, Hintergrundfarbe, Außenabstand nach unten). | | **twt-cms-block-reset-margin** | Block | Der Außenabstand nach unten vom vordefinierten Styling wird im entsprechenden CMS-Block entfernt. | | **twt-cms-block-reset-border** | Block | Die Rahmenfarbe vom vordefinierten Styling wird im entsprechenden CMS-Block entfernt. | | **twt-cms-block-reset-background** | Block | Die Hintergrundfarbe vom vordefinierten Styling wird im entsprechenden CMS-Block entfernt. | | **twt-cms-reset-padding** | Section | Diese Klasse entfernt doppelte Paddings in Layouts mit Sidebar. | {% hint style="info" %} **Hinweis**: Alle ThemeWare® CSS-Klassen findest du in unserem Artikel [ThemeWare® CSS-Klassen für Erlebniswelten](/wissensdatenbank/anleitungen/erlebniswelten/themeware-css-klassen-fuer-erlebniswelten). {% endhint %} ### Sidebar-Erlebniswelten Ab ThemeWare® 0.3.1 gibt es für die Sidebar-Sektion zwei Layout-Varianten. Die entsprechende Konfiguration findest du im Tab "Erlebniswelten". * **Variante 1** * Die Sidebar-Sektion und die Content-Sektion werden (wie gehabt) zu einem Container mit "ThemeWare® CMS-Styling" kombiniert bzw. zusammengefasst. * **Variante 2** * Die Sidebar-Sektion wird nicht mit der Content-Sektion kombiniert bzw. zusammengefasst. > **Tipp**: Die Konfiguration "Sidebar-Sektionen zusammenfassen (CMS Seiten)" findest du im Tab "Erlebniswelten" => Bereich "ThemeWare® CMS-Styling" => Abschnitt "Basiskonfiguration". **Beispiele** ![Sidebar-Sektion und Content-Sektion zu einem Container mit "ThemeWare® CMS-Styling" kombiniert (Variante 1)](/files/w1JdDKKSumqrAu3eP19W) ![Sidebar-Sektion und Content-Sektion mit "ThemeWare® CMS-Styling" aber nicht kombiniert (Variante 2)](/files/wHWmzYu6OesxCmLADYDf) ![Sidebar-Sektion und Content-Sektion ohne "ThemeWare® CMS-Styling"](/files/54KnrVGEPrub81OSgTDH) *** ## Bootstrap CSS-Klassen nutzen Das CMS-Styling fügt dem jeweiligen CMS-Block – wie oben erklärt – einen Rahmen, eine Hintergrundfarbe und den Außenabstand nach unten hinzu. {% code title="ThemeWare® CMS-Styling" %} ```css background-color: #ffffff; border: 1px solid #eeeeee; border-radius: 2px; margin-bottom: 20px; ``` {% endcode %} Shopware hat mit Version 6.6.0 `!important` Anweisungen für Bootstrap-Helfer-Klassen entfernt (siehe [NEXT-29246](https://github.com/shopware/shopware/blob/9f13da017c0ee9ba2a4d85b3c8ad1d58313b451c/changelog/release-6-6-0-0/2023-12-13-do-not-apply-important-to-bootstrap-utility-classes.md)). Dadurch werden nun einige in Bootstrap verfügbare CSS-Klassen aufgrund der entsprechenden CSS-Hierarchie vom CMS-Styling überschrieben. Betroffen sind beispielsweise die folgenden CSS-Klassen und ihre Varianten: ```css .bg-info .bg-opacity-10 .border-0 .border-5 .border-success .border-info-subtle .border-opacity-50 .mb-4 .rounded-bottom .rounded-4 ``` Möchtest du diese Bootstrap CSS-Klassen für den Rahmen, den Hintergrund oder den Abstand unterhalb nutzen, entferne bitte das CMS-Styling für den entsprechenden CMS-Block mit der CSS-Klasse `twt-cms-block-reset`. # ThemeWare® CSS-Klassen für Erlebniswelten In dieser Anleitung findest du, eine Übersicht über die ThemeWare® CSS-Klassen für Erlebniswelten. Mit ThemeWare® stehen dir viele zusätzliche CSS-Klassen für Erlebniswelten zur Verfügung welche dir noch mehr Layout-Möglichkeiten bieten. Diese CSS-Klassen können in den Erlebniswelten (Hauptnavigation "Inhalte" => "Erlebniswelten") über die Sektion- und Block-Einstellungen verwendet werden: ![Block-Einstellungen im Erlebniswelt-Editor](/files/h7xMGMyz2q37MuKHSC9y) Der der Übersichtlichkeit halber gibt es zu einigen Themen separate Artikel. Die Links findest du im entsprechenden Absatz. Zusätzlich findest du zu allen Themen Anwendungsbeispiele in unseren Demoshops. {% hint style="success" %} **Tipp**: Es ist möglich verschiedene Effekte zu kombinieren indem mehrere Klassen in einen Block angewendet werden. {% endhint %} {% hint style="info" %} **Hinweis**: Fehlt dir eine CSS-Klasse aktualisiere ThemeWare® auf die neuste Version. {% endhint %} *** ## ThemeWare® CMS-Styling ThemeWare® nutzt ein vordefiniertes Styling für CMS-Blöcke. Durch diese sogenannte "ThemeWare® CMS-Styling" erhalten alle CMS-Blöcke in Erlebniswelten mit dem Größenmodus "Zentrierter Inhalt" (= boxed) ein Rahmenfarbe, eine Hintergrundfarbe und einen Außenabstand nach unten. Dieses Styling lässt sich zum einen konfigurieren (ab Version 0.3.1), zum anderen kannst du das "ThemeWare® CMS-Styling" für verschiedene Seitentypen in der Konfiguration aktivieren bzw. deaktivieren. Doch damit noch nicht genug: Es ist zudem möglich über CSS-Klassen das "ThemeWare® CMS-Styling" für bestimmte Blöcke zu nutzen oder gezielt nicht zu benutzen. Dafür stehen dir die folgenden Klassen zur Verfügung: **Beispiel** ![Links: mit ThemeWare® CMS-Styling | rechts: ohne ThemeWare® CMS-Styling](/files/jJkmfRetqVPpLg0CAhGn) Mehr Informationen dazu findest du in unserem Artikel: {% content-ref url="/pages/SuzuN4HtVt69GJNJMKam" %} [ThemeWare® CMS-Styling für Erlebniswelten](/wissensdatenbank/anleitungen/erlebniswelten/themeware-cms-styling-fuer-erlebniswelten) {% endcontent-ref %} *** ## Abstandsklassen für CMS-Sektionen/-Blöcke Neben den CSS-Abstandsklassen von Bootstrap stehen dir mit den ThemeWare® CSS-Abstandsklassen weitere (pixelbasierte) Abstandsklassen zur Verfügung um Abstände von CMS-Sektionen/-Blöcken zu definieren. Die Abstandsklassen werden nach dem folgenden Muster benannt: ```css // Abstandsklassen: twt-{Eigenschaft}{Seiten}-{Größe} // für xs // Erweiterte Abstandsklassen: twt-{Eigenschaft}{Seiten}-{Breakpoint}-{Größe} // für sm, md, lg und xl ``` #### Beispiel

Links: Standard Abstand | Rechts: Abstandsklasse "twt-mb-5"

Mehr Informationen dazu findest du in folgendem Artikel: {% content-ref url="/pages/6Z9w4RIT14uWcIDRFDWX" %} [CSS-Abstandsklassen für CMS-Sektionen/-Blöcke](/wissensdatenbank/anleitungen/erlebniswelten/css-abstandsklassen-fuer-erlebniswelten) {% endcontent-ref %} *** ## Boxed-Klassen für Sektionen über die volle Breite Da die CSS-Klasse `container` nicht in jedem Szenario die perfekte Lösung ist, gibt es seit ThemeWare® 1.1.3 neue CSS-Boxed-Klassen um CMS-Blöcke oder CMS-Sektionen in Erlebniswelten "boxed" zu gestalten. #### Beispiel

Links: "Full width"-Sektion | Rechts: "Full width"-Sektion mit zentriertem CMS-Block (boxed)

Mehr Informationen dazu findest du in unserem Artikel: {% content-ref url="/pages/Ph3rfqnVOal2fQfUWdRV" %} [CSS-Klassen für Sektionen über die volle Breite](/wissensdatenbank/anleitungen/erlebniswelten/css-klassen-fuer-sektionen-ueber-die-volle-breite) {% endcontent-ref %} *** ## Dekorationsklassen für Bilder ThemeWare® bietet dir diverse CSS-Dekorationsklassen für Bilder in CMS-Blöcken zur Verfügung. Mit diesen CSS-Klassen kannst du Bilder mit Rahmen oder Schatten dekorieren oder die Bilder abrunden. **Beispiel**

Rechts: Dekorationsklasse "twt-cms-image-border-semi"

Mehr Informationen dazu findest du in unserem Artikel: {% content-ref url="/pages/EysQdTIHPfa9ui7P38B1" %} [Bilder in CMS-Blöcken dekorieren](/wissensdatenbank/anleitungen/erlebniswelten/bilder-in-cms-bloecken-mit-dekorationsklassen-verschoenern) {% endcontent-ref %} *** ## Hover-Effekte für Bilder Mit ThemeWare® erhältst du eine große Auswahl an CSS-Hover-Klassen, welche dir verschiedenste Hover-Effekte für Bilder in CMS-Blöcken ermöglichen. **Beispiel**

Rechts: Hover-Effekt "twt-cms-image-hover-grayscale"

Mehr Informationen dazu findest du in unserem Artikel: {% content-ref url="/pages/46zN0Alc4i2ccuzGaNan" %} [Hover-Effekte für Bilder in CMS-Blöcken](/wissensdatenbank/anleitungen/erlebniswelten/bilder-in-cms-bloecken-mit-hover-effekten-verschoenern) {% endcontent-ref %} *** ## Max-width-Klassen für Sektionen über die volle Breite ThemeWare® bietet dir verschiedene CSS-"max-width"-Klassen um die maximale Breite von CMS-Sektionen/-Blöcken zu definieren. #### Beispiel

Links: "Full width"-Sektion | Rechts: "Full width"-Sektion mit zentriertem CMS-Block (boxed)

Mehr Informationen dazu findest du in unserem Artikel: {% content-ref url="/pages/Ph3rfqnVOal2fQfUWdRV" %} [CSS-Klassen für Sektionen über die volle Breite](/wissensdatenbank/anleitungen/erlebniswelten/css-klassen-fuer-sektionen-ueber-die-volle-breite) {% endcontent-ref %} *** ## CSS-Scroll-Animationen ThemeWare® bietet dir eine umfangreiche Auswahl an CSS-Animationen für deine Erlebniswelten. Nutze dafür die entsprechende CSS-Klasse an CMS-Blöcken oder gewünschten HTML-Elementen. | CSS-Klasse | Bereich | Funktionsbeschreibung | | --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **twt-cms-animation** | Block | Animiert einen CMS-Block und HTML-Elemente mit einer in der Theme-Konfiguration ausgewählten Animation sobald das Element in den sichtbaren Bereich gescrollt wird. | #### Beispiel

Rechts: CSS-Scroll-Animation "Fade-in"

Mehr Informationen dazu findest du in unserem Artikel: {% content-ref url="/pages/14CoyE12d69gA2B7TfCl" %} [CSS-Animationen für Erlebniswelten](/wissensdatenbank/anleitungen/erlebniswelten/erlebniswelten-mit-css-animationen-verschoenern) {% endcontent-ref %} ### Animationen (für erfahrende Anwender) Ergänzend liefert dir ThemeWare® eine Sammlung an CSS-Klassen für Animationen für erfahrende Anwender. Mehr Informationen dazu findest du in folgendem Artikel: {% content-ref url="/pages/7NkfBKXykAdaNexdatfE" %} [Zusätzliche CSS-Klassen für Animationen](/wissensdatenbank/profiwissen/zusaetzliche-css-klassen-fuer-animationen) {% endcontent-ref %} *** ## Spaltenabstände in CMS-Blöcken ThemeWare® stellt dir eine umfangreiche Auswahl an CSS-Column-Klassen zu Verfügung mit welchen du die Spaltenabstände in CMS-Blöcken modifizieren kannst. **Beispiel**

Links: Standard Spaltenabstand | Rechts: twt-cms-col-padding-10

Mehr Informationen dazu findest du in unserem Artikel: {% content-ref url="/pages/x4hBiuA5Sp43Bl5q4v4e" %} [Spaltenabstände in CMS-Blöcken anpassen](/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen) {% endcontent-ref %} *** ## Überschriften in CMS-Blöcken Mit ThemeWare® erhältst du individuelle CSS-Headline-Klassen um die aus unseren Shopware 5 Themes bekannten Überschriften auch in deinen Shopware 6 Erlebniswelten nutzen zu können. **Beispiel** ![Überschriften in CMS-Blöcken](/files/DvxYphIsdMOybfYF4T0R) Mehr Informationen dazu findest du in unserem Artikel: {% content-ref url="/pages/JeIAhtcBnYyH9x8bllIf" %} [Überschriften in CMS-Blöcken gestalten](/wissensdatenbank/anleitungen/erlebniswelten/ueberschriften-in-cms-bloecken-gestalten) {% endcontent-ref %} *** ## Demoshops ### Startseiten der Demoshops (Home) Für die Erlebniswelten der Startseiten unserer Demoshops nutzen wir teils individuelle CSS-Klassen um bestimmte Layouts zu ermöglichen. In diesem Abschnitt stellen wir dir diese Klasse vor. {% hint style="info" %} **Hinweis**: Eine "Schritt-für-Schritt PDF-Anleitung" für unsere Erlebniswelten erhältst du kostenfrei über die ThemeWare® Utilities. {% endhint %} | CSS-Klasse | Bereich | Funktionsbeschreibung | | ------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **twt-custom-cms-text-two-column-usp-list** | Block | Hebt eine Liste mit Vorteilen im rechten Block eines "Zwei Spalten Elements" mit grünen Harken hervor. | | **twt-custom-cms-imagetext-teaser-1** | Sektion | Verbesserte Darstellung und Textausrichtung für ein "Zwei Spalten Element" (Bild links und Text rechts) im Sektions-Größenmodus "Volle Bereite". Optimal zur Anzeige eines Teasers/Banners. | | **twt-custom-cms-about-photo** | Block | Verbesserte Darstellung und Textausrichtung für ein "Zwei Spalten Element" mit einem Bild links und weiteren Textinformationen rechts. Optimal zur Anzeige eines Ansprechpartners. Zusätzlich kann die Klasse "dark" verwendet werden damit der Hintergrund in einer sehr dunklen Erlebniswelt in hell angezeigt wird. | ### Overlay-Banner (Höhenluft) Dieser Overlay-Banner ist mit den Standard CMS-Elementen von Shopware möglich und braucht kein spezielles CMS-Element. {% hint style="info" %} **Hinweis**: Ein Beispiel findest du in der Kategorie "Höhenluft & Abenteuer" in unseren Demoshops: [Höhenluft & Abenteuer](https://demo.themeware.design/modern/Hoehenluft-Abenteuer/) {% endhint %} | CSS-Klasse | Bereich | Funktionsbeschreibung | | -------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **twt-custom-cms-element-overlay-primary** | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Primärfarbe (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild. | | **twt-custom-cms-element-overlay-secondary** | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Sekundärfarbe (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild. | | **twt-custom-cms-element-overlay-success** | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Erfolg" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild. | | **twt-custom-cms-element-overlay-info** | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Information" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild. | | **twt-custom-cms-element-overlay-warning** | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Hinweis" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild. | | **twt-custom-cms-element-overlay-danger** | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Fehler" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild. | | **twt-custom-cms-element-overlay-light** | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Farbe Weiß (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild. | | **twt-custom-cms-element-overlay-dark** | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Farbe Schwarz (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild. | **Beispiel** ![CSS-Klasse: twt-custom-cms-element-overlay-primary](/files/w6GTHaEDmdSNXmIcjgwB) ## Sonstige In diesem Abschnitt findest du weitere Klassen die bei der Gestaltung deiner individuellen Erlebniswelten hilfreich sein können. | CSS-Klasse | Bereich | Funktionsbeschreibung | | ------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **container** | Block, Sektion | In Erlebniswelt-Sektionen mit dem Layout "Volle Breite" ist es in manchen Fällen sinnvoll einen Inhalts-Block im "Boxed"-Layout zu platzieren. Dies kannst du mit der Klasse "container" realisieren. Ein Beispiel dafür ist der Kategorie-Banner in der Kategorie "Höhenluft & Abenteuer" unserer Demoshops. | **Beispiele** ![Beispiel mit "container"-Klasse](/files/x7dgMeBPtdGv2aQxe0vO) ![Beispiel ohne "container"-Klasse](/files/Wg52syFFTIiuW3JmCd1e) # ThemeWare® CSS-Klassen für Erlebniswelten (Übersicht) ## Animationen – CSS-Animationen für CMS-Blöcke
KlasseBereichBeschreibung
twt-cms-animationBlockAktiviert die konfigurierte CSS-Animation für den entsprechenden CMS-Block.
*** ## Boxed-Klassen – CSS-Klassen für Fullwidth-Sektionen
KlasseBereichBeschreibung
twt-cms-block-boxedBlockSetzt einen Block auf die maximale Container-Breite der Theme-Konfiguration (abzüglich 40px).
twt-cms-boxed-contentSektionSetzt eine Sektion auf die maximale Container-Breite der Theme-Konfiguration.
*** ## ThemeWare® CMS-Styling | CSS-Klasse | Bereich | Funktionsbeschreibung | | ---------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | **twt-cms-block** | Block | Der entsprechende CMS-Block erhält vordefiniertes Styling (Rahmenfarbe, Hintergrundfarbe, Außenabstand nach unten). | | **twt-cms-block-background** | Block | Der entsprechende CMS-Block erhält die Hintergrundfarbe vom vordefinierten Styling. | | **twt-cms-block-border** | Block | Der entsprechende CMS-Block erhält die Rahmenfarbe vom vordefinierten Styling. | | **twt-cms-block-margin** | Block | Der entsprechende CMS-Block erhält den Außenabstand nach unten vom vordefinierten Styling. | | **twt-cms-block-reset** | Block | Das vordefinierte Styling wird auf den entsprechenden CMS-Block nicht angewendet (Rahmenfarbe, Hintergrundfarbe, Außenabstand nach unten). | | **twt-cms-block-reset-background** | Block | Die Hintergrundfarbe vom vordefinierten Styling wird im entsprechenden CMS-Block entfernt. | | **twt-cms-block-reset-border** | Block | Die Rahmenfarbe vom vordefinierten Styling wird im entsprechenden CMS-Block entfernt. | | **twt-cms-block-reset-margin** | Block | Der Außenabstand nach unten vom vordefinierten Styling wird im entsprechenden CMS-Block entfernt. | | **twt-cms-reset-padding** | Section | Diese Klasse entfernt doppelte Paddings in Layouts mit Sidebar. | *** ## Column-Klassen – Spaltenabstände in CMS-Blöcken
CSS-KlasseBereichBeschreibung
twt-cms-col-padding-0BlockSetzt den Innenabstand für Spalten in CMS-Blöcken auf 0 Pixel.
twt-cms-col-padding-5BlockSetzt den Innenabstand für Spalten in CMS-Blöcken auf 5 Pixel.
twt-cms-col-padding-10BlockSetzt den Innenabstand für Spalten in CMS-Blöcken auf 10 Pixel.
twt-cms-col-padding-15BlockSetzt den Innenabstand für Spalten in CMS-Blöcken auf 15 Pixel.
--20 Pixel ist der Standard Spalten-Abstand.
twt-cms-col-padding-25BlockSetzt den Innenabstand für Spalten in CMS-Blöcken auf 25 Pixel.
twt-cms-col-padding-30BlockSetzt den Innenabstand für Spalten in CMS-Blöcken auf 30 Pixel.
twt-cms-col-padding-35BlockSetzt den Innenabstand für Spalten in CMS-Blöcken auf 35 Pixel.
twt-cms-col-padding-40BlockSetzt den Innenabstand für Spalten in CMS-Blöcken auf 40 Pixel.
### Mobile Darstellung
CSS-KlasseBereichBeschreibung
--0 Pixel ist der Standard Spalten-Abstand.
twt-cms-col-margin-5BlockSetzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 5 Pixel.
twt-cms-col-margin-10BlockSetzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 10 Pixel.
twt-cms-col-margin-15BlockSetzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 15 Pixel.
twt-cms-col-margin-20BlockSetzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 20 Pixel.
twt-cms-col-margin-25BlockSetzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 25 Pixel.
twt-cms-col-margin-30BlockSetzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 30 Pixel.
twt-cms-col-margin-35BlockSetzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 35 Pixel.
twt-cms-col-margin-40BlockSetzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 40 Pixel.
twt-cms-col-margin-45BlockSetzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 45 Pixel.
twt-cms-col-margin-50BlockSetzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 50 Pixel.
twt-cms-col-margin-55BlockSetzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 55 Pixel.
twt-cms-col-margin-60BlockSetzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 60 Pixel.
twt-cms-col-margin-65BlockSetzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 65 Pixel.
twt-cms-col-margin-70BlockSetzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 70 Pixel.
twt-cms-col-margin-75BlockSetzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 75 Pixel.
twt-cms-col-margin-80BlockSetzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 80 Pixel.
*** ## Gap-Klassen – Abstände in CMS-Blöcken
KlasseBereichFunktionsbeschreibung
twt-cms-grid-gap-0BlockSetzt den Abstand in CMS-Blöcken auf 0 Pixel.
twt-cms-grid-gap-5BlockSetzt den Abstand in CMS-Blöcken auf 5 Pixel.
twt-cms-grid-gap-10BlockSetzt den Abstand in CMS-Blöcken auf 10 Pixel.
twt-cms-grid-gap-15BlockSetzt den Abstand in CMS-Blöcken auf 15 Pixel.
twt-cms-grid-gap-20BlockSetzt den Abstand in CMS-Blöcken auf 20 Pixel.
twt-cms-grid-gap-25BlockSetzt den Abstand in CMS-Blöcken auf 25 Pixel.
twt-cms-grid-gap-30BlockSetzt den Abstand in CMS-Blöcken auf 30 Pixel.
twt-cms-grid-gap-35BlockSetzt den Abstand in CMS-Blöcken auf 35 Pixel.
twt-cms-grid-gap-40BlockSetzt den Abstand in CMS-Blöcken auf 40 Pixel.
twt-cms-grid-gap-45BlockSetzt den Abstand in CMS-Blöcken auf 45 Pixel.
twt-cms-grid-gap-50BlockSetzt den Abstand in CMS-Blöcken auf 50 Pixel.
*** ## Headline-Klassen – Überschriften in CMS-Text-Blöcken
CSS-KlasseBereichBeschreibung
twt-cms-headline-bathBlockStylt die Headline und den nachfolgenden Absatz in CMS-Blöcken für verschiedene Themes.
twt-cms-headline-classicBlockStylt die Headline in CMS-Blöcken wie in Shopware 5 Einkaufswelten.
twt-cms-headline-cleanBlockStylt die Headline und den nachfolgenden Absatz in CMS-Blöcken wie im Clean-Theme.
twt-cms-headline-flowerBlockStylt die Headline in CMS-Blöcken wie im Flower-Theme.
twt-cms-headline-kidsBlockStylt die Headline in CMS-Blöcken wie im Kids-Theme.
twt-cms-headline-ladieswearBlockStylt die Headline und den nachfolgenden Absatz in CMS-Blöcken wie im Ladieswear-Theme.
twt-cms-headline-plantsBlockStylt die Headline in CMS-Blöcken wie im Ladieswear-Theme.
*** ## Image-Klassen – Dekorationsklassen für Bilder
KlasseBereichFunktionsbeschreibung
twt-cms-image-borderBlockFügt Bildern in einem CMS-Block einen 12px dicken Rahmen hinzu.
twt-cms-image-border-semiBlockFügt Bildern in einem CMS-Block einen 12px dicken, halbtransparenten Rahmen hinzu.
twt-cms-image-box-shadowBlockFügt Bildern in einem CMS-Block einen Schlagschatten hinzu.
twt-cms-image-box-shadow-level-1BlockFügt Bildern in einem CMS-Block einen Schlagschatten hinzu.
twt-cms-image-box-shadow-level-2BlockFügt Bildern in einem CMS-Block einen Schlagschatten hinzu.
twt-cms-image-box-shadow-level-3BlockFügt Bildern in einem CMS-Block einen Schlagschatten hinzu.
twt-cms-image-box-shadow-level-4BlockFügt Bildern in einem CMS-Block einen Schlagschatten hinzu.
twt-cms-image-box-shadow-level-5BlockFügt Bildern in einem CMS-Block einen Schlagschatten hinzu.
twt-cms-image-box-shadow-lgBlockFügt Bildern in einem CMS-Block einen auffälligen Schlagschatten hinzu.
twt-cms-image-box-shadow-smBlockFügt Bildern in einem CMS-Block einen dezenten Schlagschatten hinzu.
twt-cms-image-roundedBlockRundet Bilder in einem CMS-Block ab.
*** ## Hover-Klassen – Hover-Effekte für Bilder
KlasseBereichFunktionsbeschreibung
twt-cms-image-hover-blurBlockDreht Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-blur-outBlockDreht Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-flashBlockLässt Bilder mit einem Link aufblitzen (Hover-Effekt).
twt-cms-image-hover-grayscaleBlockGraut Bilder mit einem Link aus (Hover-Effekt).
twt-cms-image-hover-grayscale-outBlockFärbt graue Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-opacityBlockReduziert die Deckkraft für Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-rotateBlockDreht Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-rotate-leftBlockDreht Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-rotate-rightBlockDreht Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-shineBlockEin Highlight fährt über Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-zoomBlockVergrößert Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-zoom-outBlockVerkleinert Bilder mit einem Link (Hover-Effekt).
*** ## Max-width-Klassen – Breite von CMS-Sektionen/-Blöcken
KlasseBereichBeschreibung
twt-cms-max-widthSektion, BlockSetzt die maximale Breite auf die "maximale Container-Breite" der Theme-Konfiguration.
twt-cms-max-width-500Sektion, BlockSetzt die maximale Breite auf 500px.
twt-cms-max-width-576Sektion, BlockSetzt die maximale Breite auf 576px.
twt-cms-max-width-600Sektion, BlockSetzt die maximale Breite auf 600px.
twt-cms-max-width-700Sektion, BlockSetzt die maximale Breite auf 700px.
twt-cms-max-width-768Sektion, BlockSetzt die maximale Breite auf 768px.
twt-cms-max-width-800Sektion, BlockSetzt die maximale Breite auf 800px.
twt-cms-max-width-900Sektion, BlockSetzt die maximale Breite auf 900px.
twt-cms-max-width-992Sektion, BlockSetzt die maximale Breite auf 992px.
twt-cms-max-width-1000Sektion, BlockSetzt die maximale Breite auf 1000px.
twt-cms-max-width-1100Sektion, BlockSetzt die maximale Breite auf 1100px.
twt-cms-max-width-1200Sektion, BlockSetzt die maximale Breite auf 1200px.
twt-cms-max-width-1300Sektion, BlockSetzt die maximale Breite auf 1300px.
twt-cms-max-width-1400Sektion, BlockSetzt die maximale Breite auf 1400px.
twt-cms-max-width-1500Sektion, BlockSetzt die maximale Breite auf 1500px.
twt-cms-max-width-1600Sektion, BlockSetzt die maximale Breite auf 1600px.
twt-cms-max-width-1700Sektion, BlockSetzt die maximale Breite auf 1700px.
twt-cms-max-width-1800Sektion, BlockSetzt die maximale Breite auf 1800px.
twt-cms-max-width-1920Sektion, BlockSetzt die maximale Breite auf 1920px.
*** ## Margin-/Padding-Klassen – Abstandsklassen für CMS-Sektionen/-Blöcke
KlasseBereichBeschreibung
twt-m-1Sektion, BlockAußenabstand, 10px (margin)
twt-mt-2Sektion, BlockAußenabstand oben, 20px (margin-top)
twt-me-3Sektion, BlockAußenabstand rechts, 30px (margin-right)
twt-mb-4Sektion, BlockAußenabstand unten, 40px (margin-bottom)
twt-ms-5Sektion, BlockAußenabstand links, 50px (margin-left)
twt-mx-6Sektion, BlockAußenabstand links/rechts, 60px (margin-left, margin-right)
twt-my-7Sektion, BlockAußenabstand oben/unten, 70px (margin-top, margin-bottom)
twt-my-md-8Sektion, BlockAußenabstand oben/unten, 80px ab 768px (margin-top, margin-bottom)
twt-my-n-9Sektion, BlockAußenabstand oben/unten, -90px (margin-top, margin-bottom)
twt-p-1Sektion, BlockInnenabstand, 10px (margin)
twt-pt-2Sektion, BlockInnenabstand oben, 20px (margin-top)
twt-pe-3Sektion, BlockInnenabstand rechts, 30px (margin-right)
twt-pb-4Sektion, BlockInnenabstand unten, 40px (margin-bottom)
twt-ps-5Sektion, BlockInnenabstand links, 50px (margin-left)
twt-px-6Sektion, BlockInnenabstand links/rechts, 60px (margin-left, margin-right)
twt-py-7Sektion, BlockInnenabstand oben/unten, 70px (margin-top, margin-bottom)
twt-py-md-8Sektion, BlockInnenabstand oben/unten, 80px ab 768px (margin-top, margin-bottom)
twt-py-n-9Sektion, BlockInnenabstand oben/unten, -90px (margin-top, margin-bottom)
*** ## Overlay-Klassen Die Overlay-Klassen funktionieren mit Standard CMS-Blöcken von Shopware. Nutzt du diese Klassen in einer CMS-Sektion wird der Hintergrund von einer Farbfläche überlagert. | CSS-Klasse | Bereich | Funktionsbeschreibung | | -------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **twt-custom-cms-element-overlay-primary** | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Primärfarbe (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild. | | **twt-custom-cms-element-overlay-secondary** | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Sekundärfarbe (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild. | | **twt-custom-cms-element-overlay-success** | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Erfolg" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild. | | **twt-custom-cms-element-overlay-info** | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Information" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild. | | **twt-custom-cms-element-overlay-warning** | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Hinweis" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild. | | **twt-custom-cms-element-overlay-danger** | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Fehler" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild. | | **twt-custom-cms-element-overlay-light** | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Farbe Weiß (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild. | | **twt-custom-cms-element-overlay-dark** | Sektion | Überlagert das Hintergrundbild einer Sektion mit der Farbe Schwarz (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild. | *** ## Sonstige | CSS-Klasse | Bereich | Funktionsbeschreibung | | ------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **container** | Block, Sektion | In Erlebniswelt-Sektionen mit dem Layout "Volle Breite" ist es in manchen Fällen sinnvoll einen Inhalts-Block im "Boxed"-Layout zu platzieren. Dies kannst du mit der Klasse "container" realisieren. Ein Beispiel dafür ist der Kategorie-Banner in der Kategorie "Höhenluft & Abenteuer" unserer Demoshops. | # Abstände in CMS-Blöcken anpassen In dieser Anleitung erfährst du, wie du Abstände von Elementen (= Slots) in CMS-Blöcken mit den ThemeWare® CSS-Gap-Klassen anpassen kannst. ## Gap-Klassen – Abstände in CMS-Blöcken ThemeWare® bietet dir diverse Gap-Klassen für CMS-Blöcke. In dieser Anleitung stellen wir dir diese CSS-Klassen vor. > Diese CSS-Klassen stehen dir zur Verfügung, wenn du die folgende Theme-Konfiguration aktivierst: > > * Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen" => CSS-Klassen für Spaltenabstände laden (optional) *** ## **ThemeWare® CSS-Gap-Klassen** ### ThemeWare® CMS Grid-Blöcke Elemente in CMS Grid-Blöcken haben in Shopware 6 einen fest definierten Abstand von `40px`. Mit ThemeWare® stehen dir verschiedene CSS-Klassen zur Verfügung um diese Abstände ändern zu können. Mit ThemeWare® 3.2 haben wir folgende CSS-Abstandsklassen für ThemeWare® CMS Grid-Blöcke sowie die Standard Grid-Blöcke von Shopware hinzugefügt. | CSS-Klasse | Bereich | Funktionsbeschreibung | | ----------------------- | ------- | ---------------------------------------------- | | **twt-cms-grid-gap-0** | Block | Setzt den Abstand in CMS-Blöcken auf 0 Pixel. | | **twt-cms-grid-gap-5** | Block | Setzt den Abstand in CMS-Blöcken auf 5 Pixel. | | **twt-cms-grid-gap-10** | Block | Setzt den Abstand in CMS-Blöcken auf 10 Pixel. | | **twt-cms-grid-gap-15** | Block | Setzt den Abstand in CMS-Blöcken auf 15 Pixel. | | **twt-cms-grid-gap-20** | Block | Setzt den Abstand in CMS-Blöcken auf 20 Pixel. | | **twt-cms-grid-gap-25** | Block | Setzt den Abstand in CMS-Blöcken auf 25 Pixel. | | **twt-cms-grid-gap-30** | Block | Setzt den Abstand in CMS-Blöcken auf 30 Pixel. | | **twt-cms-grid-gap-35** | Block | Setzt den Abstand in CMS-Blöcken auf 35 Pixel. | | **twt-cms-grid-gap-40** | Block | Setzt den Abstand in CMS-Blöcken auf 40 Pixel. | | **twt-cms-grid-gap-45** | Block | Setzt den Abstand in CMS-Blöcken auf 45 Pixel. | | **twt-cms-grid-gap-50** | Block | Setzt den Abstand in CMS-Blöcken auf 50 Pixel. | {% hint style="info" %} **Hinweis**: Wie du die CSS-Klassen einfügst erfährst du im Artikel [ThemeWare® CSS-Klassen für Erlebniswelten](/wissensdatenbank/anleitungen/erlebniswelten/themeware-css-klassen-fuer-erlebniswelten). {% endhint %} #### Details
*** ### ThemeWare® CMS Spalten-Blöcke Die neuen CSS-Gap-Klassen funktionieren auch in den CMS Spalten-Blöcken von ThemeWare®. #### Details
{% hint style="info" %} **Hinweis**: Möchtest du die Abstände in mobilen Viewports separate anpassen nutze die separaten CSS-Spaltenabstandsklassen: [Spaltenabstände in CMS-Blöcken anpassen](/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen) {% endhint %} # Bilder in CMS-Blöcken dekorieren In dieser Anleitung erfährst du, wie du Bilder in CMS-Blöcken mit ThemeWare® CSS-Dekorationsklassen verschönern kannst. ## Image-Klassen – Dekorationsklassen für Bilder ThemeWare® bietet dir diverse CSS-Dekorationsklassen für Bilder in CMS-Blöcken. In dieser Anleitung stellen wir dir diese CSS-Klassen vor. > Diese CSS-Klassen stehen dir zur Verfügung, wenn du die folgende Theme-Konfiguration aktivierst: > > * Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen" => CSS-Klassen für Bild-Dekorationen laden (optional)

Rechts: Dekorationsklasse "twt-cms-image-border-semi"

{% hint style="success" %} **Tipp**: Anwendungsbeispiele findest du in unseren [Demoshops](https://demo.themeware.design/modern/Features/ThemeWare-CMS-Styling/Bilder-in-CMS-Bloecken-mit-Dekorationsklassen-verschoenern/). {% endhint %} *** ## **ThemeWare® CSS-Dekorationsklassen** ### Rahmen Fügt Bildern in einem CMS-Block einen 12px dicken Rahmen hinzu. | CSS-Klasse | Bereich | Funktionsbeschreibung | | ------------------------------------------------------------ | ------- | ---------------------------------------------------------------------------------- | | **twt-cms-image-border** bzw. **twt-cms-image-border-solid** | Block | Fügt Bildern in einem CMS-Block einen 12px dicken Rahmen hinzu. | | **twt-cms-image-border-semi** | Block | Fügt Bildern in einem CMS-Block einen 12px dicken, halbtransparenten Rahmen hinzu. | {% hint style="info" %} **Hinweis**: Wie du die CSS-Klassen einfügst erfährst du in unserem Artikel [ThemeWare® CSS-Klassen für Erlebniswelten](/wissensdatenbank/anleitungen/erlebniswelten/themeware-css-klassen-fuer-erlebniswelten). {% endhint %} **Beispiel** ![](/files/DxNTamsEFs9xLgGRBETv) ### Schatten Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu. | CSS-Klasse | Bereich | Funktionsbeschreibung | | ------------------------------- | ------- | ----------------------------------------------------------------------- | | **twt-cms-image-box-shadow-sm** | Block | Fügt Bildern in einem CMS-Block einen dezenten Schlagschatten hinzu. | | **twt-cms-image-box-shadow** | Block | Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu. | | **twt-cms-image-box-shadow-lg** | Block | Fügt Bildern in einem CMS-Block einen auffälligen Schlagschatten hinzu. | **Beispiel** ![](/files/18emDtLxI2KzGqFq7aiX) ### Schatten (erweitert) Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu. | CSS-Klasse | Bereich | Funktionsbeschreibung | | ------------------------------------ | ------- | ----------------------------------------------------------- | | **twt-cms-image-box-shadow-level-1** | Block | Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu. | | **twt-cms-image-box-shadow-level-2** | Block | Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu. | | **twt-cms-image-box-shadow-level-3** | Block | Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu. | | **twt-cms-image-box-shadow-level-4** | Block | Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu. | | **twt-cms-image-box-shadow-level-5** | Block | Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu. | **Beispiel** ![](/files/ycntXBj0dPtVtp6dFJFx) ### Border-radius Rundet Bilder in einem CMS-Block ab. | CSS-Klasse | Bereich | Funktionsbeschreibung | | ------------------------- | ------- | ------------------------------------ | | **twt-cms-image-rounded** | Block | Rundet Bilder in einem CMS-Block ab. | **Beispiel** ![](/files/SPJxAwxf1fzI6DWKpIW7) {% hint style="info" %} **Hinweis**: Du kannst die ThemeWare® "CSS-Klassen für Bild-Dekorationen" bzw. "CSS-Klassen für Schlagschatten" je nach Bedarf aktivieren bzw. deaktivieren. Die Konfiguration findest du im Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen". {% endhint %} # CMS-Block individuell stylen Du kannst einen bestimmten CMS-Block individuell stylen, indem du ihm in den Block-Einstellungen eine eigene CSS-Klasse zuweist und die gewünschten Styles in deiner CSS-Datei oder der Theme-Konfiguration definierst. *** ## CSS-Klasse einem CMS-Block hinzufügen 1. Klicke auf den gewünschten CMS-Block um den CMS-Block auszuwählen (1) 2. Wechsel rechts in der Sidebar in den Tab "Block-Einstellungen" (2) 3. Öffne dort den Abschnitt "Layout" (3) 4. Trage im Konfigurationsfeld "CSS-Klassen" deine eigene CSS-Klasse ein (4) * **Tipp**: Trenne mehrere Klassen mit einem Leerzeichen. 5. Speichere die Änderungen deiner Erlebniswelt Nach dem Neuladen der Storefront sollte dein Styling nun auf den CMS-Block angewendet werden.
*** #### Weiterführende Informationen Wie du CSS-Styles hinzufügen kannst erfährst du in folgender Anleitung: {% content-ref url="/pages/dfYh3rG0xbCzXhNdDC2O" %} [Individuelle Anpassungen mittels CSS](/wissensdatenbank/anleitungen/individuelle-anpassungen/individuelle-anpassungen-mittels-css) {% endcontent-ref %} # CMS-Blöcke auf mobilen Geräten ausblenden In Shopware 6 können CMS-Blöcke sowie CMS-Sektionen in verschiedenen Viewports ausgeblendet werden. Wie dies funktioniert erfährst du in folgenden Anleitungen: * [Responsive Erlebniswelten erstellen](/wissensdatenbank/anleitungen/erlebniswelten/responsive-erlebniswelten) * [Responsive Erlebniswelten mit Bootstrap](/wissensdatenbank/anleitungen/erlebniswelten/responsive-erlebniswelten-mit-bootstrap)

Unsichtbarer CMS-Block

# CMS-Element individuell stylen Du kannst ein bestimmtes CMS-Element individuell stylen, indem du ihm in den Element-Einstellungen eine eigene CSS-Klasse zuweist und die gewünschten Styles in deiner CSS-Datei oder der Theme-Konfiguration definierst. Darüber hinaus kannst du auch die automatisch generierte [Element-ID](#element-id) nutzen – insbesondere bei CMS-Elementen, denen du keine eigene CSS-Klasse zuweisen kannst. *** ## CSS-Klasse einem ThemeWare® CMS-Element hinzufügen 1. Klicke auf den entsprechenden CMS-Block um den Bearbeitungsmodus zu aktivieren 2. Fahre mit der Maus über das gewünschte CMS-Element (1) 3. Klicke auf das ![](/files/YY1yXZuChT6uJ6oSNYXb) "Zahnrad"-Icon (2) um das CMS-Element zu konfigurieren 4. Es öffnet sich das Pop-up "Element-Einstellungen" 5. Wechsel in den Tab "Erweitert" (3) 6. Trage im Konfigurationsfeld "CSS-Klassen (Element)" deine eigene CSS-Klasse ein (4) * **Tipp**: Trenne mehrere Klassen mit einem Leerzeichen. 7. Speichere deine Änderungen
*** ## Element-ID Für jedes CMS-Element erstellt Shopware automatisch eine eindeutige Element-ID. Diese kannst du nutzen, um das Element individuell per CSS zu stylen – vor allem dann, wenn sich keine eigene CSS-Klasse zuweisen lässt. Diese Element-ID findest du im HTML-Code der Storefront. Sie wird im `data-cms-element-id`-Attribut des entsprechenden Containers hinterlegt: 
<div class="col-12" data-cms-element-id="019762d3f5ac74cd97043411f86aec36">
    <div class="cms-element-twt-modern-teaser element ...">
    ...
**Per CSS** kannst du dieses Attribut dann wie folgt selektieren: ```css [data-cms-element-id="019762d3f5ac74cd97043411f86aec36"] { /* Eigene Styles hier */ } ``` {% hint style="info" %} **Hinweis**: Bei **ThemeWare® CMS-Elementen** kannst du die automatisch generierte Element-ID auch direkt in der **Konfiguration des jeweiligen CMS-Elements** im Tab **"Erweitert"** einsehen. So musst du sie nicht erst aus dem HTML der Storefront herauslesen. {% endhint %} *** #### Weiterführende Informationen Wie du CSS-Styles hinzufügen kannst erfährst du in folgender Anleitung: {% content-ref url="/pages/dfYh3rG0xbCzXhNdDC2O" %} [Individuelle Anpassungen mittels CSS](/wissensdatenbank/anleitungen/individuelle-anpassungen/individuelle-anpassungen-mittels-css) {% endcontent-ref %} # CSS-Abstandsklassen für CMS-Sektionen/-Blöcke In dieser Anleitung erfährst du, wie du Abstände in bzw. von CMS-Sektionen und CMS-Blöcken mit ThemeWare® CSS-Abstandsklassen modifizieren kannst. ## Margin-/Padding-Klassen – Abstandsklassen für CMS-Sektionen/-Blöcke ThemeWare® bietet dir diverse CSS-Abstandsklassen für CMS-Sektionen und CMS-Blöcke. In dieser Anleitung stellen wir dir diese CSS-Klassen vor. > Diese CSS-Klassen stehen dir zur Verfügung, wenn du die folgende Theme-Konfiguration aktivierst: > > * Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen" => CSS-Abstandsklassen laden (optional) > * Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen" => Erweiterte CSS-Abstandsklassen laden (optional) *** ## ThemeWare® CSS-Abstandsklassen Neben den CSS-Abstandsklassen von Bootstrap stehen dir mit den ThemeWare® CSS-Abstandsklassen weitere (pixelbasierte) Abstandsklassen zur Verfügung um Abstände in Erlebniswelten zu definieren. Die ThemeWare® CSS-Abstandsklassen werden nach dem folgenden Muster benannt: ```css // Abstandsklassen: twt-{Eigenschaft}{Seiten}-{Größe} // für xs // Erweiterte Abstandsklassen: twt-{Eigenschaft}{Seiten}-{Breakpoint}-{Größe} // für sm, md, lg und xl ``` #### Beispiel

Links: Standard Abstand | Rechts: Abstandsklasse "twt-mb-5"

*** ## Bootstrap 4 vs. Bootstrap 5 Beim Update von Bootstrap 4 auf Bootstrap 5 (ab Shopware 6.5) wurden einige Klassen umbenannt um logische Eigenschaftennamen anstelle von Richtungsnamen zu verwenden. Ab Shopware 6.5 hast du in ThemeWare® daher die Möglichkeit zu wählen ob du die alte Bootstrap 4 oder die neue Bootstrap 5 Schreibweise nutzen möchtest: * Tab "**Weiteres**" => Bereich "**Erweiterte Einstellungen**" => Abschnitt "**Zusätzliche CSS-Klassen**" => Feld "**CSS-Abstandsklassen laden (optional)**" * [Bootstrap 4](#bootstrap-4-shopware-6.4) * [Bootstrap 5](#bootstrap-5-shopware-6.5) (default) Nutzt du die alte Schreibweise und möchtest diese nicht überall ändern, lade einfach die CSS-Abstandsklassen für Bootstrap 4. Neue ThemeWare® Installationen laden automatisch die Bootstrap 5 Abstandsklassen. Nachfolgend findest du den Aufbau für beide Varianten: *** ## Bootstrap 5 (Shopware 6.5) | Aufbau | Beschreibung | | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **twt** | ThemeWare® Prefix | | **-** | Trennzeichen | | **m** |

Eigenschaft:

  • m => Margin (Außenabstand)
  • p => Padding (Innenabstand)
| | **t** |

Seiten:

  • t => Top (oben)
  • e => End (rechts)
  • b => Bottom (unten)
  • s => Start (links)
  • x => End/Start (links und rechts)
  • y => Top/Bottom (oben und unten)
  • Keine Angabe => für alle vier Seiten
| | **-** | Trennzeichen | | **md** |

Breakpoint: (optional)

  • sm => ab 576px
  • md => ab 768px
  • lg => ab 992px
  • xl => ab 1200px
  • Keine Angabe => ab 0px
| | **-** | Trennzeichen | | **n** |

Negativer Wert (nur Margin): (optional)

  • n => Wert wird negativ verwendet (-x Pixel)
  • Keine Angabe => wird positiv verwendet
| | **2** |

Größe:

  • 0 => 0 Pixel
  • 1 => 10 Pixel
  • 2 => 20 Pixel
  • 3 => 30 Pixel
  • 4 => 40 Pixel
  • 5 => 50 Pixel
  • 6 => 60 Pixel
  • 7 => 70 Pixel
  • 8 => 80 Pixel
  • 9 => 90 Pixel
  • auto
| **Beispiele** ``` // Abstandsklassen: twt-p-3 // padding: 30px twt-px-4 // padding: 0 40px twt-ms-1 // margin-left: 10px twt-me-2 // margin-right: 20px twt-mt-n3 // margin-top: -30px // Erweiterte Abstandsklassen: twt-m-md-4 // margin: 40px (ab 768px) twt-mt-md-n2 // margin-top: -20px (ab 768px) ``` *** ## Bootstrap 4 (Shopware 6.4) | Aufbau | Beschreibung | | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **twt** | ThemeWare® Prefix | | **-** | Trennzeichen | | **m** |

Eigenschaft:

  • m => Margin (Außenabstand)
  • p => Padding (Innenabstand)
| | **t** |

Seiten:

  • t => Top (oben)
  • r => Right (rechts)
  • b => Bottom (unten)
  • l => Left (links)
  • x => Left/Right (links und rechts)
  • y => Top/Bottom (oben und unten)
  • Keine Angabe => für alle vier Seiten
| | **-** | Trennzeichen | | **md** |

Breakpoint: (optional)

  • sm => ab 576px
  • md => ab 768px
  • lg => ab 992px
  • xl => ab 1200px
  • Keine Angabe => ab 0px
| | **-** | Trennzeichen | | **n** |

Negativer Wert (nur Margin): (optional)

  • n => Wert wird negativ verwendet (-x Pixel)
  • Keine Angabe => wird positiv verwendet
| | **2** |

Größe:

  • 0 => 0 Pixel
  • 1 => 10 Pixel
  • 2 => 20 Pixel
  • 3 => 30 Pixel
  • 4 => 40 Pixel
  • 5 => 50 Pixel
  • 6 => 60 Pixel
  • 7 => 70 Pixel
  • 8 => 80 Pixel
  • 9 => 90 Pixel
  • auto
| **Beispiele** ``` // Abstandsklassen: twt-p-3 // padding: 30px twt-px-4 // padding: 0 40px twt-ml-1 // margin-left: 10px twt-mr-2 // margin-right: 20px twt-mt-n3 // margin-top: -30px // Erweiterte Abstandsklassen: twt-m-md-4 // margin: 40px (ab 768px) twt-mt-md-n2 // margin-top: -20px (ab 768px) ``` {% hint style="info" %} **Hinweis**: Du kannst die ThemeWare® "CSS-Abstandsklassen" je nach Bedarf aktivieren bzw. deaktivieren. Die Konfiguration findest du im Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen"". {% endhint %} # CSS-Animationen für Erlebniswelten In dieser Anleitung erfährst du, wie du Erlebniswelten mit ThemeWare® CSS-Scroll-Animationen verschönern kannst. ## Animationen – CSS-Animationen für CMS-Blöcke ThemeWare® stellt dir eine umfangreiche Auswahl an CSS-Animationen zum Verschönern deiner Erlebniswelten bereit. Nachfolgend erklären wir dir, wie du die "CSS-Scroll-Animationen" in nur 2 Schritten aktivieren und nutzen kannst.

Rechts: CSS-Scroll-Animation "Fade-in"

{% hint style="success" %} **Tipp**: Anwendungsbeispiele findest du auf den Startseiten in unseren [Demoshops](https://demo.themeware.design/modern). {% endhint %} *** ## ThemeWare® CSS-Scroll-Animationen ### 1. Animationen aktivieren 1. Öffne die Administration deins Shops 2. Wechsel über die Hauptnavigation in den Theme-Manager ("Inhalte" => "Themes")\ **Hinweis**: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation. 3. Öffne die Konfiguration deines Themes 4. Wechsel im Tab "Erlebniswelten" in den Bereich "Alle Typen" 5. Im Abschnitt "CSS-Scroll-Animationen" findest du Konfigurationsfelder für "CMS-Blöcke" und "Überschriften in CMS-Blöcken"\ ![](/files/QJsgl9idkEH5an2ZUO6g) 6. Wähle die gewünschte Animation für CMS-Blöcke bzw. die Überschriften in CMS-Blöcken (optional). 7. Speicher diese Änderung damit diese in die Storefront übernommen wird ### 2. Animationen anwenden 1. Wechsel über die Hauptnavigation in die Erlebniswelt-Verwaltung ("Inhalte" => "Erlebniswelten") 2. Bearbeite die gewünschte Erlebniswelt 3. Wähle den gewünschten CMS-Block aus, welchen du animieren möchtest 4. Öffne den Bereich "Layout" in den Block-Einstellungen am rechten Bildschirmrand 5. Füge die CSS-Klasse `twt-cms-animation` hinzu (mehrere Klassen werden durch Leerzeichen getrennt)\ ![](/files/a8JyrbTjbk4fHJP9Dp0Y) 6. Speicher die Erlebniswelt Der entsprechende CMS-Block sollte nun mit der gewünschten Animation animiert werden. Wiederhole "Step 2" für alle CMS-Blöcke, die du animieren möchtest. Sollte die Änderung nicht in der Storefront ankommen, prüfe bitte ob das Theme dem entsprechenden Verkaufskanal zugewiesen wurde. Leere bei Änderungen dieser Art auch unbedingt einmal den gesamten Shopware sowie den Browser-Cache. {% hint style="info" %} **Hinweis**: Nutze die CSS-Animation nicht in CMS-Seiten die in Pop-ups bzw. Modals angezeigt werden. Dort funktionieren die Animationen nicht. {% endhint %} {% hint style="info" %} **Hinweis**: Nutze die CSS-Animation nicht in CMS-Blöcken die Pop-ups bzw. Modals beinhalten. Dann funktionieren die Modals u.U. nicht. {% endhint %} # CSS-Klassen für Sektionen über die volle Breite In dieser Anleitung erfährst du, wie du die Breite von CMS-Sektionen und CMS-Blöcken mit den ThemeWare® CSS-"max-width"-Klassen und den CSS-Boxed-Klassen modifizieren kannst. ## Boxed-Klassen – CSS-Klassen für Full-width-Sektionen Da die CSS-Klasse `container` nicht in jedem Szenario die perfekte Lösung ist, gibt es seit ThemeWare® 1.1.3 neue CSS-Boxed-Klassen um CMS-Blöcke oder CMS-Sektionen in Erlebniswelten "boxed" zu gestalten.

Links: "Full width"-Sektion | Rechts: "Full width"-Sektion mit zentriertem CMS-Block (boxed)

*** ## ThemeWare® CSS-Boxed-Klassen | CSS-Klasse | Bereich | Funktionsbeschreibung | | ------------------------- | ------- | --------------------------------------------------------------------------------------------- | | **twt-cms-boxed-content** | Sektion | Setzt eine Sektion auf die maximale Container-Breite der Theme-Konfiguration. | | **twt-cms-block-boxed** | Block | Setzt einen Block auf die maximale Container-Breite der Theme-Konfiguration (abzüglich 40px). | #### Beispiele

"Full with"-Sektion mit zentrierten CMS-Blöcken

"Full with"-Sektion mit einem spezifischen, zentrierten CMS-Block

*** ## max-width-Klassen – Breite von CMS-Sektionen/-Blöcken ThemeWare® bietet dir verschiedene CSS-"max-width"-Klassen um die maximale Breite von CMS-Sektionen/-Blöcken zu definieren. > Diese CSS-Klassen stehen dir zur Verfügung, wenn du die folgende Theme-Konfiguration aktivierst: > > * Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen" => CSS "max-width"-Klassen (optional) *** ## ThemeWare® CSS-"max-width"-Klassen | CSS-Klasse | Bereich | Funktionsbeschreibung | | -------------------------- | -------------- | -------------------------------------------------------------------------------------- | | **twt-cms-max-width** | Sektion, Block | Setzt die maximale Breite auf die "maximale Container-Breite" der Theme-Konfiguration. | | **twt-cms-max-width-500** | Sektion, Block | Setzt die maximale Breite auf 500px. | | **twt-cms-max-width-576** | Sektion, Block | Setzt die maximale Breite auf 576px. | | **twt-cms-max-width-600** | Sektion, Block | Setzt die maximale Breite auf 600px. | | **twt-cms-max-width-700** | Sektion, Block | Setzt die maximale Breite auf 700px. | | **twt-cms-max-width-768** | Sektion, Block | Setzt die maximale Breite auf 768px. | | **twt-cms-max-width-800** | Sektion, Block | Setzt die maximale Breite auf 800px. | | **twt-cms-max-width-900** | Sektion, Block | Setzt die maximale Breite auf 900px. | | **twt-cms-max-width-992** | Sektion, Block | Setzt die maximale Breite auf 992px. | | **twt-cms-max-width-1000** | Sektion, Block | Setzt die maximale Breite auf 1000px. | | **twt-cms-max-width-1100** | Sektion, Block | Setzt die maximale Breite auf 1100px. | | **twt-cms-max-width-1200** | Sektion, Block | Setzt die maximale Breite auf 1200px. | | **twt-cms-max-width-1300** | Sektion, Block | Setzt die maximale Breite auf 1300px. | | **twt-cms-max-width-1400** | Sektion, Block | Setzt die maximale Breite auf 1400px. | | **twt-cms-max-width-1500** | Sektion, Block | Setzt die maximale Breite auf 1500px. | | **twt-cms-max-width-1600** | Sektion, Block | Setzt die maximale Breite auf 1600px. | | **twt-cms-max-width-1700** | Sektion, Block | Setzt die maximale Breite auf 1700px. | | **twt-cms-max-width-1800** | Sektion, Block | Setzt die maximale Breite auf 1800px. | | **twt-cms-max-width-1920** | Sektion, Block | Setzt die maximale Breite auf 1920px. | # Erlebniswelten mit Bootstrap CSS-Klassen gestalten In dieser Anleitung erfährst du, wie du Erlebniswelten mit Bootstrap CSS-Klassen gestalten kannst. Die Shopware 6 Storefront basiert auf dem Bootstrap-Framework. Aufgrund unserer HC-Architecture® ist ThemeWare® selbstverständlich ebenfalls vollständig kompatibel mit Bootstrap. Auf dieser Seite findest du die gängigsten Bootstrap-Klassen welche du auf CMS-Blöcke in deinen Erlebniswelten anwenden kannst. Ganz ohne Programmierkenntnisse! {% hint style="info" %} **Hinweis**: Shopware hat mit Version 6.6.0 `!important` Anweisungen für Bootstrap-Helfer-Klassen entfernt (siehe [NEXT-29246](https://github.com/shopware/shopware/blob/9f13da017c0ee9ba2a4d85b3c8ad1d58313b451c/changelog/release-6-6-0-0/2023-12-13-do-not-apply-important-to-bootstrap-utility-classes.md)). Dadurch überschreiben diese Klassen nicht mehr wie vorher jede vorgegebene Formatierungen. {% endhint %} #### Shopware 6.4 * In Shopware 6.4 nutzt die Storefront [Bootstrap 4](https://getbootstrap.com/docs/4.0/getting-started/introduction/). #### Shopware 6.5 * In Shopware 6.5 nutzt die Storefront [Bootstrap 5](https://getbootstrap.com/docs/5.2/getting-started/introduction/). {% hint style="success" %} **Tipp**: Anwendungsbeispiele findest du in unseren Demoshops auf den Seiten "[Bootstrap-Beispiele](https://demo.themeware.design/modern/Service/Bootstrap-Beispiele/)". {% endhint %} *** ## Textausrichtung Zum Ausrichten von Texten liefert dir Bootstrap bereits einige CSS-Klassen welche du nutzen kannst. **CSS-Klassen** | Klasse v5 | Klasse v4 | Bereich | Funktionsbeschreibung | | --------------- | ----------- | ------- | ---------------------------- | | **text-start** | text-left | Block | Text linksbündig ausrichten. | | **text-center** | text-center | Block | Text zentriert ausrichten. | | **text-end** | text-right | Block | Text rechts ausrichten. | **Beispiele** ![](/files/UFpiLWeNiOYUE3TQaU6Z) Mehr dazu findest du in der Bootstrap Dokumentation: [Text alignment](https://getbootstrap.com/docs/5.2/utilities/text/#text-alignment). *** ## Textfarbe 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. **CSS-Klassen** | Klasse | Bereich | Funktionsbeschreibung | | ------------------ | ------- | ----------------------------------------- | | **text-primary** | Block | Text in der Primärfarbe ausgeben. | | **text-secondary** | Block | Text in der Sekundärfarbe ausgeben. | | **text-success** | Block | Text in der Farbe "Erfolg" ausgeben. | | **text-danger** | Block | Text in der Farbe "Fehler" ausgeben. | | **text-warning** | Block | Text in der Farbe "Hinweis" ausgeben. | | **text-info** | Block | Text in der Farbe "Information" ausgeben. | | **text-white** | Block | Text in der Farbe "Weiß" ausgeben. | **Beispiele** ![](/files/Vjgi9BNcKWHBzHXFLaSY) Mehr dazu findest du in der Bootstrap Dokumentation: [Colors](https://getbootstrap.com/docs/5.2/utilities/colors/). *** ## Hintergrundfarbe 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). **CSS-Klassen** | Klasse | Bereich | Funktionsbeschreibung | | ---------------- | ------- | --------------------------------------------------- | | **bg-primary** | Block | Hintergrund mit der Primärfarbe darstellen. | | **bg-secondary** | Block | Hintergrund mit der Sekundärfarbe darstellen. | | **bg-success** | Block | Hintergrund mit der Farbe "Erfolg" darstellen. | | **bg-danger** | Block | Hintergrund mit der Farbe "Fehler" darstellen. | | **bg-warning** | Block | Hintergrund mit der Farbe "Hinweis" darstellen. | | **bg-info** | Block | Hintergrund mit der Farbe "Information" darstellen. | **Beispiele** ![](/files/AkEpYnrs0R9h5cphVNqy) Mehr dazu findest du in der Bootstrap Dokumentation: [Background](https://getbootstrap.com/docs/5.2/utilities/background/). *** ## Rahmen (additiv) Über Bootstrap-Klassen können auch die Rahmen von CMS-Blöcken definiert werden. Die Klasse "border-0" entfernt beispielsweise Rahmen von Elementen. {% hint style="info" %} **Hinweis**: Bitte beachte, dass das "ThemeWare® CMS-Styling" bereits einen Rahmen darstellt und additive CSS-Klassen dann keine Auswirkung haben. Additive CSS-Klassen sind für Erlebniswelten ohne "ThemeWare® CMS-Styling" relevant. {% endhint %} **CSS-Klassen** | Klasse v5 | Klasse v4 | Bereich | Funktionsbeschreibung | | ----------------- | ------------- | ------- | ------------------------- | | **border** | border | Block | Rahmen hinzufügen. | | **border-top** | border-top | Block | Rahmen oben hinzufügen. | | **border-end** | border-right | Block | Rahmen rechts hinzufügen. | | **border-bottom** | border-bottom | Block | Rahmen unten hinzufügen. | | **border-start** | border-left | Block | Rahmen links hinzufügen. | Mehr dazu findest du in der Bootstrap Dokumentation: [Borders](https://getbootstrap.com/docs/5.2/utilities/borders/). *** ## Rahmen (subtraktiv) **CSS-Klassen** | Klasse v5 | Klasse v4 | Bereich | Funktionsbeschreibung | | ------------------- | --------------- | ------- | ------------------------ | | **border-0** | border-0 | Block | Rahmen entfernen. | | **border-top-0** | border-top-0 | Block | Rahmen oben entfernen. | | **border-end-0** | border-right-0 | Block | Rahmen rechts entfernen. | | **border-bottom-0** | border-bottom-0 | Block | Rahmen unten entfernen. | | **border-start-0** | border-left-0 | Block | Rahmen links entfernen. | **Beispiele** ![](/files/nWk9lT5zUyKD1p2nqCK2) Mehr dazu findest du in der Bootstrap Dokumentation: [Borders > Subtractive](https://getbootstrap.com/docs/5.2/utilities/borders/#subtractive). *** ## Rahmenfarbe Ändere die Rahmenfarbe von CMS-Blöcken mithilfe von folgenden CSS-Klassen. **CSS-Klassen** | Klasse | Bereich | Funktionsbeschreibung | | -------------------- | ------- | ---------------------------------------------- | | **border-primary** | Block | Rahmen mit der Primärfarbe darstellen. | | **border-secondary** | Block | Rahmen mit der Sekundärfarbe darstellen. | | **border-success** | Block | Rahmen mit der Farbe "Erfolg" darstellen. | | **border-danger** | Block | Rahmen mit der Farbe "Fehler" darstellen. | | **border-warning** | Block | Rahmen mit der Farbe "Hinweis" darstellen. | | **border-info** | Block | Rahmen mit der Farbe "Information" darstellen. | | **border-light** | Block | Rahmen mit der Farbe "Hell" darstellen. | | **border-dark** | Block | Rahmen mit der Farbe "Dunkel" darstellen. | | **border-white** | Block | Rahmen mit der Farbe "Weiß" darstellen. | **Beispiele** ![](/files/5YXuaHtSdckUJyVcgJbl) Mehr dazu findest du in der Bootstrap Dokumentation: [Borders > Color](https://getbootstrap.com/docs/5.2/utilities/borders/#color). *** ## Border-radius Füge einem CMS-Block die nachfolgenden CSS-Klassen hinzu, um dessen Ecken einfach abzurunden. **CSS-Klassen**
Klasse v5Klasse v4BereichFunktionsbeschreibung
roundedroundedBlockElement abrunden.
rounded-toprounded-topBlockElement oben abrunden.
rounded-endrounded-rightBlockElement recht abrunden.
rounded-bottomrounded-bottomBlockElement unten abrunden.
rounded-startrounded-leftBlockElement links abrunden.
rounded-0rounded-0BlockElement nicht abrunden.
**Beispiel** ![](/files/3ZX1Pjf9KLj39eeIzJOE) Mehr dazu findest du in der Bootstrap Dokumentation: [Borders > Radius](https://getbootstrap.com/docs/5.2/utilities/borders/#radius). *** ## Schatten Hinzufügen oder entfernen von Schatten zu CMS-Blöcken. **CSS-Klassen** | Klasse | Bereich | Funktionsbeschreibung | | ------------- | ------- | ------------------------ | | **shadow-sm** | Block | Kleiner Schlagschatten. | | **shadow** | Block | Normaler Schlagschatten. | | **shadow-lg** | Block | Großer Schlagschatten. | **Beispiele** ![](/files/qdMqflAb4AZkqHUTvIpQ) Mehr dazu findest du in der Bootstrap Dokumentation: [Shadows](https://getbootstrap.com/docs/5.2/utilities/shadows/). *** ## Besonderheit: CMS-Blöcke mit ThemeWare® CMS-Styling Shopware hat mit Version 6.6.0 `!important` Anweisungen für Bootstrap-Helfer-Klassen entfernt (siehe [NEXT-29246](https://github.com/shopware/shopware/blob/9f13da017c0ee9ba2a4d85b3c8ad1d58313b451c/changelog/release-6-6-0-0/2023-12-13-do-not-apply-important-to-bootstrap-utility-classes.md)). Dadurch werden nun einige in Bootstrap verfügbare CSS-Klassen aufgrund der entsprechenden CSS-Hierarchie vom CMS-Styling überschrieben. Möchtest du **Bootstrap CSS-Klassen** auf **CMS-Blöcke** anwenden, beachte bitte, dass das ThemeWare® CMS-Styling den Rahmen (border, border-radius), die Hintergrundfarbe (background-color) und den Außenabstand nach unten (margin-bottom) überschreibt. Entferne daher das CMS-Styling für den entsprechenden CMS-Block mit der CSS-Klasse `twt-cms-block-reset`, damit die Bootstrap-Klassen wirken. *** ## Weiterführende Informationen {% embed url="" %} Bootstrap 5 Dokumentation {% endembed %} {% embed url="" %} Bootstrap 4 Dokumentation {% endembed %} # Erlebniswelten mit Bootstrap HTML-Code gestalten In dieser Anleitung erfährst du, wie du Erlebniswelten mit Bootstrap HTML-Code gestalten kannst. Die Shopware 6 Storefront basiert auf dem Bootstrap-Framework. Aufgrund unserer HC-Architecture® ist ThemeWare® selbstverständlich ebenfalls vollständig kompatibel mit Bootstrap. Auf dieser Seite findest du die gängigsten Bootstrap-Elemente welche du in deinen Erlebniswelten nutzen kannst. #### Shopware 6.4 In Shopware 6.4 nutzt die Storefront [Bootstrap 4](https://getbootstrap.com/docs/4.0/getting-started/introduction/). #### Shopware 6.5 In Shopware 6.5 nutzt die Storefront [Bootstrap 5](https://getbootstrap.com/docs/5.2/getting-started/introduction/). {% hint style="info" %} **Tipp**: Anwendungsbeispiele findest du in unseren Demoshops auf den Seiten "[Bootstrap-Beispiele](https://demo.themeware.design/modern/Service/Bootstrap-Beispiele/)". {% endhint %} Bitte beachte, dass der **HTML-Editor von Shopware 6** (z.B. in CMS-Elementen) individuellen HTML-Code – aus Sicherheitsgründen – nicht alle HTML-Tags erlaubt und den Code automatisch bereinigt. Das bedeutet nicht, dass Shopware bzw. ThemeWare® nicht kompatibel mit Bootstrap ist. Alles was du auf dieser Seite findest kann mit dem HTML-Editor von Shopware umgesetzt werden. Dafür wurde der eigentlich Bootstrap-Code ggf. leicht modifiziert. In Template-Dateien kannst du Bootstrap entsprechend der Bootstrap-Dokumentation nutzen. Hier gibt es lediglich die Einschränkung das Shopware ggf. nicht alle Bootstrap-Elemente bereitstellt. Im Bereich Erlebniswelten gibt es spezielle CMS-Elemente im Shopware Store, welche **alternative HTML-Editoren** bereitstellen und dir damit mehr Freiheiten bieten als der HTML-Editor von Shopware 6. *** Folgt bald... # Hover-Effekte für Bilder in CMS-Blöcken In dieser Anleitung erfährst du, wie du Bilder in CMS-Blöcken mit ThemeWare® CSS-Hover-Klassen verschönern kannst. ## Hover-Klassen – Hover-Effekte für Bilder Mit ThemeWare® erhältst du eine große Auswahl an CSS-Hover-Klassen für Bilder in CMS-Blöcken. Diese CSS-Klassen ermöglichen dir, verschiedene Hover-Effekte für Bilder in CMS-Blöcken zu nutzen. > Diese CSS-Klassen stehen dir zur Verfügung, wenn du die folgende Theme-Konfiguration aktivierst: > > * Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen" => CSS-Klassen für Bild-Hover-Effekte laden (optional) {% hint style="success" %} **Tipp**: Anwendungsbeispiele findest du in unseren [Demoshops](https://demo.themeware.design/modern/Features/ThemeWare-CMS-Styling/Bilder-in-CMS-Bloecken-mit-Hover-Effekten-verschoenern/). {% endhint %} *** ## **ThemeWare® CSS-Hover-Klassen** {% hint style="danger" %} **Achtung**: Die alten CSS-Klassen `twt-custom-cms-image-hover-1`, `twt-custom-cms-image-hover-2` sowie `twt-cms-image-hover-gray-scale` werden in ThemeWare 4.0 entfernt. {% endhint %} | CSS-Klasse | Bereich | Funktionsbeschreibung | | ------------------------------------------------------------------------------------------------------------------------ | ------- | ----------------------------------------------------------------- | | **twt-cms-image-hover-opacity** | Block | Reduziert die Deckkraft für Bilder mit einem Link (Hover-Effekt). | |

twt-cms-image-hover-zoom-in

bzw.

twt-cms-image-hover-zoom

| Block | Vergrößert Bilder mit einem Link (Hover-Effekt). | | **twt-cms-image-hover-zoom-out** | Block | Verkleinert Bilder mit einem Link (Hover-Effekt). | | **twt-cms-image-hover-grayscale-out** | Block | Färbt graue Bilder mit einem Link (Hover-Effekt). | |

twt-cms-image-hover-grayscale-in

bzw.

twt-cms-image-hover-grayscale

| Block | Graut Bilder mit einem Link aus (Hover-Effekt). | | **twt-cms-image-hover-shine** | Block | Ein Highlight fährt über Bilder mit einem Link (Hover-Effekt). | | **twt-cms-image-hover-flash** | Block | Lässt Bilder mit einem Link aufblitzen (Hover-Effekt). | | **twt-cms-image-hover-rotate-left** | Block | Dreht Bilder mit einem Link (Hover-Effekt). | | **twt-cms-image-hover-rotate-right** | Block | Dreht Bilder mit einem Link (Hover-Effekt). | |

twt-cms-image-hover-rotate-out

bzw.

twt-cms-image-hover-rotate

| Block | Dreht Bilder mit einem Link (Hover-Effekt). | |

twt-cms-image-hover-blur-in

bzw.

twt-cms-image-hover-blur

| Block | Dreht Bilder mit einem Link (Hover-Effekt). | | **twt-cms-image-hover-blur-out** | Block | Dreht Bilder mit einem Link (Hover-Effekt). | {% hint style="info" %} **Hinweis**: Wie du die CSS-Klassen einfügst erfährst du in unserem Artikel [ThemeWare® CSS-Klassen für Erlebniswelten](/wissensdatenbank/anleitungen/erlebniswelten/themeware-css-klassen-fuer-erlebniswelten). {% endhint %} **Beispiel**

Rechts: Hover-Effekt "twt-cms-image-hover-grayscale"

{% hint style="info" %} **Hinweis**: Du kannst die ThemeWare® "CSS-Klassen für Bild-Hover-Effekte" je nach Bedarf aktivieren bzw. deaktivieren. Die Konfiguration findest du im Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen". {% endhint %} # Kategorie-Erlebniswelten der Demoshops nachbauen In dieser Anleitung erfährst du, wie du die Kategorie-Erlebniswelten der ThemeWare® Demoshops nachbauen kannst. Diese Anleitung ist in 4 Abschnitte unterteilt, diese entsprechen den Kategorien in unseren Demoshops: [Höhenluft & Abenteuer](#hoehenluft), [Kochlust & Provence](#kochlust) und [Handwerk & Tradition](#handwerk). ## Höhenluft & Abenteuer ### Element "Banner mit Text" ![Standard Text-Element als Overlay-Banner](/files/mpmDOvPGY9HXhvYT8omY) #### Schritt 1: Erlebniswelt bearbeiten * Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten". * Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese. * Füge oberhalb der bestehenden Sektion eine neue Sektion "**Volle Breite**" ein. #### Schritt 1.1: Einstellungen der Sektion Konfiguriere nun die neue Sektion für das Banner-Element. * **Sektionsname**: Teaser * **CSS-Klassen**: `twt-custom-cms-element-overlay-primary twt-mt-n2` * **Größenmodus**: Volle Breite * **Hintergrundbild**: Hinterlege dein gewünschtes Motiv mit einer Breite von mind. 1920px * **Bildmodus**: Füllen > **Tipp**: Je nach Theme kannst du die CSS-Klasse "twt-custom-cms-element-overlay-primary" druch "twt-custom-cms-element-overlay-secondary" in der Sektion ersetzen. {% hint style="info" %} **Hinweis**: Die Textfarbe wird mit der SCSS-Funktion [color-contrast](https://getbootstrap.com/docs/5.2/helpers/color-background/) automatisch anhand der Hintergrundfarbe generiert. Ist das Ergebnis nicht ideal, ändere die Textfarbe einfach manuell. {% endhint %} {% hint style="info" %} **Hinweis**: Weitere ThemeWare® CSS-Klassen findest du im Artikel [ThemeWare® CSS-Klassen für Erlebniswelten](/wissensdatenbank/anleitungen/erlebniswelten/themeware-css-klassen-fuer-erlebniswelten). {% endhint %} #### Schritt 1.2: Block anlegen * Wähle als Block-Kategorie "**Text**" und füge dann den Block mit dem Namen "**Text**" per Drag & Drop zur neuen Sektion hinzu. * Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen: * **Block-Name**: Kategorie-Text * **CSS-Klassen**: `container h1` * **Oberer Abstand**: 50px * **Unterer Abstand**: 0px * **Linker Abstand**: 0px * **Rechter Abstand**: 0px #### Schritt 1.3: Element(e) des Blocks konfigurieren Konfiguriere nun das Element in diesem Block. * Klicke auf den link "**Datenzuordnung**" oben rechts über dem Bildupload-Feld * Wähle im Dropdown die Option "**category.name**" aus #### Schritt 1.4: Block anlegen * Wähle als Block-Kategorie "**Text**" und füge dann den Block mit dem Namen "**Text**" per Drag & Drop zur neuen Sektion hinzu. * Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen: * **Block-Name**: Kategorie-Beschreibung * **CSS-Klassen**: `container h4` * **Oberer Abstand**: 0px * **Unterer Abstand**: 100px * **Linker Abstand**: 0px * **Rechter Abstand**: 0px #### Schritt 1.5: Element(e) des Blocks konfigurieren Konfiguriere nun das Element in diesem Block. * Klicke auf den link "**Datenzuordnung**" oben rechts über dem Bildupload-Feld * Wähle im Dropdown die Option "**category.description**" aus #### Schritt 1.6: Einstellungen der Sektion Um das Listing jetzt etwas über den Banner zu verschieben konfiguriere nun die Sektion mit dem Listing-Element. * **CSS-Klassen**: `twt-mt-n9 position-relative` Speicher zum Abschluss deine Änderungen der Erlebniswelt und weise diese ggf. der/den gewünschten Kategorie(n) zu. ### Element "Highlights-Slider" ![Highlights-Slider](/files/GIxcbOkAbni5vDDSRg0F) #### Schritt 1: Erlebniswelt bearbeiten * Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten". * Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese. * Füge oberhalb der bestehenden Sektion eine neue Sektion "**Volle Breite**" ein. #### Schritt 1.1: Einstellungen der Sektion Konfiguriere nun die neue Sektion für das Banner-Element. * **Sektionsname**: Highlights-Slider * **CSS-Klassen**: `twt-mt-n7 twt-pt-9 bg-primary` * **Größenmodus**: Zentrierter Inhalt > **Tipp**: Je nach Theme kannst du die CSS-Klasse "bg-primary" druch "bg-secondary" in der Sektion ersetzen. #### Schritt 1.2: Block anlegen * Wähle als Block-Kategorie "**Text**" und füge dann den Block mit dem Namen "**Text**" per Drag & Drop zur neuen Sektion hinzu. * Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen: * **Block-Name**: Überschrift * **Hintergrundfarbe**: transparent oder rgba(0, 0, 0, 0) * **CSS-Klassen**: `container twt-cms-block-reset` * **Oberer Abstand**: 20px * **Unterer Abstand**: 20px * **Linker Abstand**: 0px * **Rechter Abstand**: 0px #### Schritt 1.3: Element(e) des Blocks konfigurieren Konfiguriere nun das Element in diesem Block. * Füge über den Text-Editor deine gewünschte Überschrift (z.B. "Aktuelle Highlights") hinzu. * Wähle eine zentrierte Textausrichtung #### Schritt 1.4: Block anlegen * Wähle als Block-Kategorie "**Commerce**" und füge dann den Block mit dem Namen "**Produkt-Slider**" per Drag & Drop zur neuen Sektion hinzu. * Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen: * **Block-Name**: Produkt-Slider * **Hintergrundfarbe**: transparent oder rgba(0, 0, 0, 0) * **CSS-Klasse**: `twt-cms-block-reset` * **Oberer Abstand**: 10px * **Unterer Abstand**: 50px * **Linker Abstand**: 0px * **Rechter Abstand**: 0px #### Schritt 1.5: Element(e) des Blocks konfigurieren Konfiguriere nun das Element in diesem Block. * **Produkt-Zuweisung**: Manuell * **Produkte**: Selektiere hier die gewünschten Produkte ### Element "SEO-Text" ![CMS-Element mit individuellem SEO-Text](/files/Mho8xL02V7a78orUrUwL) #### Schritt 1: Erlebniswelt bearbeiten * Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten". * Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese. * Füge oberhalb der bestehenden Sektion eine neue Sektion "**Volle Breite**" ein. #### Schritt 1.1: Einstellungen der Sektion Konfiguriere nun die neue Sektion für das Banner-Element. * **Sektionsname**: SEO-Text * **Größenmodus**: Zentrierter Inhalt * **Hintergrundfarbe**: #fff #### Schritt 1.2: Block anlegen * Wähle als Block-Kategorie "**Text**" und füge dann den Block mit dem Namen "**Text**" per Drag & Drop zur neuen Sektion hinzu. * Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen: * **Block-Name**: SEO-Text * **Hintergrundfarbe**: #fff * **CSS-Klasse**: `twt-cms-block-reset` * **Oberer Abstand**: 50px * **Unterer Abstand**: 50px * **Linker Abstand**: 0px * **Rechter Abstand**: 0px #### Schritt 1.3: Element(e) des Blocks konfigurieren Konfiguriere nun das Element in diesem Block. * Füge über den Text-Editor deinen gewünschten SEO-Text für die entsprechende Kategorie hinzu. Speicher zum Abschluss deine Änderungen der Erlebniswelt und weise diese ggf. der/den gewünschten Kategorie(n) zu. ## Kochlust & Provence ![Headline über Sidebar-Navigation](/files/VDisBXlwIrtOFmfKSbzj) ### Element "Headline über Sidebar-Navigation" #### Schritt 1: Erlebniswelt bearbeiten * Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten". * Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese. #### Schritt 1.1: Block anlegen * Wähle als Block-Kategorie "**Text**" und füge dann den Block mit dem Namen "**Text**" per Drag & Drop zur bestehenden Sektion hinzu. * Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen: * Allgemein * **Block-Name**: Headline * Layout (Bereich unten aufklappen) * **CSS-Klassen**: `twt-cms-element-sidebar-headline twt-mt-2 twt-mb-n2` * **Oberer Abstand**: 0px * **Unterer Abstand**: 0px * **Linker Abstand**: 0px * **Rechter Abstand**: 0px #### Schritt 1.2: Element(e) des Blocks konfigurieren Konfiguriere nun jedes einzelne Element in diesem Block. * Füge über den Text-Editor den Text Navigation hinzu. Speicher zum Abschluss deine Änderungen der Erlebniswelt und weise diese ggf. der/den gewünschten Kategorie(n) zu. Nun werden automatisch das einer Kategorie zugewiesene Anzeigebild und die entsprechende Beschreibung in das CMS-Element geladen. ### Element "SEO-Text" ![CMS-Element mit individuellem SEO-Text](/files/PS21KB1mKX3gweJqdlfx) #### Schritt 1: Erlebniswelt bearbeiten * Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten". * Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese. #### Schritt 1.1: Block anlegen * Wähle als Block-Kategorie "**Text**" und füge dann den Block mit dem Namen "**Text**" per Drag & Drop zur bestehenden Sektion hinzu. * Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen: * Allgemein * **Block-Name**: SEO-Text * **Hintergrundfarbe**: #fff * Layout (Bereich unten aufklappen) * **CSS-Klassen**: `container` * **Oberer Abstand**: 30px * **Unterer Abstand**: 30px * **Linker Abstand**: 0px * **Rechter Abstand**: 0px #### Schritt 1.2: Element(e) des Blocks konfigurieren Konfiguriere nun das Element in diesem Block. * Füge über den Text-Editor deinen gewünschten SEO-Text für die entsprechende Kategorie hinzu. Speicher zum Abschluss deine Änderungen der Erlebniswelt und weise diese ggf. der/den gewünschten Kategorie(n) zu. ## Handwerk & Tradition ![CMS-Element mit Kategorie Text und Bild](/files/waoz8dfwDbQemYQC4h0S) ### Element "Kategorie Text/Bild" #### Schritt 1: Erlebniswelt bearbeiten * Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten". * Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese. #### Schritt 1.1: Block anlegen * Wähle als Block-Kategorie "**Text & Bild**" und füge dann den Block mit dem Namen "**Zwei Spalten, zentriertes Bild & Text**" per Drag & Drop zur bestehenden Sektion hinzu. * Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen: * Allgemein * **Block-Name**: Kategorie-Text * Layout (Bereich unten aufklappen) * **Oberer Abstand**: 20px * **Unterer Abstand**: 20px * **Linker Abstand**: 0px * **Rechter Abstand**: 0px #### Schritt 1.2: Element(e) des Blocks konfigurieren Konfiguriere nun jedes einzelne Element in diesem Block. * Element links, Bild * Klicke auf den link "**Datenzuordnung**" oben rechts über dem Bildupload-Feld * Wähle im Dropdown die Option "**category.media**" aus * **Anzeigemodus**: Füllen * **Minimale Höhe**: 190px * Element rechts, Text * Klicke auf den link "**Datenzuordnung**" oben rechts über dem Bildupload-Feld * Wähle im Dropdown die Option "**category.description**" aus Speicher zum Abschluss deine Änderungen der Erlebniswelt und weise diese ggf. der/den gewünschten Kategorie(n) zu. Nun werden automatisch das einer Kategorie zugewiesene Anzeigebild und die entsprechende Beschreibung in das CMS-Element geladen. ### Element "SEO-Text" ![CMS-Element mit individuellem SEO-Text](/files/PS21KB1mKX3gweJqdlfx) #### Schritt 1: Erlebniswelt bearbeiten * Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten". * Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese. * Füge oberhalb der bestehenden Sektion eine neue Sektion "**Volle Breite**" ein. #### Schritt 1.1: Einstellungen der Sektion Konfiguriere nun die neue Sektion für das Banner-Element. * **Sektionsname**: SEO-Text * **Größenmodus**: Zentrierter Inhalt #### Schritt 1.2: Block anlegen * Wähle als Block-Kategorie "**Text**" und füge dann den Block mit dem Namen "**Text**" per Drag & Drop zur neuen Sektion hinzu. * Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen: * **Block-Name**: SEO-Text #### Schritt 1.3: Element(e) des Blocks konfigurieren Konfiguriere nun das Element in diesem Block. * Füge über den Text-Editor deinen gewünschten SEO-Text für die entsprechende Kategorie hinzu. Speicher zum Abschluss deine Änderungen der Erlebniswelt und weise diese ggf. der/den gewünschten Kategorie(n) zu. \[Tags: Nachbau] # Markiere CMS-Blöcke als Favoriten um sie schneller zu finden Ab **Shopware 6.4.19.0** kannst du **CMS-Blöcke als Favoriten markieren**. Klicke dazu einfach auf das Herzsymbol ![](/files/5qgNmiqrljxa6833QEDm). Filtere im Dropdown-Menü nach Favoriten, um direkt die Blöcke zu finden, die du oft benutzt.

CMS-Blöcke als Favoriten markieren

Bevorzugte CMS-Blöcke

# Markiere CMS-Elemente als Favoriten um sie schneller zu finden Ab **Shopware 6.4.19.0** kannst du **CMS-Elemente als Favoriten markieren**. Klicke dazu einfach auf das Herzsymbol ![](/files/5qgNmiqrljxa6833QEDm). Deine Favoriten findest du nun immer oben im "Element austauschen"-Overlay.

CMS-Elemente als Favoriten markieren

Bevorzugte CMS-Elemente

# Responsive Erlebniswelten erstellen Ab Shopware 6.4.19.0 kannst du die Sichtbarkeit von Sektionen und Blöcken ganz einfach im Erlebniswelt-Editor einstellen. ## 1. Erlebniswelt bearbeiten 1. Wechsel über die Hauptnavigation in die **Erlebniswelt-Verwaltung** ("Inhalte" => "Erlebniswelten") 2. Klicke auf die gewünschte Erlebniswelt um diese zu bearbeiten 3. Die Erlebniswelt öffnet sich nun im **Erlebniswelt-Editor** ## 2. Sektion bearbeiten 1. Klicke auf den Button ![](/files/86PlGfdcILQB7yG01dpj) oben links in der CMS-Sektion die du bearbeiten möchtest (1) 2. Die **Sektion-Einstellungen** öffnen sich rechts im Fenster (2) 3. Öffne den Abschnitt "**Sichtbarkeit**" (3)

Sektion-Einstellungen

## 2. Block bearbeiten 1. Klicke auf CMS-Block den du bearbeiten möchtest (1) 2. Die **Block-Einstellungen** öffnen sich rechts im Fenster (2) 3. Öffne den Abschnitt "**Sichtbarkeit**" (3)

Block-Einstellungen

## 3. Sichtbarkeit Im Abschnitt "Sichtbarkeit" (3) kannst du die Sektion bzw. den Block nun für drei Viewports konfigurieren (4).
Mobil0 px bis 767 px/files/PrufPe2jPQRbB2ru5RW5
Tablet768 px bis 991 px/files/ipNLzBY2BulPD0KVQeSI
Desktopab 992 px/files/kzoNUqldqBOsUYJrB57m
Im Editor werden unsichtbare CMS-Sektionen bzw. CMS-Blöcke "eingeklappt". * Mit einem Klick auf den Link "**Sektion einklappen**" bzw. "**Sektion ausklappen**" (5) kannst du eine unsichtbare CMS-Sektion ein-/ausklappen um sie zu bearbeiten. * Mit einem Klick auf den Link "**Block einklappen**" bzw. "**Block ausklappen**" (5) kannst du einen unsichtbaren CMS-Block ein-/ausklappen um ihn zu bearbeiten.

Unsichtbare CMS-Sektion

Unsichtbarer CMS-Block

{% hint style="info" %} **Hinweis**: Beachte das Shopware hierbei lediglich eine CSS-Klasse an der Sektion bzw. dem Block ergänzt. Das Element ist also lediglich unsichtbar, der HTML-Code ist nach wie vor in der Storefront vorhanden. {% endhint %} {% hint style="success" %} **Tipp**: Bis Shopware mehr Viewports erlaubt, bieten dir die Bootstrap CSS-Klassen von ThemeWare® weitere Konfigurationsmöglichkeiten für die Sichtbarkeit von CMS-Sektionen und CMS-Blöcken: siehe [Responsive Erlebniswelten mit Bootstrap](/wissensdatenbank/anleitungen/erlebniswelten/responsive-erlebniswelten-mit-bootstrap) {% endhint %} # Responsive Erlebniswelten mit Bootstrap In dieser Anleitung erfährst du, wie du responsive Erlebniswelten mit Bootstrap CSS-Klassen erstellen kannst. {% hint style="warning" %} **Achtung**: Shopware ab Version 6.5 nutzt Bootstrap 5. Dieser Artikel ist dann veraltet und wird bald überarbeitet. {% endhint %} Die Shopware 6 Storefront basiert auf dem Bootstrap-Framework. Aufgrund unserer **HC-Architecture®** ist ThemeWare® ebenfalls vollständig kompatibel mit Bootstrap. Nachfolgend stellen wir dir die entsprechenden CSS-Klassen vor und zeigen dir ein paar Anwendungsbeispiele. ## Elemente für Viewports ein-/ausblenden Um Erlebniswelt-Blöcke in bestimmten Viewports ein- oder auszublenden, können die nachfolgenden Bootstrap Display-CSS-Klassen genutzt werden. Damit lassen sich beispielsweise Bild-Elemente für verschiedene Viewports optimieren. {% hint style="success" %} **Tipp**: Ab Shopware 6.4.19.0 kannst du die Sichtbarkeit von Sektionen und Blöcken ganz einfach im Erlebniswelt-Editor einstellen: siehe [Responsive Erlebniswelten erstellen](/wissensdatenbank/anleitungen/erlebniswelten/responsive-erlebniswelten) {% endhint %} Übersicht der Bootstrap Display-CSS-Klassen: ``` Element immer ausblenden: d-none Element anzeigen bis 576px: d-block d-sm-none Element anzeigen bis 768px: d-block d-md-none Element anzeigen bis 992px: d-block d-lg-none Element anzeigen bis 1200px: d-block d-xl-none Element anzeigen ab 576px: d-none d-sm-block Element anzeigen ab 768px: d-none d-md-block Element anzeigen ab 992px: d-none d-lg-block Element anzeigen ab 1200px: d-none d-xl-block Element anzeigen von 0px bis 576px: d-block d-sm-none Element anzeigen von 578px bis 768px: d-none d-sm-block d-md-none Element anzeigen von 769px bis 992px: d-none d-md-block d-lg-none Element anzeigen von 993px bis 1200px: d-none d-lg-block d-xl-none ``` Diese CSS-Klassen kannst du im Erlebniswelt-Editor über das Feld "**CSS-Klassen**" in den Block-Einstellungen bzw. Sektion-Einstellungen hinzufügen. {% hint style="info" %} **Hinweis**: Diese CSS-Klassen machen Sektionen und Blöcke lediglich unsichtbar, der entsprechende HTML-Code ist nach wie vor in der Storefront vorhanden. {% endhint %} ### Beispiel: Bild-Element in der Sidebar auf Smartphones ausblenden In diesem Abschnitt integrieren wir ein Bildelement in die Sidebar, welches auf einen Rabatt aufmerksam macht. Im Smartphone-Viewport würde das Motiv zu viel Platz einnehmen, darum blenden wir es für diesen Viewport aus. {% hint style="success" %} **Tipp**: Ein Anwendungsbeispiel für ein "10% Rabatt"-Element in der Sidebar findest du in unserem [Demoshop](https://demo.themeware.design/modern/Hoehenluft-Abenteuer/). {% endhint %} #### Schritt 1: Erlebniswelt bearbeiten * Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten". * Wähle die Landingpage der entsprechenden Kategorie mit Sidebar aus oder erstelle Sie und bearbeite die Erlebniswelt. #### Schritt 1.1: Block anlegen * Wähle als Block-Kategorie "**Bilder**" und füge dann den Block mit dem Namen "**Bild, zentriert**" per Drag & Drop zur Sidebar hinzu. * Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen: * **Block-Name**: Banner * **CSS-Klassen**: `d-none d-lg-block` #### Schritt 1.3: Element(e) des Blocks konfigurieren Konfiguriere nun das Element in diesem Block. * **Bild**: Wähle dein gewünschtes Motiv mit einer Breite von ca. 400px aus. * **Anzeigemodus**: Strecken > **Tipp**: Mit den CSS-Klassen `d-none d-lg-block` kannst du auch die Sidebar-Navigation für mobile Viewports ausblenden. ### Beispiel: Banner für verschiedene Viewports erstellen In diesem Abschnitt erstellen wir zwei Varianten eines Banners mit jeweils verschiedenen Bildgrößen für zwei unterschiedliche Viewports. #### Schritt 1: Erlebniswelt bearbeiten * Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten". * Wähle die Landingpage der entsprechenden Kategorie mit Sidebar aus oder erstelle Sie und bearbeite die Erlebniswelt. #### Schritt 1.1: Block anlegen * Wähle als Block-Kategorie "**Bilder**" und füge dann den Block mit dem Namen "**Bild, zentriert**" per Drag & Drop der Erlebniswelt hinzu. * Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen: * **Block-Name**: Banner * **CSS-Klassen**: `d-none d-sm-block` #### Schritt 1.2: Element(e) des Blocks konfigurieren Konfiguriere nun das Element in diesem Block. * **Bild**: Wähle dein gewünschtes Motiv mit einer Breite ca. 1920px aus. * **Anzeigemodus**: Standard #### Schritt 1.3: Block anlegen * Wähle als Block-Kategorie "**Bilder**" und füge dann den Block mit dem Namen "**Bild, zentriert**" per Drag & Drop der Erlebniswelt hinzu. * Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen: * **Block-Name**: Banner Mobil * **CSS-Klassen**: `d-block d-sm-none` #### Schritt 1.4: Element(e) des Blocks konfigurieren Konfiguriere nun das Element in diesem Block. * **Bild**: Wähle dein gewünschtes Motiv mit einer Breite von ca. 580px aus. * **Anzeigemodus**: Strecken > **Tipp**: Du kannst auch ein drittes Bild-Element für den Tablet-Viewport ergänzen. {% hint style="warning" %} **Wichtig**: Bitte beachte, dass Bilder erheblich den Page-Speed beeinflussen können und komprimiere diese so gut wie möglich mit Online-Tools wie [TinyPNG](https://tinypng.com). {% endhint %} ### Beispiel: Abstände für verschiedene Viewports definieren Mit Abstandsklassen kannst du Abstände von Erlebniswelt-Elementen je Viewports definieren. Nachfolgend zeigen wir dir ein Anwendungs-Beispiel: Dieser Abschnitt folgt... #### Weiterführende Informationen {% hint style="info" %} **Hinweis**: Mehr Informationen zum Aufbau der CSS-Klassen selber findest du im Artikel [Erlebniswelten mit Bootstrap CSS-Klassen optimieren](/wissensdatenbank/profiwissen/erlebniswelten-mit-bootstrap-css-klassen-optimieren). {% endhint %} # Spaltenabstände in CMS-Blöcken anpassen In dieser Anleitung erfährst du, wie du Spaltenabstände in CMS-Blöcken mit ThemeWare® CSS-Column-Klassen anpassen kannst. ## Column-Klassen – Spaltenabstände in CMS-Blöcken ThemeWare® stellt dir eine umfangreiche Auswahl an CSS-Column-Klassen zu Verfügung mit welchen du die Spaltenabstände in CMS-Blöcken modifizieren kannst – also die Abstände zwischen den einzelnen Elemente bzw. Spalten (= Slots). > Diese CSS-Klassen stehen dir zur Verfügung, wenn du die folgende Theme-Konfiguration aktivierst: > > * Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen" => CSS-Klassen für Spaltenabstände laden (optional) {% hint style="success" %} **Tipp**: Anwendungsbeispiele findest du in unseren [Demoshops](https://demo.themeware.design/modern/Features/ThemeWare-CMS-Styling/Spaltenabstaende-in-CMS-Bloecken-anpassen/). {% endhint %} {% hint style="info" %} **Hinweis**: Nutze für die Anpassung von Abständen in CMS-Blöcken gerne die neuen, intuitiveren CSS-Klassen von ThemeWare®: [Abstände in CMS-Blöcken anpassen](/wissensdatenbank/anleitungen/erlebniswelten/abstande-in-cms-blocken-anpassen) {% endhint %} *** ## ThemeWare® "Spalten" CMS-Blöcke Spalten in CMS-Blöcken haben in Shopware 6 einen fest definierten Abstand von `40px` (2x `20px`). Mit ThemeWare® stehen dir verschiedene CSS-Klassen zur Verfügung um diese Abstände ändern zu können. Die ThemeWare® Spaltenabstandsklassen funktionieren für ThemeWare® CMS Spalten-Blöcke sowie die meisten Standard CMS-Blöcke von Shopware. | CSS-Klasse | Bereich | Funktionsbeschreibung | | -------------------------- | ------- | --------------------------------------------------------------- | | **twt-cms-col-padding-0** | Block | Setzt den Innenabstand für Spalten in CMS-Blöcken auf 0 Pixel. | | **twt-cms-col-padding-5** | Block | Setzt den Innenabstand für Spalten in CMS-Blöcken auf 5 Pixel. | | **twt-cms-col-padding-10** | Block | Setzt den Innenabstand für Spalten in CMS-Blöcken auf 10 Pixel. | | **twt-cms-col-padding-15** | Block | Setzt den Innenabstand für Spalten in CMS-Blöcken auf 15 Pixel. | | **-** | - | 20 Pixel ist der Standard Spalten-Abstand. | | **twt-cms-col-padding-25** | Block | Setzt den Innenabstand für Spalten in CMS-Blöcken auf 25 Pixel. | | **twt-cms-col-padding-30** | Block | Setzt den Innenabstand für Spalten in CMS-Blöcken auf 30 Pixel. | | **twt-cms-col-padding-35** | Block | Setzt den Innenabstand für Spalten in CMS-Blöcken auf 35 Pixel. | | **twt-cms-col-padding-40** | Block | Setzt den Innenabstand für Spalten in CMS-Blöcken auf 40 Pixel. | {% hint style="info" %} **Hinweis**: Wie du die CSS-Klassen einfügst erfährst du im Artikel [ThemeWare® CSS-Klassen für Erlebniswelten](/wissensdatenbank/anleitungen/erlebniswelten/themeware-css-klassen-fuer-erlebniswelten). {% endhint %} #### Details
#### Beispiel

Links: Standard Spaltenabstand | Rechts: twt-cms-col-padding-10

{% hint style="info" %} **Hinweis**: Du kannst die ThemeWare® "CSS-Klassen für Spaltenabstände" je nach Bedarf aktivieren bzw. deaktivieren. Die Konfiguration findest du im Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen". {% endhint %} ### Mobile Darstellung In mobilen Viewports werden Spalten untereinander dargestellt. Dabei haben Sie einen fest definierten Abstand von 0px. Mit ThemeWare® ab Version 2.1 stehen dir verschiedene CSS-Klassen zur Verfügung um diese Abstände ändern zu können. Die CSS-Klassen funktionieren für ThemeWare® CMS Spalten-Blöcke sowie die meisten Standard CMS-Blöcke von Shopware. | Klasse | Bereich | Funktionsbeschreibung | | ------------------------- | ------- | ----------------------------------------------------------------------- | | **-** | - | 0 Pixel ist der Standard Spalten-Abstand. | | **twt-cms-col-margin-5** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 5 Pixel. | | **twt-cms-col-margin-10** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 10 Pixel. | | **twt-cms-col-margin-15** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 15 Pixel. | | **twt-cms-col-margin-20** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 20 Pixel. | | **twt-cms-col-margin-25** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 25 Pixel. | | **twt-cms-col-margin-30** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 30 Pixel. | | **twt-cms-col-margin-35** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 35 Pixel. | | **twt-cms-col-margin-40** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 40 Pixel. | | **twt-cms-col-margin-45** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 45 Pixel. | | **twt-cms-col-margin-50** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 50 Pixel. | | **twt-cms-col-margin-55** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 55 Pixel. | | **twt-cms-col-margin-60** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 60 Pixel. | | **twt-cms-col-margin-65** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 65 Pixel. | | **twt-cms-col-margin-70** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 70 Pixel. | | **twt-cms-col-margin-75** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 75 Pixel. | | **twt-cms-col-margin-80** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 80 Pixel. | {% hint style="info" %} **Hinweis**: Wie du die CSS-Klassen einfügst erfährst du im Artikel [ThemeWare® CSS-Klassen für Erlebniswelten](/wissensdatenbank/anleitungen/erlebniswelten/themeware-css-klassen-fuer-erlebniswelten). {% endhint %} #### Details
#### Beispiele

Links: Standard | Rechts: twt-cms-col-margin-15

*** ## ThemeWare® "Grid" CMS-Blöcke Du kannst die oben genannten CSS-Klassen für "Spalten"-Blöcke auch in "Grid"-Blöcken von ThemeWare® nutzen, wir haben für diese mit ThemeWare® 3.2.0 aber neue, intuitivere CSS-Klassen eingeführt und empfehlen künftig diese neuen CSS-Klassen zu nutzen. Mehr Informationen dazu findest du in folgendem Artikel: {% content-ref url="/pages/lzDqaCcoxDA4lVfJhP0i" %} [Abstände in CMS-Blöcken anpassen](/wissensdatenbank/anleitungen/erlebniswelten/abstande-in-cms-blocken-anpassen) {% endcontent-ref %} *** ## Neue CSS-Klassen mit ThemeWare® 3.2 Mit ThemeWare® 3.2.0 haben wir neue CSS-Abstandsklassen für ThemeWare® "Grid" und "Spalten" CMS-Blöcke hinzugefügt. Diese kombinieren die Funktion der beiden oben genannten CSS-Klassen `twt-cms-col-padding` und `twt-cms-col-margin`. Die neuen CSS-"Gap"-Klassen funktionieren in "Grids" und in den "Spalten"-Blöcken von ThemeWare®. Mehr Informationen dazu findest du in folgendem Artikel: {% content-ref url="/pages/lzDqaCcoxDA4lVfJhP0i" %} [Abstände in CMS-Blöcken anpassen](/wissensdatenbank/anleitungen/erlebniswelten/abstande-in-cms-blocken-anpassen) {% endcontent-ref %} # Überschriften in CMS-Blöcken gestalten In dieser Anleitung erfährst du, wie du Überschriften in CMS-Blöcken mit ThemeWare® CSS-Headline-Klassen gestalten kannst. ## Headline-Klassen – Überschriften in CMS-Text-Blöcken ThemeWare® stellt dir individuelle CSS-Headline-Klassen zur Verfügung mit welchen du, die aus unseren Shopware 5 Themes bekannten Überschriften, auch für deine Shopware 6 Erlebniswelten erstellen kannst. > Diese CSS-Klassen stehen dir zur Verfügung, wenn du die folgende Theme-Konfiguration aktivierst: > > * Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen" => CSS-Klassen für Überschriften laden (optional) {% hint style="success" %} **Tipp**: Anwendungsbeispiele findest du in unseren [Demoshops](https://demo.themeware.design/modern/Features/ThemeWare-CMS-Styling/UEberschriften-in-CMS-Bloecken-gestalten/). {% endhint %} *** ## ThemeWare® CSS-"Headline"-Klassen | CSS-Klasse | Bereich | Funktionsbeschreibung | | ------------------------------- | ------- | --------------------------------------------------------------------------------------- | | **twt-cms-headline-bath** | Block | Stylt die Headline und den nachfolgenden Absatz in CMS-Blöcken wie im Bath-Theme. | | **twt-cms-headline-clean** | Block | Stylt die Headline und den nachfolgenden Absatz in CMS-Blöcken wie im Clean-Theme. | | **twt-cms-headline-flower** | Block | Stylt die Headline in CMS-Blöcken wie im Flower-Theme. | | **twt-cms-headline-kids** | Block | Stylt die Headline in CMS-Blöcken wie im Kids-Theme. | | **twt-cms-headline-ladieswear** | Block | Stylt die Headline und den nachfolgenden Absatz in CMS-Blöcken wie im Ladieswear-Theme. | | **twt-cms-headline-plants** | Block | Stylt die Headline in CMS-Blöcken wie im Ladieswear-Theme. | | **twt-cms-headline-classic** | Block | Stylt die Headline in CMS-Blöcken wie in Shopware 5 Einkaufswelten. | **Beispiel** ![Headline ThemeWare® "Bath"](/files/DvxYphIsdMOybfYF4T0R) {% hint style="info" %} **Hinweis**: Du kannst die ThemeWare® "CSS-Klassen für Überschriften" je nach Bedarf aktivieren bzw. deaktivieren. Die Konfiguration findest du im Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen". {% endhint %} # Zusatzfeld in der Erlebniswelt ausgeben Zusatzfelder sind eine Grundfunktion von Shopware 6 und bieten dir die Möglichkeit, Produkte, Kategorien oder Hersteller individuell zu erweitern. Mit Zusatzfeldern kannst du flexibel zusätzliche Informationen speichern und bei Bedarf in der Storefront ausgeben. Da weder Shopware noch ThemeWare® wissen können, in welche Datei bzw. in welchem Twig-Block dein individuelles Zusatzfeld integriert werden soll, müssen individuelle Zusatzfelder manuell in die Storefront eingebunden werden. Dies geht entweder mit einem **CMS-Element** in einem Erlebniswelt-Layout oder über eine individuelle **Template-Anpassung**. #### CMS-Element * Vorteile * Umsetzung ist sehr einfach * Nachteile * erst ab Shopware 6.6.9 verfügbar * keine Abfrage ob ein Zusatzfeld leer ist möglich #### Template-Anpassung * Vorteile * schon vor Shopware 6.6.9 verfügbar * eine Abfrage ob ein Zusatzfeld leer ist möglich * Nachteile * Umsetzung ist recht komplex In dieser Anleitung erklären wir dir wie du Zusatzfelder **mit einem CMS-Element** in der Storefront **ausgeben** kannst. {% hint style="info" %} **Hinweis**: Wie du ein Zusatzfeld mit einer Template-Anpassung in der Storefront ausgeben kannst, erfährst du in der Anleitung [Zusatzfelder in der Storefront ausgeben](/wissensdatenbank/anleitungen/individuelle-anpassungen/zusatzfelder-in-der-storefront-ausgeben). {% endhint %} {% hint style="warning" %} **Hinweis**: Individuelle Zusatzfelder werden ab Shopware 6.6.9 in das CMS-System integriert. Vor Shopware 6.6.9 kannst du individuelle Zusatzfelder nur mit einer Template-Anpassung in der Storefront ausgeben: [Zusatzfelder in der Storefront ausgeben](/wissensdatenbank/anleitungen/individuelle-anpassungen/zusatzfelder-in-der-storefront-ausgeben) {% endhint %} *** ## Zusatzfeld mit einem CMS-Element ausgeben Dank der Integration von individuellen Zusatzfeldern in das CMS-System von Shopware 6 lassen sich Zusatzfelder nahtlos in Textfelder einbinden. In der folgenden Schritt-für-Schritt-Anleitung binden wir das individuelle Zusatzfeld "Sicherheitshinweis" mit einem CMS-Block auf der Produktdetailseite in der Storefront ein. {% hint style="success" %} **Tipp**: Wie du ein individuelles Zusatzfeld anlegst, erfährst du in der Anleitung [Zusatzfelder (Custom Fields)](/wissensdatenbank/anleitungen/zusatzfelder) {% endhint %} ### Zusatzfeld einem CMS-Block zuordnen #### 1) Erlebniswelt bearbeiten Wechsel in die Erlebniswelt-Verwaltung: > "Inhalte" => "Erlebniswelten" Öffne dort das CMS-Layout deiner Produktdetailseiten um das Layout zu bearbeiten. #### 2) CMS-Block einfügen Füge nun in dein Layout einen CMS-Block aus der Kategorie "Text" ein. #### 3) Einstellungen des CMS-Elements öffnen Klicke auf das ![](/files/YY1yXZuChT6uJ6oSNYXb) "Zahnrad"-Icon oben rechts im entsprechenden Text-Element um die Element-Einstellungen zu öffnen.

CMS-Slot ⇒ Aktions-Buttons

{% hint style="info" %} **Hinweis**: Das Zahnrad-Icon erscheint wenn du den CMS-Block angeklickt hast und sich die Maus innerhalb des Blocks befindet. {% endhint %} #### 4) Zusatzfeld einfügen Zum einfügen hast du in Shopware 6.6.9.0 zwei Möglichkeiten: * Datenzuordnung (siehe [4.1](#id-4.1-zusatzfeld-zuordnen)) * Variable (siehe [4.2](#id-4.2-zusatzfeld-als-variable-einfugen)) #### 4.1) Zusatzfeld zuordnen > Die ist die unkompliziertere Variante, das einfügen von weiteren Zusatzfeldern oder Texten in das CMS-Element ist hierbei aber nicht möglich. Klicke auf den Link "Datenzuordnung" (1) und wähle dein Zusatzfeld (2) aus. z.B. `product.customFields.custom_gpsr_sicherheitshinweis`

Zusatzfeld ⇒ Datenzuordnung

{% hint style="info" %} **Hinweis**: Ist ein Zusatzfeld nicht in der Liste verfügbar, versuche es einmal auf die nachfolgende, manuelle Methode. {% endhint %} #### 4.2) Zusatzfeld als Variable einfügen > In dieser Variante kannst du auch mehrere Zusatzfelder und Text in das CMS-Element einfügen. Klicke auf den Button "Variable einfügen" (1) und wähle dein Zusatzfeld (2) aus. z.B. `product.customFields.custom_gpsr_sicherheitshinweis`

Zusatzfeld ⇒ Variable

Alternativ kannst du das Zusatzfeld als Variable auch direkt im HTML-Editor einfügen: ```twig

Sicherheitshinweis:

{{ product.customFields.custom_gpsr_sicherheitshinweis }}
``` Das CMS-Element sieht im Editor nun wie folgt aus:

CMS-Element mit Zusatzfeld

{% hint style="info" %} **Hinweis**: Ein Hersteller-Zusatzfeld kannst du mit folgendem Syntax ausgeben:\ `{{ product.manufacturer.customFields.DEINZUSATZFELD }}` {% endhint %} #### 5) Speicher deine Änderung Das Zusatzfeld wird nun in der Storefront ausgegeben – sofern es im entsprechenden Produkt befüllt wurde. #### 6) Cache leeren Leere abschließend einmal den Shopware- sowie deinen Browser-Cache damit die Änderung auch in der Storefront korrekt angezeigt wird. #### Beispiel

Zusatzfeld in einer Erlebniswelt

{% hint style="success" %} **Tipp**: Füge ggf. die CSS-Klasse `twt-cms-block-reset` im entsprechenden CMS-Block ein um das ThemeWare® CMS-Styling für diese Block zu deaktivieren. {% endhint %} *** ## Weiterführende Informationen Mehr Informationen zum Thema "Zusatzfelder" findest du in folgendem Artikel: {% content-ref url="/pages/GJf1x5UwsNaLrzTOTPY2" %} [Zusatzfelder (Custom Fields)](/wissensdatenbank/anleitungen/zusatzfelder) {% endcontent-ref %} # Fehlerbehebung Wir haben es uns zur Aufgabe gemacht mit ThemeWare® das beste Erlebnis für dich und deine Kunden zu bieten. Wie du an unseren über 380 Bewertungen sehen kannst, liegt uns viel daran, einen großartigen Support zu leisten. Durch unsere über 3.000 Kunden haben wir fast jedes Problem schon unzählige Male gesehen und gelöst. Bitte vertraue uns, sowie diesem Prozess und folge Schritt für Schritt der Anleitung. Über 95% aller "Probleme" werden nicht durch ThemeWare® ausgelöst. Es ist sehr wahrscheinlich, dass du das Problem mit Hilfe dieses Prozesses selber lösen kannst und nicht erst auf eine Antwort von uns warten musst. #### Mögliche Ursachen: * das Problem resultiert aus einer veralteten Storefront * das Problem besteht bereits im Shopware Standard-Theme (bzw. Shopware default theme) * das Problem entsteht durch (eine) individuelle Anpassung(en) * das Problem wird durch (eine) Erweiterung(en) Dritter verursacht All dies kann mit unseren Prozess geprüft werden und falls du das Problem doch nicht selber lösen kannst, eröffnest du im Laufe dieses Prozesses automatisch ein Support-Ticket. Es ist aber unbedingt notwendig, dass du die Schritte genau befolgst. Nur so können wir unseren exzellenten Support leisten, den alle so sehr lieben. Bitte starte die Fehlerbehebung jetzt unter: {% embed url="" %} Geführter Assistent zur Fehlerbehebung {% endembed %} # Bekannte Fehler einfach selber lösen Häufige Fehler in der Shopware 6 einfach selber beheben Der Erste Schritt bei Problemen oder vermeintlichen Fehlern ist immer ein Blick in den Bereich "**Häufige Fehler**". Dort findest du sowohl für die Storefront als auch für die Administration Lösungen für die häufigsten, bekannten Probleme und Fehler. Durch unsere über 3.000 Kunden haben wir fast jedes Problem schon gesehen und gelöst. Es ist daher sehr wahrscheinlich, dass das Problem bereits bekannt ist und es bereits eine Lösung gibt. Schaue also immer zuerst einmal in den Bereich "**Häufige Fehler**": {% content-ref url="/pages/7inSuHFptdBTCeSnrp3a" %} [Häufige Fehler](/wissensdatenbank/haeufige-fehler) {% endcontent-ref %} {% hint style="info" %} **Hinweis**: Die Artikel ist Bestandteil unseres geführten Assistenten zur Fehlerbehebung und erklärt einen bestimmten Schritt in diesem Prozess. Damit du die entsprechenden Schritte in der richtigen Reihenfolge durchführst nutze bitte den Assistenten zur Fehlerbehebung. {% endhint %} # Darstellungsfehler beheben Darstellungsfehler in der Shopware 6 Storefront einfach selber beheben Für Darstellungsfehler in der Storefront ist in den allermeisten Fällen ein veralteter Cache die Ursache. Auch ein nicht korrekt kompiliertes Theme kann zu Darstellungsfehlern führen. Aktualisiere daher, bei Problemen oder Darstellungsfehlern, bitte immer zuerst einmal die Shopware Storefront. Dies geht ganz einfach und schnell mit wenigen Klicks: {% content-ref url="/pages/PRKdzWpE9StTVMBHDHTd" %} [Storefront aktualisieren](/wissensdatenbank/anleitungen/sonstiges/storefront-aktualisieren) {% endcontent-ref %} {% hint style="info" %} **Hinweis**: Die Artikel ist Bestandteil unseres geführten Assistenten zur Fehlerbehebung und erklärt einen bestimmten Schritt in diesem Prozess. Damit du die entsprechenden Schritte in der richtigen Reihenfolge durchführst nutze bitte den Assistenten zur Fehlerbehebung. {% endhint %} # Erweiterungen bzw. Plugins prüfen Um zu prüfen ob ein Fehler oder Problem durch eine bestimmte Erweiterung (Plugin oder App) verursacht wird, folge bitte den nachfolgenden Schritten: #### Erweiterungen kannst du in 3 Schritten prüfen: 1. Erweiterungen deaktivieren (nicht deinstallieren!) 2. Shopware Cache leeren 3. Browser-Cache leeren ## Erweiterungen prüfen {% hint style="warning" %} **Wichtig**: Da man nicht voraussagen kann, ob und wenn ja, welche Erweiterung ein Problem verursacht, ist es wichtig **alle** aktiven Erweiterungen einmal zu deaktivieren – auch, wenn du eine Vermutung hast. {% endhint %} 1. Öffne die Administration deines Shops 2. Erweiterungen deaktivieren: 1. Navigiere über die Hauptnavigation in die **Erweiterungs-Verwaltung** ("Erweiterungen" => "Meine Erweiterungen" => Tab "Apps") 2. Deaktiviere (nicht deinstallieren!) hier **alle** aktiven Erweiterungen 3. Shopware Cache leeren (*nicht in der Cloud verfügbar*): 1. Navigiere danach über die Hauptnavigation in den Bereich **"Cache & Indizes"** ("Einstellungen" => "System") 2. Klicke auf **"Caches leeren"** 3. *Der Shopware Cache wird nun geleert...* 4. Webseite und Browser-Cache neu laden: * Lade danach die Seite, auf welcher das Problem aufgetreten ist, in deinem Web-Browser mit einem **Cache-Refresh** neu: * Windows: **Strg + F5** * Mac: **Command (⌘) + Shift (⇧) + R** oder **Command (⌘) + Option/Alt (⌥) + R** ## Tritt das Problem nicht mehr auf? Wenn das Problem nicht mehr auftritt, ist ThemeWare® nicht der Verursacher und es gibt ein Problem mit einer Erweiterung (Plugin oder App). {% hint style="success" %} **Tipp**: Wenn Du herausfinden möchtest, welche Erweiterung das Problem verursacht, aktiviere eine Erweiterung nach der anderen und prüfe nach jeder aktivierten Erweiterung einmal die Storefront. Konntest du eine Erweiterung als Verursacher identifizieren, wende dich einfach an den entsprechenden [Hersteller](https://account.shopware.com/) und teile diesen unbedingt mit, was du herausgefunden hast. {% endhint %} {% hint style="info" %} **Hinweis**: Die Artikel ist Bestandteil unseres geführten Assistenten zur Fehlerbehebung und erklärt einen bestimmten Schritt in diesem Prozess. Damit du die entsprechenden Schritte in der richtigen Reihenfolge durchführst nutze bitte den Assistenten zur Fehlerbehebung. {% endhint %} # Individuelle Anpassungen prüfen Um zu prüfen ob ein Fehler oder Problem durch eine individuelle Anpassung verursacht wird, folge bitte der folgenden Anleitung: #### Individuelle Anpassungen kannst du in 5 Schritten prüfen: 1. Theme-Duplikat ausschließen *(falls verwendet)* 2. Individuelle Anpassungen ausschließen *(falls verwendet)* 3. Individuellen Code ausschließen 4. Shopware Cache leeren 5. Browser-Cache leeren ## Individuelle Anpassungen prüfen 1. Öffne die Administration deines Shops 2. Theme-Duplikat ausschließen *(falls verwendet)*: 1. Navigiere über die Hauptnavigation zu deinem **Verkaufskanal** ("Verkaufskanäle" => "..." => Tab "Theme") 2. Weise bitte das **Original ThemeWare® Theme** dem entsprechenden Verkaufskanal zu 3. Individuelle Anpassungen ausschließen *(falls verwendet)*: 1. Navigiere über die Hauptnavigation in die **Erweiterungs-Verwaltung** ("Erweiterungen" => "Meine Erweiterungen" => Tab "Apps") 2. Deaktiviere das **ThemeWare® Customizing-Plugin** (oder ähnliche Erweiterungen) 4. Individuellen Code ausschließen: 1. Wechsel nun über die Hauptnavigation in die **"Theme-Verwaltung"** ("Inhalte" => "Themes") * **Hinweis**: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation. 2. Öffne die **Theme Konfiguration** des Original ThemeWare® Themes 3. Deaktiviere den **"Experten-Modus"** (Tab "Weiteres" => Bereich "Experten-Einstellungen") 4. Speichere diese Änderung (Button "Speichern") 5. *Das Theme wird nun kompiliert bzw. in die Storefront übertragen...* 5. Shopware Cache leeren (*nicht in der Cloud verfügbar*): 1. Navigiere danach über die Hauptnavigation in den Bereich **"Cache & Indizes"** ("Einstellungen" => "System") 2. Klicke auf **"Caches leeren"** 3. *Der Shopware Cache wird nun geleert...* 6. Webseite und Browser-Cache neu laden: * Lade danach die Seite, auf welcher das Problem aufgetreten ist, in deinem Web-Browser mit einem **Cache-Refresh** neu: * Windows: **Strg + F5** * Mac: **Command (⌘) + Shift (⇧) + R** oder **Command (⌘) + Option/Alt (⌥) + R** ## Tritt das Problem nicht mehr auf? Wenn das Problem nicht mehr auftritt, ist ThemeWare® nicht der Verursacher und es gibt ein Problem mit deinen individuellen Anpassungen. {% hint style="success" %} **Tipp**: Wende dich im Zweifel an deine Agentur und teile dieser mit, was du herausgefunden hast. Diese kann dir sicherlich behilflich sein. {% endhint %} {% hint style="info" %} **Hinweis**: Die Artikel ist Bestandteil unseres geführten Assistenten zur Fehlerbehebung und erklärt einen bestimmten Schritt in diesem Prozess. Damit du die entsprechenden Schritte in der richtigen Reihenfolge durchführst nutze bitte den Assistenten zur Fehlerbehebung. {% endhint %} # Invalide Konfigurationsfelder korrigieren In diesem Artikel erfährst du, wie du ein invalides Konfigurationsfeld korrigieren kannst. Um invalide Konfigurationsfelder zu korrigieren, folge bitte der folgenden Anleitung. > **Hintergrundwissen** > > Kannst du deine Konfiguration nicht speichern und/oder erhältst beim Speichern einen entsprechenden Hinweis (z.B. "Ungültige Konfiguration"), liegt das in der Regel an einem falsch befüllten Konfigurationsfeld. > > Bei einem Fehler gibt es die beiden folgenden Möglichkeiten: > > 1. Du hast vor dem Speichern ein Feld falsch befüllt. > * Der falsche Wert wird nicht übernommen. Lade die Konfiguration einmal neu und alles ist wieder in Ordnung. > 2. Du hast vor dem Update auf Shopware 6.7 ein Feld falsch befüllt. > * Du musst nun den Wert finden und korrigieren. *** Wir gehen in diesem Artikel davon aus, dass du die Konfiguration bereits validiert hast und einen Hinweis auf das fehlerhafte Feld bekommen hast. Hast du die Konfiguration noch nicht validiert, gehe bitte wie in folgendem Artikel beschrieben vor: {% content-ref url="/pages/RhvWZNU8fQfmlQ3oMiKG" %} [Theme-Konfiguration validieren](/wissensdatenbank/anleitungen/fehlersuche/theme-konfiguration-validieren) {% endcontent-ref %} {% hint style="info" %} **Hinweis**: In den bisher bekannten Fällen lag der Fehler immer an einer fehlerhaft befüllten Farbkonfiguration. {% endhint %} {% hint style="success" %} **Tipp**: Nutze den Farbwähler von Shopware um einen validen Farbwert zu erhalten. {% endhint %} *** ## Invalide Konfigurationsfelder korrigieren Gehen wir davon aus, du erhältst die Meldung `SCSS Value "#9fa5ab;" is not valid for type "color"` oder `SCSS Value "none" is not valid for type "color"`. Beides sind Varianten des selben Problems, einer falsch befüllten Farbkonfiguration. > Im ersten Fall hat sich ein Kopierfehler eingeschlichen und ein Semikolon wurde ergänzt: `#9fa5ab;`. Im zweiten Fall wurde der Wert `none` eingefügt. Der Wert `none` ist kein valider Wert für ein CSS-/SCSS-Farbfeld. Nutze `transparent` oder `rgba(255, 255, 255, 0)` um eine Farbe zu "entfernen". 1. Öffne die Administration deines Shops 2. Öffne die Konfiguration deines Themes 3. Durchsuche jeden Tab mit deinem Browser (z.B. **Strg + F**) nach dem fehlerhaften Wert (z.B. `#9fa5ab;` bwz. `none` ) * **Tipp**: In der Pro-Edition kannst du alle Abschnitte mit dem "Alle aufklappen"-Button neben dem Speichern-Button aufklappen und auf einen Schlag durchsuchen.\ ![](/files/88hxovdVaUwllrY0t22w) 4. Hast du den Wert gefunden, korrigiere das Feld 5. Speicher deine Änderung Dein Theme sollte nun wieder gespeichert werden. *** #### Weiterführende Informationen Mehr Informationen zum Fehler "Ungültige Konfiguration" findest du in folgenden Artikel: {% content-ref url="/pages/TpcKe1VEV6ZokkeTNWTD" %} [Ungültige Konfiguration](/wissensdatenbank/haeufige-fehler/administration/ungultige-konfiguration) {% endcontent-ref %} # Shop aktualisieren Um auszuschließen, dass etwaige Probleme bereits mit einem Update behoben wurden ist es sinnvoll Shopware, alle Erweiterungen (Apps bzw. Plugins) und ThemeWare® selber auf die jeweils neuste Version zu aktualisieren. {% hint style="info" %} **Hinweis:** Bitte prüfe ob du eine gültige Subscription für Kaufversion hast, damit du auch die neusten Updates erhältst. Die Subscription ist in Mietversion stets enthalten. {% endhint %} #### Den gesamten Shop aktualisieren: 1. **Shopware auf die neuste Version aktualisieren:** 1. Navigiere über die Hauptnavigation zum "**Shopware-Updater**" ("Einstellungen" => "System" => "Shopware-Update") 2. Klicke auf den Button "**Nach Updates suchen**"\ ![](/files/ejHVV5Yv7XVyXwYprRBP) 3. Aktualisiere Shopware sofern eine neuere Version vorhanden ist 2. **Erweiterungen (Apps bzw. Plugins) auf die neuste Version aktualisieren:** 1. Navigiere über die Hauptnavigation zur "**Erweiterungs-Verwaltung**" ("Erweiterungen" => "Meine Erweiterungen") 2. Prüfe im Tab "**Apps**" ob es Updates gibt 3. Aktualisiere alle entsprechenden Apps 3. **ThemeWare® auf die neuste Version aktualisieren:** 1. Prüfe im Tab "**Themes**" ob es ein Update für ThemeWare® gibt 2. Prüfe im [Changelog](https://service.themeware.design/changelogs) ob es ein Update für ThemeWare® gibt 3. Aktualisiere ThemeWare® gegebenenfalls *** #### Weiterführende Informationen * Anleitung: [Shopware 6 aktualisieren / updaten](/wissensdatenbank/shopware/update-guides/shopware-6-aktualisieren-updaten) * Anleitung: [ThemeWare® updaten](/wissensdatenbank/anleitungen/administration/themeware-update-durchfuehren) # Shopware Standard-Theme prüfen Um zu prüfen ob ein Fehler oder Problem überhaupt im Zusammenhang mit ThemeWare® stehen könnte, reicht es das Shopware Standard-Theme (bzw. Shopware default theme) deinem Verkaufskanal zuzuweisen. Folge dazu einfach der folgenden Anleitung: #### Das Shopware Standard-Theme kannst du in 3 Schritten prüfen: 1. Shopware Standard-Theme zuweisen (bzw. Shopware default theme zuweisen) 2. Shopware Cache leeren 3. Browser-Cache leeren ## Shopware Standard-Theme prüfen 1. Öffne die Administration deines Shops 2. Shopware Standard-Theme zuweisen: 1. Navigiere über die Hauptnavigation zu deinem **Verkaufskanal** ("Verkaufskanäle" => "..." => Tab "Theme") 2. Weise bitte das **Shopware Standard-Theme** (bzw. Shopware default theme) dem entsprechenden Verkaufskanal zu\ ![](/files/tes1OpkerfbtW5dgH5Uq) 3. Shopware Cache leeren (*nicht in der Cloud verfügbar*): 1. Navigiere danach über die Hauptnavigation in den Bereich **"Cache & Indizes"** ("Einstellungen" => "System") 2. Klicke auf **"Caches leeren"** 3. *Der Shopware Cache wird nun geleert...* 4. Webseite und Browser-Cache neu laden: * Lade danach die Seite, auf welcher das Problem aufgetreten ist, in deinem Web-Browser mit einem **Cache-Refresh** neu: * Windows: **Strg + F5** * Mac: **Command (⌘) + Shift (⇧) + R** oder **Command (⌘) + Option/Alt (⌥) + R** ## Tritt das Problem weiterhin auf? Wenn das Problem weiterhin – also auch ohne ThemeWare® – auftritt, ist zu 99,9% davon auszugehen, dass ThemeWare® nicht der Verursacher ist und es ein grundsätzliches Problem in Shopware oder mit einer Erweiterung (Plugin oder App) gibt. Prüfe als nächstes ob eine bestimmte Erweiterung den Fehler bzw. das Problem verursacht: {% content-ref url="/pages/z4CdZNC9AJJ2eSRcNEl0" %} [Erweiterungen bzw. Plugins prüfen](/wissensdatenbank/anleitungen/fehlerbehebung/erweiterungen-bzw.-plugins-pruefen) {% endcontent-ref %} {% hint style="success" %} **Tipp**: Wende dich im Zweifel an deine Agentur oder den [Shopware Support](https://docs.shopware.com/de/account-de/shopbetreiberbereich/support) und teile diesen unbedingt mit, was du herausgefunden hast. {% endhint %} {% hint style="info" %} **Hinweis**: Die Artikel ist Bestandteil unseres geführten Assistenten zur Fehlerbehebung und erklärt einen bestimmten Schritt in diesem Prozess. Damit du die entsprechenden Schritte in der richtigen Reihenfolge durchführst nutze bitte den Assistenten zur Fehlerbehebung. {% endhint %} # ThemeWare® Soft Reset durchführen In seltenen Fällen entsteht ein Problem dadurch, dass Dateien von Erweiterungen (Plugins, Apps oder Themes) nicht vollständig in die Storefront übertragen wurden. Dies kann man im Fall von ThemeWare® mit einem "Soft Reset" lösen. #### ThemeWare® "Soft Reset" durchführen: 1. **Weise deinem Verkaufskanal das Shopware Standard-Theme zu:** 1. Navigiere über die Hauptnavigation zu deinem **Verkaufskanal** ("Verkaufskanäle" => "..." => Tab "Theme")' 2. Weise bitte das **Shopware Standard-Theme** (bzw. Shopware default theme) dem entsprechenden Verkaufskanal zu\ ![](/files/tes1OpkerfbtW5dgH5Uq) 2. **Deaktiviere (nicht deinstallieren!) ThemeWare®:** 1. Wechsel über die Hauptnavigation in die **"Erweiterungs-Verwaltung"** ("Erweiterungen" => "Meine Erweiterungen") 2. Wechsel in den Tab **"Themes"** 3. Deaktiviere ThemeWare® über den ![](/files/hLVopes9WzUCr5JUKUYX) **Switch-Button** links neben dem ThemeWare® Logo 3. **Aktiviere ThemeWare® wieder:** 1. Aktiviere ThemeWare® über dem ![](/files/990snByAu1IDPQV9v1og) **Switch-Button** links neben dem ThemeWare® Logo 4. **Weise ThemeWare® nun wieder deinem Verkaufskanal zu:** 1. Wechsel über die Hauptnavigation in den Verkaufskanal deiner Storefront ![](/files/jcxWkOEIUd20r9APO6P2) im Bereich "**Verkaufskanäle**" 2. Wechsel in den Tab "**Theme**" 3. Klicke nun im Bereich "Theme-Zuweisung" auf den Button "**Theme ändern**" 4. Wähle ThemeWare® im Pop-up "Theme auswählen" aus und klicke auf den Button "**Theme ändern**" 5. Klicke auf den Button "**Speichern**" damit das Theme zugewiesen und kompiliert wird 5. **Shopware Cache leeren:** 1. Navigiere danach über die Hauptnavigation in den Bereich **"Cache & Indizes"** ("Einstellungen" => "System") 2. Klicke auf **"Caches leeren"** 6. **Webseite und Browser-Cache neu laden:** * Lade danach die Seite, auf welcher das Problem aufgetreten ist, in deinem Web-Browser mit einem **Cache-Refresh** neu: * Windows: **Strg + F5** * Mac: **Command (⌘) + Shift (⇧) + R** oder **Command (⌘) + Option/Alt (⌥) + R** *** #### Weiterführende Informationen * Anleitung: [Shopware Standard-Theme zuweisen](/wissensdatenbank/shopware/konfiguration/themes/shopware-standard-theme-zuweisen) * Anleitung: [ThemeWare® deaktivieren](/wissensdatenbank/anleitungen/administration/themeware-deaktivieren) * Anleitung: [ThemeWare® aktivieren](/wissensdatenbank/anleitungen/administration/themeware-aktivieren) * Anleitung: [ThemeWare® zuweisen](/wissensdatenbank/anleitungen/administration/themeware-zuweisen) * Anleitung: [Storefront aktualisieren](/wissensdatenbank/anleitungen/sonstiges/storefront-aktualisieren) # ThemeWare® neu installieren In seltenen Fällen entsteht ein Problem dadurch, dass Dateien von Erweiterungen (Plugins, Apps oder Themes) nicht vollständig in die Storefront übertragen wurden. Dies kann man im Fall von ThemeWare® mit einem "Soft Reset" (siehe [ThemeWare® Soft Reset durchführen](/wissensdatenbank/anleitungen/fehlerbehebung/themeware-soft-reset-durchfuehren)) lösen. Reicht dies nicht (z.B. bei fehlerhaften Schreibrechten durch eine manuelle Bearbeitung von Original-Dateien) hilft es nur ThemeWare® neu zu installieren: #### ThemeWare® neu installieren: 1. **Empfohlen**: Erstelle ein vollständiges Backup deines Shops 2. **Weise deinem Verkaufskanal das Shopware Standard-Theme zu:** 1. Navigiere über die Hauptnavigation zu deinem **Verkaufskanal** ("Verkaufskanäle" => "..." => Tab "Theme")' 2. Weise bitte das **Shopware Standard-Theme** (bzw. Shopware default theme) dem entsprechenden Verkaufskanal zu\ ![](/files/tes1OpkerfbtW5dgH5Uq) 3. **Deaktiviere ThemeWare®:** 1. Wechsel über die Hauptnavigation in die **"Erweiterungs-Verwaltung"** ("Erweiterungen" => "Meine Erweiterungen") 2. Wechsel in den Tab **"Themes"** 3. Deaktiviere ThemeWare® über den ![](/files/hLVopes9WzUCr5JUKUYX) **Switch-Button** links neben dem ThemeWare® Logo 4. **Deinstalliere ThemeWare® (ohne die App-Daten zu entfernen):** 1. Klicke auf den ![](/files/znXlnW8jdihoBRSSx10u) **Kontext-Button** neben dem Theme um das Kontextmenü zu öffnen und darin auf "**Deinstallieren**" 2. **WICHTIG** : **Deaktiviere** im folgenden Pop-up die Option "Alle App-Daten endgültig entfernen" damit deine Theme-Konfiguration erhalten bleibt!\ ![](/files/pLGdV2RNQ7bhnJ8b3gAw) 3. Bestätige die Deinstallation noch einmal mit dem Button "**Deinstallieren**" 5. **Installiere ThemeWare® wieder:** 1. Installiere ThemeWare® nun wieder mit einem Klick auf "**Installieren**"![](/files/uqxdqgSN8A4uupakGWBa) 6. **Aktiviere ThemeWare® wieder:** 1. Aktiviere ThemeWare® über dem ![](/files/990snByAu1IDPQV9v1og) **Switch-Button** links neben dem ThemeWare® Logo 7. **Weise ThemeWare® nun wieder deinem Verkaufskanal zu:** 1. Wechsel über die Hauptnavigation in den Verkaufskanal deiner Storefront ![](/files/jcxWkOEIUd20r9APO6P2) im Bereich "**Verkaufskanäle**" 2. Wechsel in den Tab "**Theme**" 3. Klicke nun im Bereich "Theme-Zuweisung" auf den Button "**Theme ändern**" 4. Wähle ThemeWare® im Pop-up "Theme auswählen" aus und klicke auf den Button "**Theme ändern**" 5. Klicke auf den Button "**Speichern**" damit das Theme zugewiesen und kompiliert wird 8. **Shopware Cache leeren:** 1. Navigiere danach über die Hauptnavigation in den Bereich **"Cache & Indizes"** ("Einstellungen" => "System") 2. Klicke auf **"Caches leeren"** 9. **Webseite und Browser-Cache neu laden:** * Lade danach die Seite, auf welcher das Problem aufgetreten ist, in deinem Web-Browser mit einem **Cache-Refresh** neu: * Windows: **Strg + F5** * Mac: **Command (⌘) + Shift (⇧) + R** oder **Command (⌘) + Option/Alt (⌥) + R** *** #### Weiterführende Informationen * Anleitung: [Shopware Standard-Theme zuweisen](/wissensdatenbank/shopware/konfiguration/themes/shopware-standard-theme-zuweisen) * Anleitung: [ThemeWare® deaktivieren](/wissensdatenbank/anleitungen/administration/themeware-deaktivieren) * Anleitung: [ThemeWare® deinstallieren](/wissensdatenbank/anleitungen/administration/themeware-deinstallieren) * Anleitung: [ThemeWare® installieren](/wissensdatenbank/einfuehrung/themeware-installieren) * Anleitung: [ThemeWare® aktivieren](/wissensdatenbank/anleitungen/administration/themeware-aktivieren) * Anleitung: [ThemeWare® zuweisen](/wissensdatenbank/anleitungen/administration/themeware-zuweisen) * Anleitung: [Storefront aktualisieren](/wissensdatenbank/anleitungen/sonstiges/storefront-aktualisieren) # Fehlersuche # Erweiterung als Fehlerursache identifizieren Bevor du ein Problem meldest, kannst du ganz einfach selber überprüfen, ob eine bestimmte Erweiterung (Plugin oder App) für das Problem verantwortlich ist. ## Erweiterungen deaktivieren Deaktiviere (nicht deinstalliere!) einmal alle verwendeten Erweiterung (Plugins oder Apps). Besteht das Problem nach Deaktivierung aller Erweiterungen nicht mehr, liegt das Problem wahrscheinlich an einer Erweiterung. {% hint style="warning" %} **Wichtig:** Einstellungen einer Erweiterung bleiben erhalten, wenn die Erweiterung deaktiviert wird. *(Stand: Shopware 6.4.11.0)* {% endhint %} {% hint style="info" %} **Hinweis**: Die Artikel ist Bestandteil unseres geführten Assistenten zur Fehlerbehebung und erklärt einen bestimmten Schritt in diesem Prozess. Damit du die entsprechenden Schritte in der richtigen Reihenfolge durchführst nutze bitte den Assistenten zur Fehlerbehebung. {% endhint %} *** #### Weiterführende Informationen {% content-ref url="/pages/z4CdZNC9AJJ2eSRcNEl0" %} [Erweiterungen bzw. Plugins prüfen](/wissensdatenbank/anleitungen/fehlerbehebung/erweiterungen-bzw.-plugins-pruefen) {% endcontent-ref %} # Fehlermeldungen debuggen Fehlermeldungen in der Shopware 6 Administration debuggen Wenn Shopware im Produktivmodus betrieben wird, werden i.d.R. nur allgemeine Meldungen wie "Theme konnte dem Verkaufskanal nicht zugewiesen werden" ausgegeben. Anhand dieser allgemeinen Meldungen ist es leider nicht möglich, die Ursache des Fehlers genauer zu identifizieren. Der erste Schritt bei Fehlermeldungen in der Administration sollte sein, eine detailliertere Fehlermeldung zu erhalten. ## Detailliertere Fehlermeldung erhalten Um eine detailliertere Fehlermeldungen zu erhalten nutze eine oder beide der folgenden Optionen: * Prüfe deinen **PHP-Error-Log** auf weitere Informationen. * Falls du nicht weißt, wie du den Wert ändern kannst, ist dir dein Hoster sicherlich gerne behilflich. * Versetze Shopware (temporär) in den **Debugmodus**. * Eine Anleitung findest du in der [Shopware Dokumentation](https://docs.shopware.com/de/shopware-6-de/tutorials-und-faq/fehlermeldungen-debuggen). {% hint style="info" %} **Hinweis**: Die Artikel ist Bestandteil unseres geführten Assistenten zur Fehlerbehebung und erklärt einen bestimmten Schritt in diesem Prozess. Damit du die entsprechenden Schritte in der richtigen Reihenfolge durchführst nutze bitte den Assistenten zur Fehlerbehebung. {% endhint %} # Fehler eingrenzen Bevor du ein Problem meldest, kannst du ganz einfach selber überprüfen, ob eine individuelle Anpassung, eine bestimmte Erweiterung (Plugin oder App) oder das Theme für das Problem verantwortlich ist. ## Prüfe ob das Problem vom Theme verursacht wird Um zu prüfen ob der Fehler bzw. das Problem überhaupt beim Theme liegt, nutze bitte den folgenden Artikel: {% content-ref url="/pages/vdMaQgpE9tpXgGIbRxug" %} [Shopware Standard-Theme prüfen](/wissensdatenbank/anleitungen/fehlerbehebung/shopware-standard-theme-pruefen) {% endcontent-ref %} ## Prüfe ob eine individuelle Anpassung den Fehler verursacht Um zu prüfen ob der Fehler bzw. das Problem durch eine individuelle Anpassung verursacht wird, nutze bitte den folgenden Artikel: {% content-ref url="/pages/CbYxgD1EYhl4hgeE729f" %} [Individuelle Anpassungen prüfen](/wissensdatenbank/anleitungen/fehlerbehebung/individuelle-anpassungen-pruefen) {% endcontent-ref %} ## Prüfe ob eine Erweiterung den Fehler verursacht Um zu prüfen ob der Fehler bzw. das Problem durch eine bestimmte Erweiterung (Plugin oder App) verursacht wird, nutze bitte den folgenden Artikel: {% content-ref url="/pages/z4CdZNC9AJJ2eSRcNEl0" %} [Erweiterungen bzw. Plugins prüfen](/wissensdatenbank/anleitungen/fehlerbehebung/erweiterungen-bzw.-plugins-pruefen) {% endcontent-ref %} {% hint style="info" %} **Hinweis**: Die Artikel ist Bestandteil unseres geführten Assistenten zur Fehlerbehebung und erklärt einen bestimmten Schritt in diesem Prozess. Damit du die entsprechenden Schritte in der richtigen Reihenfolge durchführst nutze bitte den Assistenten zur Fehlerbehebung. {% endhint %} # Theme als Fehlerursache identifizieren Bevor du ein Problem meldest, kannst du ganz einfach selber überprüfen, ob dein Theme für das Problem verantwortlich sein kann. ### Shopware Standard-Theme zuweisen Weise einmal das "**Shopware Standard-Theme**" (bzw. Shopware default theme) deiner Storefront ![](/files/jcxWkOEIUd20r9APO6P2) zu. Besteht das Problem auch im Standard-Theme, ist zu 99,9% davon auszugehen, dass ThemeWare® nicht der Verursacher ist. {% hint style="info" %} **Hinweis**: Die Artikel ist Bestandteil unseres geführten Assistenten zur Fehlerbehebung und erklärt einen bestimmten Schritt in diesem Prozess. Damit du die entsprechenden Schritte in der richtigen Reihenfolge durchführst nutze bitte den Assistenten zur Fehlerbehebung. {% endhint %} *** #### Weiterführende Informationen Wie du das Shopware Standard-Theme (bzw. Shopware default theme) zuweisen und prüfen kannst, erfährst du in folgendem Artikel: {% content-ref url="/pages/vdMaQgpE9tpXgGIbRxug" %} [Shopware Standard-Theme prüfen](/wissensdatenbank/anleitungen/fehlerbehebung/shopware-standard-theme-pruefen) {% endcontent-ref %} # Theme-Konfiguration validieren In diesem Artikel erfährst du, wie du deine Theme-Konfiguration validieren kannst. Bevor du ein Problem meldest, kannst du ganz einfach selber überprüfen, ob deine individuelle Konfiguration einen Fehler hat. **Nutze dafür einfach die "Validieren"-Funktion von Shopware.** Dies ist beispielsweise Sinnvoll wenn du eine Fehlermeldung wie `Ungültige Konfiguration – Die Konfiguration ist fehlerhaft. Das Theme kann nicht gespeichert werden.`, erhältst bzw. das Theme nicht gespeichert werden konnte. Um deine Konfiguration zu validieren öffne die Theme-Konfiguration und klicke auf den Pfeil neben dem Speichern-Button. Dort hast du die Option "Validieren".
Die Validierung sollte dir einen Hinweis geben, welcher Wert nicht stimmt. {% hint style="info" %} **Hinweis**: In den bisher bekannten Fällen lag der Fehler immer an einer fehlerhaft befüllten Farbkonfiguration. {% endhint %} {% hint style="success" %} **Tipp**: Nutze den Farbwähler von Shopware um einen validen Farbwert zu erhalten. {% endhint %} Wie du invalide Felder finden/korrigieren kannst, erfährst du in der folgenden Anleitung: {% content-ref url="/pages/DMOseVO4e6mYr141BB9w" %} [Invalide Konfigurationsfelder korrigieren](/wissensdatenbank/anleitungen/fehlerbehebung/invalide-konfigurationsfelder-korrigieren) {% endcontent-ref %} --- [Next Page](/llms-full.txt/1)