ThemeWare® 2.1.0

ThemeWare® 2.1.0 ist da! 🎉 Der neue Release umfasst folgende Änderungen:

Highlights

• Neue Erweiterung "Checkout-Steps" hinzugefügt
• Neue Erweiterung "Unterkategorien im Listing" hinzugefügt
• CMS-Block/-Element "Unterkategorien im Listing" hinzugefügt [Pro-Edition]
• CMS-Block/-Element "Image-Teaser" hinzugefügt [Pro-Edition]
• CMS-Block "Eine Spalte" hinzugefügt #FeatureRequest
• CMS-Block "Drei Spalten, 2-8-2" hinzugefügt [Cloud-Edition]
• CMS-Block "Drei Spalten, 3-6-3" hinzugefügt [Cloud-Edition]
• CMS-Block "Drei Spalten, 2-2-8" hinzugefügt
• CMS-Block "Drei Spalten, 3-3-6" hinzugefügt
• CMS-Block "Drei Spalten, 6-3-3" hinzugefügt
• CMS-Block "Drei Spalten, 8-2-2" hinzugefügt
• CMS-Block "Hero-Slider (2x)" hinzugefügt [Pro-Edition] #FeatureRequest
• CMS-Block "Hero-Slider (4x)" hinzugefügt [Pro-Edition] #FeatureRequest
• CMS-Block "Zwei Spalten (auf Handys getauscht)" hinzugefügt [Cloud-Edition]
• CMS-Element "Image-Slide (Hero-Slider)" hinzugefügt [Pro-Edition] #FeatureRequest
• Farb-Overlay im "Call-to-Action-Slide (Hero-Slider)" hinzugefügt [Pro-Edition]
• Farb-Overlay im "Text-Slide (Hero-Slider)" hinzugefügt [Pro-Edition]
• Konfiguration für die allgemeine Linkfarbe hinzugefügt
• Konfiguration für die Breite der "Top-Bar" hinzugefügt
• Konfiguration für die Breite der "Top-Navigation" hinzugefügt
• Konfiguration für den Anzeige-Zeitraum im "Call-to-Action-Slide (Hero-Slider)" hinzugefügt [Pro-Edition]
• Konfiguration für den Anzeige-Zeitraum im "Text-Slide (Hero-Slider)" hinzugefügt [Pro-Edition]
• Konfiguration für die Anzeigedauer im "Call-to-Action-Slide (Hero-Slider)" hinzugefügt [Pro-Edition] #FeatureRequest
• Konfiguration für die Anzeigedauer im "Text-Slide (Hero-Slider)" hinzugefügt [Pro-Edition] #FeatureRequest
• Konfiguration für den Bild-Anzeigemodus im "Text-Slide (Hero-Slider)" hinzugefügt [Pro-Edition]
• Konfiguration für den Bild-Anzeigemodus im "Call-to-Action-Slide (Hero-Slider)" hinzugefügt [Pro-Edition]
• Konfiguration für die Hintergrundfarbe für alle Teaser hinzugefügt [Pro-Edition]
• Konfiguration für die Hintergrundfarbe von Texten im "Call-to-Action-Slide (Hero-Slider)" hinzugefügt [Pro-Edition]
• Konfiguration für die Hintergrundfarbe von Texten im "Text-Slide (Hero-Slider)" hinzugefügt [Pro-Edition]
• Konfiguration für den Overlay-Hintergrund-Effekt im "Call-to-Action" hinzugefügt [Pro-Edition]
• Konfiguration für die Mindesthöhe im "Call-to-Action-Slide (Hero-Slider)" hinzugefügt [Pro-Edition] #FeatureRequest
• Konfiguration für die Mindesthöhe im "Text-Slide (Hero-Slider)" hinzugefügt [Pro-Edition] #FeatureRequest
• Konfiguration für die Einrückung im Flyout der Top-Navigation hinzugefügt
• Konfiguration zum Anzeigen der Lieferzeit auf der Detailseite hinzugefügt #FeatureRequest
• Konfiguration zum Ausblenden der Produktnummer auf der Detailseite hinzugefügt #FeatureRequest
• Label "Nicht verfügbar" auf der Detailseite hinzugefügt
• Label "Vorbestellung" auf der Detailseite hinzugefügt
• Labels "Lieferzeit" auf der Detailseite hinzugefügt
• Weitere CSS-Klassen für Spaltenabstände hinzugefügt
• Zusatzfeld zum hervorheben einer Kategorie in der Top-Navigation hinzugefügt #FeatureRequest

Änderungen

