ThemeWare® 5.4.0 ist da! 🎉 Das neue Release umfasst folgende Änderungen:
Highlights
- Header: Sticky Top-Navigation, Erlebniswelt-Header und mobiler Header funktionieren jetzt ohne jQuery und wurden verbessert
Änderungen
- Individueller CSS- und JavaScript-Code: Eingabefehler beim
<style>- bzw.<script>-Tag werden jetzt automatisch korrigiert - jQuery: Wird jetzt in Version 3.7.1 geladen, weitere Versionen sind wählbar Feature-Request
- Produkt-Spezifikationen (in der Buybox): Die Hauptkategorie des Produkts lässt sich jetzt verlinkt anzeigen Feature-Request
- Produktseiten: Über dem Preis lässt sich jetzt ein Preis-Label wie "Unser Onlinepreis" anzeigen, auch mit eigenem Text für Angebote Feature-Request
- Shopware Commercial: Verbesserter Button zum Hinzufügen zu Einkaufslisten in der Produkt-Box
- Shopware Commercial: Weitere B2B-Seiten wie Schnellbestellung, Budgets und Organisationseinheiten nutzen jetzt das ThemeWare® CMS-Styling
- Sticky Top-Navigation: Gleitet jetzt weich ein und aus und erscheint erst, wenn die Top-Navigation aus dem Bild gescrollt ist
- Sticky Top-Navigation: Verbesserte Tastaturbedienung, der Fokus bleibt erhalten und fokussierte Elemente werden nicht mehr verdeckt
- Top-Navigation Flyout: Das Kategoriebild lässt sich jetzt ausblenden Feature-Request
- Vorbereitung auf Shopware 6.8: Das Theme erkennt Seiten jetzt über die neue Shopware-Methode
- Bugfix: Angaben in den Angebots- und Einkaufslisten-Details von Shopware Commercial sind jetzt wie im Shopware-Standard ausgerichtet
- Bugfix: Das X-Symbol, z.B. im Such-Button der Flyout-Suche, wird jetzt auch vor der Cookie-Zustimmung angezeigt
- Bugfix: Das Zusatzfeld "Herstellerinformationen" am Hersteller steht jetzt auch in der Cloud-Edition zur Verfügung Cloud
- Bugfix: Der Verlauf am Ende einer langen Top-Navigation im Full-width Sticky-Header sitzt jetzt direkt an der Navigation
- Bugfix: Die Einträge zum Utilities-Paket im Dashboard des ThemeWare® Hubs führen jetzt zu den passenden Anleitungen Pro
- Bugfix: Die Top-Bar im Header 2.1 hat bei voller Breite jetzt gerade Ecken
Hinweise
- jQuery: Bitte prüfe nach dem Update die Einstellung "jQuery laden"
- Vorbereitung auf Shopware 6.8: Body-Klassen
is-ctl-*undis-act-*in eigenem CSS umstellen
Highlights
Header: Sticky Top-Navigation, Erlebniswelt-Header und mobiler Header funktionieren jetzt ohne jQuery und wurden verbessert
ThemeWare® benötigt jQuery nicht mehr. Die Skripte für die Sticky Top-Navigation, den Erlebniswelt-Header und den fixierten Header auf Smartphones laufen jetzt ohne jQuery. Bei neuen Installationen wird jQuery deshalb standardmäßig nicht mehr geladen, das spart Ladezeit. Was das für bestehende Shops bedeutet, findest du unten bei den Hinweisen.
Außerdem wurden die Skripte in gewissen Konfigurationen verbessert:
- Der Seiteninhalt bleibt im Erlebniswelt-Header an seinem Platz, wenn die Sticky Top-Navigation ein- oder ausgeblendet wird.
- Die Sticky Top-Navigation bleibt auch beim sehr langsamen Scrollen ruhig.
- Ankündigungsbanner, USP-Bar und Header schließen im Erlebniswelt-Header pixelgenau aneinander an.
- Die USP-Bar steht im Erlebniswelt-Header immer über dem Header, auch auf Smartphones. Der Erlebniswelt-Header unterstützt nur diese Position.
- Im Erlebniswelt-Header legen sich die Links zum Überspringen bei Fokus über die Seite, statt den Header zu verschieben.
- Ein schließbarer Ankündigungsbanner erscheint sofort beim Laden, der Inhalt darunter springt nicht mehr. Wird er geschlossen, rücken im Erlebniswelt-Header auch Header und Navigation sofort nach.
- Das Suchfeld in der Sticky Top-Navigation sitzt auch bei geöffneter Flyout-Suche mittig.
- Die Skripte laufen auch dann fehlerfrei, wenn eine Erweiterung oder Anpassung Elemente des Headers entfernt hat.
Designbeispiel: Produkte und Kategorien präsentieren
In ThemeWare® hat sich viel getan. Wie du einen Produkt-Slider mit Überlauf und Kategorie-Teaser mit den neuen Designoptionen gestaltest, zeigen wir im Artikel Designbeispiel: Produkte und Kategorien präsentieren.