• CMS-Element "Button-Teaser" vollständig klickbar [Pro-Edition]
• CMS-Element "Call-to-Action" vollständig klickbar [Pro-Edition] #FeatureRequest
• CMS-Element "Call-to-Action-Slide (Hero-Slider)" vollständig klickbar [Pro-Edition] #FeatureRequest
• Darstellung aller Teaser im Anzeigemodus "Standard" verbessert [Pro-Edition]
• Darstellung vom "Alle Cookies akzeptieren"-Button in der Cookie-Konfiguration verbessert
• Produkt-Spezifikationen auf der Detailseite optisch gruppiert
• Text-Verbesserungen in der Theme-Konfiguration
• Theme JS-Plugins aktualisiert
• Vorschau der Spalten-CMS-Blöcke verbessert
• Vorschau vom "Button-Teaser" verbessert [Pro-Edition]
• Vorschau vom "Call-to-Action" verbessert [Pro-Edition]
• Vorschau vom "Classic-Teaser" verbessert [Pro-Edition]
• Vorschau vom "Discount-Banner" verbessert [Pro-Edition]
• Vorschau vom "Hero-Slider" verbessert [Pro-Edition]
• Vorschau vom "Modern-Teaser" verbessert [Pro-Edition]
• Vorschau vom "Text-Teaser" verbessert [Pro-Edition]
• Vorschau vom "Text-Teaser (verziert)" verbessert [Pro-Edition]
• Vorschau von der "Hover-Box" verbessert [Pro-Edition]
• Bugfix: Auswahl der Button-Farbe im "Call-to-Action" korrigiert [Pro-Edition]
• Bugfix: Logo-Breite im mobilen Viewport wird wieder korrekt angewendet
• Bugfix: "Medien öffnen"-Button im "Hero-Countdown (Überschrift)" korrigiert [Pro-Edition]
• Bugfix: Schriftgröße in Formularfeldern wird wieder korrekt übernommen
• Bugfix: Sticky-Funktion vom "Floating-Widget" korrigiert

Hinweise

• Bitte prüfe die Konfiguration der "Top-Navigation" nach dem Update.
• Bitte prüfe die Konfiguration deiner "Hero-Slider" nach dem Update. [Pro-Edition]

---

Änderungen im Detail

ThemeWare® 2.1.0 ist rappelvoll mit neuen Features und neuen Funktionen für bestehende Features. Nachfolgend findest du alle Änderungen im Detail.

---

Neue Erweiterung "Checkout-Steps"

Mit ThemeWare® 2.1 gibt es eine neue (integrierte) Erweiterung. Die aus ThemeWare® für Shopware 5 bekannten "Checkout-Steps" sind nun auch Bestandteil von ThemeWare® für Shopware 6.

---

Neue CMS-Blöcke

ThemeWare® 2.1 enthält vier neue CMS-Blöcke mit jeweils drei Spalten. Diese sind sowohl in der Pro- als auch in der Cloud-Edition verfügbar.

CMS-Block "Drei Spalten, 2-2-8" hinzugefügt

CMS-Block "Drei Spalten, 3-3-6" hinzugefügt

CMS-Block "Drei Spalten, 6-3-3" hinzugefügt

CMS-Block "Drei Spalten, 8-2-2" hinzugefügt

---

Neues in der "Cloud-Edition"

Die Cloud-Edition erhält mit ThemeWare® 2.1 drei weitere Spalten-Blöcke aus der Pro-Edition:

CMS-Block "Drei Spalten, 2-8-2"

CMS-Block "Drei Spalten, 3-6-3"

CMS-Block "Zwei Spalten (auf Handys getauscht)"

---

Neues in der "Pro-Edition"

Für die Pro-Edition gibt es in ThemeWare® 2.1 ein paar besondere Highlights im Bereich "CMS-Erweiterungen":

• CMS-Block "Hero-Slider (2x)"
• CMS-Block "Hero-Slider (4x)"
• CMS-Block/-Element "Image-Teaser"
• CMS-Element "Image-Slide (Hero-Slider)"

Zudem haben wir diverse Verbesserungen an bestehenden CMS-Blöcken und -Elementen vorgenommen.

Hero-Slider

Die Darstellung des Hero-Sliders im Erlebniswelt-Editor wurde komplett überarbeitet. Durch die neue Slider-Funktion kommt die Darstellung im Editor nun deutlich näher an die Darstellung in der Storefront heran.

NEU: Hero-Slider 2x und 4x hinzugefügt

Alle guten Dinge sind bekanntlich drei, wir haben uns die Nachfragen nach einem 2er und 4er Slider zu Herzen genommen und diese in ThemeWare® integriert.

NEU: Farb-Overlay für Hero-Slides hinzugefügt

Alle "Hero-Slides" haben nun, wie die Teaser-Elemente, ein Farb-Overlay. Dies kannst du bei Bedarf aktivieren.

NEU: Image-Slide (Hero-Slider)

Mit dem "Image-Slide (Hero-Slider)" steht dir nun ein drittes CMS-Element für den Hero-Slider zur Verfügung – für alle, die sich einen Slide ohne Text gewünscht haben.

Call-to-Action-Slide (Hero-Slider)

Das CMS-Element "Call-to-Action-Slide (Hero-Slider)" hat nun eine Konfiguration für die Anzeigedauer des Slides.

Es ist nun möglich den Bild-Anzeigemodus von "contain" auf "cover" zu ändern. Damit einhergehend gibt es Konfigurationsmöglichkeiten für den Breakpoint des Anzeigemodus und die Mindesthöhe im Anzeigemodus "cover".

Zusätzlich zur Overlay-Farbe gibt es nun eine Konfiguration für die "Hintergrundfarbe" vom Text der unterhalb des Bildes und nicht überlagernd (als Overlay) dargestellt wird.

Neu ist auch die Konfiguration ("Anzeigen von" und "Anzeigen bis") für den Anzeige-Zeitraum des Slides.

Der "Call-to-Action-Slide (Hero-Slider) ist bei Bedarf vollständig klickbar.

Text-Slide (Hero-Slider)

Das CMS-Element "Text-Slide (Hero-Slider)" hat nun eine Konfiguration für die Anzeigedauer des Slides.

Es ist nun möglich den Bild-Anzeigemodus von "contain" auf "cover" zu ändern. Damit einhergehend gibt es Konfigurationsmöglichkeiten für den Breakpoint des Anzeigemodus und die Mindesthöhe im Anzeigemodus "cover".

Zusätzlich zur Overlay-Farbe gibt es nun eine Konfiguration für die "Hintergrundfarbe" für Text der unterhalb des Bildes und nicht überlagernd (als Overlay) dargestellt wird.

Neu ist auch die Konfiguration ("Anzeigen von" und "Anzeigen bis") für den Anzeige-Zeitraum des Slides.

Button-Teaser

Der "Button-Teaser" ist bei Bedarf vollständig klickbar.

Call-to-Action

Der "Call-to-Action"-Teaser ist bei Bedarf vollständig klickbar.

Zudem gibt es eine neue Konfiguration für einen Hintergrund-Effekt des Text-Overlays.

NEU: Konfiguration für die Hintergrundfarbe für alle Teaser hinzugefügt

Wir haben eine Konfiguration für die Hintergrundfarbe aller Teaser hinzugefügt. Damit stehen dir künftig noch mehr Gestaltungsmöglichkeiten zur Verfügung.

Darstellung aller Teaser im Anzeigemodus "Standard" verbessert

Die Ausrichtung vom Bild und den Text-Elementen zueinander und innerhalb des CMS-Blocks wurde in allen ThemeWare® Teasern verbessert.

Vorschau vom "Classic-Teaser" verbessert

Die Vorschau vom "Classic-Teaser" im Erlebniswelt-Editor wurde optimiert und kommt nun näher an die Darstellung in der Storefront heran.

Vorschau vom "Modern-Teaser" verbessert

Die Vorschau vom "Modern-Teaser" im Erlebniswelt-Editor wurde optimiert und kommt nun näher an die Darstellung in der Storefront heran.

Vorschau vom "Discount-Banner" verbessert

Die Vorschau vom "Discount-Banner" im Erlebniswelt-Editor wurde optimiert und kommt nun näher an die Darstellung in der Storefront heran.

Vorschau der Spalten-CMS-Blöcke verbessert

Die Vorschau der ThemeWare® Spalten-Blöcke im Erlebniswelt-Editor wurde optimiert und kommt nun deutlich näher an die Darstellung in der Storefront heran. Zudem wirken sich die ThemeWare® Abstandsklassen nun bereits auf die CMS-Vorschau der Spalten-Blöcke im Editor aus (siehe https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen).

NEU: Image-Teaser

Mit ThemeWare® 2.1 gibt es eine neue CMS-Erweiterung (CMS-Block + CMS-Element). Der "Image-Teaser" ergänzt die bestehenden Teaser um eine spannende neue Layout-Möglichkeit. Der "Image-Teaser" ist ein schlichtes aber effektvolles Element mit konfigurierbaren Hover-Effekten.