Produkt-Slider und Kategorie-Teaser im ThemeWare® Showcase-Shop
Änderungen im Detail
Individueller CSS- und JavaScript-Code: Eingabefehler beim <style>- bzw. <script>-Tag werden jetzt automatisch korrigiert
Typische Eingabefehler in den Feldern "Individueller CSS-Code" und "Individueller JavaScript-Code" korrigiert ThemeWare® jetzt automatisch: Ein vergessenes <script>-Tag wird ergänzt, ein überflüssiges <style>-Tag nicht mehr doppelt ausgegeben.
jQuery: Wird jetzt in Version 3.7.1 geladen, weitere Versionen sind wählbar Feature-Request
Auf Basis eines Feature Requests lädt ThemeWare® jQuery jetzt in der aktuellen Version 3.7.1 statt 3.5.1. Du musst nichts tun: Steht "jQuery laden" auf "ja", wird automatisch die neue Version geladen.
Unter Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "jQuery" => "jQuery laden" kannst du die Version jetzt auch selbst wählen:
- "ja (empfohlene Version)": aktuell jQuery 3.7.1
- "ja (jQuery 4.0.0)": die neueste Hauptversion
- "ja (jQuery 3.6.4, Kompatibilität)" und "ja (jQuery 3.5.1, Kompatibilität)": nur, wenn eine Erweiterung eines Drittanbieters eine ältere Version benötigt
Produkt-Spezifikationen (in der Buybox): Die Hauptkategorie des Produkts lässt sich jetzt verlinkt anzeigen Feature-Request
Auf Basis eines Feature Requests kann in den Produkt-Spezifikationen der Buybox jetzt neben Produktnummer und Hersteller auch die Kategorie des Produkts erscheinen, verlinkt auf die Kategorieseite. Angezeigt wird die Hauptkategorie im aktuellen Verkaufskanal, du musst dafür nichts zusätzlich pflegen. Ist keine Hauptkategorie hinterlegt, nutzt Shopware eine zugeordnete Kategorie aus der Navigation.
Du aktivierst die Anzeige unter Tab "Produktseiten" => Bereich "Produkt-Spezifikationen (in der Buybox)" => Abschnitt "Abschnitt: Allgemeine Informationen" => "Kategorie anzeigen". Das Label "Kategorie:" änderst du über den Textbaustein twt.detail.categoryLabel.
Produktseiten: Über dem Preis lässt sich jetzt ein Preis-Label wie "Unser Onlinepreis" anzeigen, auch mit eigenem Text für Angebote Feature-Request
Auf Basis eines Feature Requests kann über dem Preis auf der Produktseite jetzt ein kurzer Text stehen, z.B. "Unser Onlinepreis". Den Text pflegst du über einen Textbaustein für alle Produkte oder über ein Zusatzfeld je Produkt. Für Produkte mit Streichpreis kannst du einen eigenen Text wählen, z.B. "Wintersale", oder das Label nur bei diesen Produkten anzeigen.

Preis-Label aus Textbaustein, eigenem Textbaustein bei Streichpreis und Zusatzfeld
Du findest die Einstellungen unter Tab "Produktseiten" => Bereich "Buybox" => Abschnitt "Preis-Label". Bei Staffelpreisen erscheint kein Preis-Label. Mehr dazu im Artikel Preis-Label.
Shopware Commercial: Verbesserter Button zum Hinzufügen zu Einkaufslisten in der Produkt-Box
Nutzt du Shopware Commercial mit Einkaufslisten, zeigt die Produkt-Box bei einfachen Produkten einen Button zum Hinzufügen zu einer Einkaufsliste anstelle des Merkzettel-Buttons. Der Merkzettel ist dann über das Menü dieses Buttons erreichbar. Der Button sitzt jetzt an derselben Stelle wie der Merkzettel-Button und übernimmt dessen Farben, Größe und Schatten.
Die Position stellst du wie gewohnt beim Merkzettel-Button ein (Kategorieseiten => Produkt-Box => Merkzettel-Button => Position).
Shopware Commercial: Weitere B2B-Seiten wie Schnellbestellung, Budgets und Organisationseinheiten nutzen jetzt das ThemeWare® CMS-Styling
Nutzt du Shopware Commercial, erscheinen jetzt weitere B2B-Seiten im Kundenkonto im gleichen Layout wie die übrigen Account-Seiten. Neu dabei sind unter anderem die Schnellbestellung, die Organisationseinheiten, die Budgets, die Abonnements und die Detailansicht eines Angebots.
Das Styling greift, wenn "ThemeWare® CMS-Styling laden (B2B Components)" aktiv ist (Seiten => Shopware B2B Components => ThemeWare® CMS-Styling laden (B2B Components)).
Sticky Top-Navigation: Gleitet jetzt weich ein und aus und erscheint erst, wenn die Top-Navigation aus dem Bild gescrollt ist
Die Sticky Top-Navigation gleitet jetzt weicher herein und wieder heraus. Sie erscheint erst, wenn die Top-Navigation ganz aus dem Bild gescrollt ist, so ist nie eine doppelte Navigation zu sehen. Beim Hochscrollen geht sie nahtlos in die Top-Navigation über.
Solange die Maus auf der Navigation oder einem geöffneten Flyout liegt oder du die Navigation mit der Tastatur bedienst, bleibt sie sichtbar. Ist auf dem Gerät "Bewegung reduzieren" aktiviert, entfallen die Animationen.
Die Einstellungen findest du unter Tab "Header" => Bereich "Sticky Top-Navigation (Basis-Header: 'Header 1' und 'Header 2')" => Abschnitt "Basiskonfiguration". Mit einer größeren "Scrolltiefe" erscheint die Sticky Top-Navigation später.
Sticky Top-Navigation: Verbesserte Tastaturbedienung, der Fokus bleibt erhalten und fokussierte Elemente werden nicht mehr verdeckt
Wer den Shop mit der Tastatur bedient, behält jetzt den Fokus, wenn der Warenkorb beim Scrollen in die Sticky Top-Navigation wandert. Beim Navigieren mit der Tab-Taste bleiben fokussierte Elemente sichtbar und landen nicht mehr unter der fixierten Navigation.
Top-Navigation Flyout: Das Kategoriebild lässt sich jetzt ausblenden Feature-Request
Auf Basis eines Feature Requests lässt sich das Kategoriebild im Flyout der Top-Navigation jetzt ausblenden. Hat eine Kategorie ein Anzeigebild, erscheint es im Flyout neben den Unterkategorien. Ist es ausgeblendet, nutzen die Unterkategorien die volle Breite des Flyouts.
Du stellst das unter Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration" => "Kategoriebild anzeigen" ein. Die Einstellung wirkt bei "ThemeWare® Flyout" und bei "ThemeWare® Flyout mit Teasern", wenn die Kategorie keine eigenen Teaser hat.
Vorbereitung auf Shopware 6.8: Das Theme erkennt Seiten jetzt über die neue Shopware-Methode
Shopware entfernt mit 6.8 die Twig-Variablen controllerName und controllerAction, Ersatz ist activeRoute. ThemeWare® übernimmt die Änderung bereits, im Shop ändert sich nichts.
Bugfix: Angaben in den Angebots- und Einkaufslisten-Details von Shopware Commercial sind jetzt wie im Shopware-Standard ausgerichtet
In der Detailansicht eines Angebots und einer Einkaufsliste stehen Bezeichnungen wie "Erstellt am" jetzt linksbündig und fett, wie im Shopware-Standard.
Bugfix: Das X-Symbol, z.B. im Such-Button der Flyout-Suche, wird jetzt auch vor der Cookie-Zustimmung angezeigt
Solange Besucher den Cookies noch nicht zugestimmt hatten, fehlte das X-Symbol an mehreren Stellen, z.B. im geöffneten Such-Button der Flyout-Suche. Es wird jetzt immer angezeigt.
Bugfix: Das Zusatzfeld "Herstellerinformationen" am Hersteller steht jetzt auch in der Cloud-Edition zur Verfügung Cloud
In der Cloud-Edition fehlte am Hersteller das Zusatzfeld "Herstellerinformationen" für die GPSR-Angaben, angelegt wurde nur "Verantwortliche Person". Mit dem Update steht es zur Verfügung. Bis dahin ließen sich die Herstellerinformationen über das gleichnamige Zusatzfeld am Produkt pflegen.
Bugfix: Der Verlauf am Ende einer langen Top-Navigation im Full-width Sticky-Header sitzt jetzt direkt an der Navigation
Passt die Top-Navigation im "Full-width Sticky-Header" nicht ganz in die Zeile, blendet ein Verlauf ihr Ende aus. Dieser Verlauf lag bisher am rechten Rand des gesamten Headers, auch über Top-Bar und USP-Bar. Er sitzt jetzt direkt am Ende der Top-Navigation.
Bugfix: Die Einträge zum Utilities-Paket im Dashboard des ThemeWare® Hubs führen jetzt zu den passenden Anleitungen Pro
Im Dashboard des ThemeWare® Hubs listet die Aufgabe "Kostenloses ThemeWare® Utilities-Paket holen" die Inhalte des Pakets auf. In gewissen Fällen führte ein Klick auf diese Einträge nur zur Startseite der Administration. Import-Plugin, Erlebniswelt-Grafiken, Logo-Set sowie Customizing Plugin & App führen jetzt zum passenden Artikel in der Wissensdatenbank bzw. im Handbuch. Die PDF- und Schritt-für-Schritt-Anleitungen sind Teil des Pakets und deshalb nicht verlinkt.
Bugfix: Die Top-Bar im Header 2.1 hat bei voller Breite jetzt gerade Ecken
Die Top-Bar im "Header 2.1" bekam die abgerundeten Ecken auch dann, wenn sie über die volle Breite läuft. Die Rundung gibt es jetzt nur noch im Grundlayout "Boxed".
Hinweise
jQuery: Bitte prüfe nach dem Update die Einstellung "jQuery laden"
ThemeWare® benötigt jQuery nicht mehr. Bei neuen Installationen wird jQuery deshalb standardmäßig nicht mehr geladen, das spart Ladezeit.
- Pro-Edition: Bestehende Shops laden jQuery weiterhin. Hast du die Einstellung nie geändert, wird sie beim Update automatisch auf "ja (empfohlene Version)" gesetzt.
- Cloud-Edition: Hast du die Einstellung nie geändert, wird jQuery nach dem Update nicht mehr geladen.
Prüfe, ob eine Erweiterung eines Drittanbieters in deinem Shop jQuery benötigt, und aktiviere es in diesem Fall unter Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "jQuery" => "jQuery laden". Benötigt keine Erweiterung jQuery, kannst du es auf "nein" stellen und sparst Ladezeit.
Hinweis: Verhalten sich die "Sticky Top-Navigation", der fixierte Header auf Smartphones oder der "Erlebniswelt-Header" nach dem Update anders als vorher, stelle unter Tab "Weiteres" => Bereich "Kompatibilität (HC-Architecture®)" => Abschnitt "Header" => "Header-Skripte (Sticky-Navigation, Erlebniswelt-Header)" auf "ThemeWare® (jQuery-Version, veraltet)" um. Damit wird die bisherige Version der Skripte geladen, jQuery wird dafür automatisch aktiviert. Sende uns in diesem Fall bitte einen Verbesserungsvorschlag mit einer kurzen Beschreibung, damit wir das Verhalten korrigieren können.
Vorbereitung auf Shopware 6.8: Body-Klassen is-ctl-* und is-act-* in eigenem CSS umstellen
Mit 6.8 entfallen auch die Body-Klassen is-ctl-* und is-act-*. Falls du eigenes CSS damit nutzt, stelle es auf is-active-route-* um. Shopware gibt diese Klassen schon heute aus.
/* bisher */
.is-ctl-checkout.is-act-cartpage { }
/* neu */
.is-active-route-frontend-checkout-cart-page { }