---

NEU: Kategorie in der Top-Navigation hervorheben

Mit ThemeWare® 2.1 haben wir ein Zusatzfeld zum hervorheben einer Kategorie in der Top-Navigation hinzugefügt.

Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

---

Neue Produkt-Spezifikationen auf Detailseiten

NEU: Konfiguration zum Anzeigen der Lieferzeit auf der Detailseite hinzugefügt

Die Lieferzeit kann nun im Bereich der Produkt-Spezifikationen angezeigt werden.

Tab "Produktseiten" => Bereich "Produkt-Spezifikationen (in der Buybox)" => Lieferzeit anzeigen

NEU: Konfiguration zum Ausblenden der Produktnummer auf der Detailseite hinzugefügt

Die Produktnummer kann nun im Bereich der Produkt-Spezifikationen ausgeblendet werden.

Tab "Produktseiten" => Bereich "Produkt-Spezifikationen (in der Buybox)" => Produktnummer anzeigen

NEU: Produkt-Spezifikationen auf der Detailseite optisch gruppiert

Zur besseren Lesbarkeit wurden die Produkt-Spezifikationen gruppiert und mit kleinen Zwischenräumen versehen.

Tab "Produktseiten" => Bereich "Produkt-Spezifikationen (in der Buybox)" => Abstand (Abschnitte)

---

Neue Lieferinformationen-Labels auf Detailseiten

Die verkaufsfördernden ThemeWare® "Lieferinformationen-Labels" ersetzen (falls konfiguriert) die Standard-Hinweise von Shopware.

Tab "Produktseiten" => Bereich "Lieferinformationen-Labels (in der Buybox)"

NEU: Label "Nicht verfügbar" auf der Detailseite hinzugefügt

Das neue Label "Nicht verfügbar" kann jetzt aktiviert werden.

NEU: Label "Vorbestellung" auf der Detailseite hinzugefügt

Das neue Label "Vorbestellung" kann jetzt aktiviert werden.

NEU: Labels "Lieferzeit" auf der Detailseite hinzugefügt

Die neuen Lieferzeit-Labels ("Lieferzeit (Sofort verfügbar)" bzw. "Lieferzeit (Wiederauffüllung)") können jetzt aktiviert werden.

---

Sonstige Neuigkeiten und Änderungen

NEU: Konfiguration für die allgemeine Linkfarbe hinzugefügt

Die allgemeine Linkfarbe kann nun konfiguriert werden. Dies betrifft diverse Links in der Storefront die keine individuelle Farbe nutzen.

Tab "Layout" => Bereich "Typografie" => Abschnitt "Links" => Linkfarbe

Die Hover-Farbe wird, wie in Bootstrap vorgesehen, ebenfalls aus dieser Farbe generiert.

NEU: Konfiguration für die Breite der "Top-Bar" hinzugefügt

Die Breite der "Top-Bar" kann nun unabhängig von der Header-Breite konfiguriert werden.

Tab "Header" => Bereich "Top-Bar" => Abschnitt "Basis-Header "Header 1" und "Header 2"" => Breite

NEU: Konfiguration für die Breite der "Top-Navigation" hinzugefügt

Die Breite der "Top-Navigation" kann nun unabhängig von der Header-Breite konfiguriert werden.

Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basis-Header "Header 1" und "Header 2"" => Breite

NEU: Konfiguration für die Einrückung im Flyout der Top-Navigation hinzugefügt

Die Einrückung der Unterkategorien im Flyout der Top-Navigation kann konfiguriert werden.

Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration" => Einrückung

Darstellung vom "Alle Cookies akzeptieren"-Button in der Cookie-Konfiguration verbessert

Derzeit ist der "Alle Cookies akzeptieren"-Button in der Cookie-Konfiguration von Shopware 6 kleiner und zu nah am "Speichern"-Button. Wir haben dies mit ThemeWare® korrigiert.

Text-Verbesserungen in der Theme-Konfiguration

Verschiedene Texte in der Theme-Konfiguration wurden verbessert und es wurden neue Hilfe-Texte ergänzt.

Theme JS-Plugins aktualisiert

Wir arbeiten derzeit daran die letzten JS-Plugins auf Vanilla-JS (bzw. plain JS) neu zu schreiben und diese wieder unseren Agentur-Partnern zur Verfügung stellen zu können.

Für diesen Release haben wir das "Full-Width Sticky-Header"-Plugin ("twtFullWidthStickyHeader") neu geschrieben. Der "Full-Width Sticky-Header" funktioniert nun ohne jQuery, zudem wurde ein kleiner Fehler behoben.

Darüber hinaus haben wir bereits umgeschriebene Plugins ("twtAnnouncementBannerPlugin", "twtScrollAnimation", "twtCookiePermission", "twtFloatingWidget" und "twtSlideoutCommunities") nochmals optimiert.

NEU: Weitere CSS-Klassen für Spaltenabstände hinzugefügt

Es gibt neue CSS-Klassen für die mobile Darstellung der Spalten-Blöcke (siehe https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen).

---

Bugfixes

Auswahl der Button-Farbe im "Call-to-Action" korrigiert [Pro-Edition]

Ein Fehler im Dropdown der Farb-Konfiguration vom Button im "Call-to-Action" wurde behoben.

Logo-Breite im mobilen Viewport wird wieder korrekt angewendet

Die Konfiguration der Breite vom Shop-Logo in mobilen Viewports wird wieder korrekt angewendet.

"Medien öffnen"-Button im "Hero-Countdown (Überschrift)" korrigiert [Pro-Edition]

Ein Fehler im CMS-Element "Hero-Countdown (Überschrift)" wurde behoben welcher den "Medien öffnen"-Button gestört hat.

Schriftgröße in Formularfeldern wird wieder korrekt übernommen

Ein Fehler der $input-font-size wurde korrigiert. Diese wird nun wieder korrekt in Formularen übernommen.

Sticky-Funktion vom "Floating-Widget" korrigiert

Ein Fehler im JS-Plugins vom "Floating-Widget" wurde korrigiert. Die Sticky-Funktion funktioniert nun wieder korrekt.

---

One More Thing

Neu: Unterkategorien im Listing

Last but not least präsentieren wir die neue Erweiterung "Unterkategorien im Listing".

Die Erweiterung kann über die Theme-Konfiguration aktiviert werden und stellt auf Kategorie-Seiten "Kacheln" bzw. Teaser für die entsprechenden Unterkategorien dar (sofern die Kategorie Unterkategorien hat). Diese "Kacheln" können Kategorie-Bilder enthalten, können aber auch einfach nur Text-Kacheln oder Buttons sein. Wie gewohnt stehen dir umfangreiche Konfigurationsmöglichkeiten zur Verfügung.

In der Pro-Edition von ThemeWare® erhältst du zusätzlich eine passende CMS-Erweiterung (CMS-Block + CMS-Element) um das Element frei in deinen Kategorie-Layouts positionieren zu können.

---

Hinweise

Bitte prüfe die Konfiguration der "Top-Navigation" nach dem Update

Die "Breite" der Top-Bar sowie der Top-Navigation basierte ursprünglich auf der "Breite" des Headers. Diesbezüglich hat sich in einem früheren Update ein Fehler eingeschlichen wodurch die Top-Navigation stets "Full-width-boxed" war. Dies haben wir nun behoben. Nach dem Update orientiert sich die "Breite" der Top-Navigation wieder an der "Breite" des Headers.

Um dennoch beide Varianten ermöglichen zu können, haben wir für die "Top-Navigation" und die "Top-Bar" eine separate Konfiguration der "Breite" ergänzt. So kannst du deinen Header noch freier an deine Bedürfnisse anpassen.

Header: Tab "Header" => Bereich "Layout" => Abschnitt "Basis-Header "Header 1" and "Header 2"" => Breite

Top-Bar: Tab "Header" => Bereich "Top-Bar" => Abschnitt "Basis-Header "Header 1" und "Header 2"" => Breite

Top-Navigation: Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basis-Header "Header 1" und "Header 2"" => Breite

Bitte prüfe die Konfiguration deiner "Hero-Slider" nach dem Update [Pro-Edition]

• Die Funktion der Breakpoint-Optionen 'none' und 'all' der "Hero-Slides" wurde getauscht. [Pro-Edition]
• Die Hintergrundfarbe von Text (der das Bild nicht überlagert) in "Hero-Slides" hat nun eine eigene Konfiguration. [Pro-Edition]

Veraltete CSS-Klassen entfernt

• Die alten CSS-Klassen twt-custom-cms-image-hover-1, twt-custom-cms-image-hover-2 sowie twt-cms-image-hover-gray-scale wurden in ThemeWare 2.1 entfernt.

---

Schlusswort

Das waren nun alle Informationen zum neusten ThemeWare® Release, wir sind aber noch lange nicht fertig. Freu dich auf viele Ideen, tolle Verbesserungsvorschläge und spannende Features von unserer Roadmap.

Also, Sei gespannt. 🚀

Viele Grüße, Sebastian und das Team von ThemeWare®