ThemeWare® 5.1.0

ThemeWare® 5.1.0 ist da! 🎉 Das neue Release umfasst folgende Neuerungen und Änderungen:

Highlights

• Neue Bild-Animationen für die Hero-Slides hinzugefügt Pro
• Neue Stile für das Flyout und die Dropdown-Navigation der Top-Navigation hinzugefügt
• Neuer Tab "Informationen zur Produktsicherheit" für die GPSR-Angaben Feature-Request
• Neues Feature "Config-Finder" für die Suche in der Theme-Konfiguration hinzugefügt Pro
• Neues Feature "Lieferinformationen in der Produkt-Box" hinzugefügt Feature-Request
• Neues Feature "Produkt-Slider mit Überlauf" hinzugefügt
• Neues Feature "Produkt-Symbole (Hinweisbilder)" hinzugefügt Feature-Request
• Neues Feature "Produktsicherheit (GPSR)" hinzugefügt Feature-Request
• Neues Feature "Versand-Link" hinzugefügt
• Eigenschaften im "Produktbeschreibung & Bewertungen (Akkordeon)" hinzugefügt Pro
• Hersteller im "Produktbeschreibung & Bewertungen (Akkordeon)" hinzugefügt Pro
• Zusatzfeld "Herstellerinformationen (GPSR)" hinzugefügt Feature-Request
• Zusatzfeld "Verantwortliche Person (GPSR)" hinzugefügt Feature-Request

Änderungen

• Kompatibilität mit Shopware 6.7.13.0 verbessert
• Neue Animationen für das Flyout und die Dropdown-Navigation hinzugefügt
• Neue Darstellungs-Optionen für die Bewertung in der Produkt-Box hinzugefügt
• Neue Hintergrundfarben für die Menüpunkte in Flyout und Dropdown-Navigation hinzugefügt
• Neue Konfiguration "Anordnung" für die Mengenauswahl und den Kaufen-Button hinzugefügt
• Neue Konfiguration "Anordnung" für die Produkt-Bewertung in der Buybox hinzugefügt
• Neue Konfiguration "Beschreibungstext" für die Tabs Datenblätter, Downloads, Eigenschaften und Videos hinzugefügt
• Neue Konfiguration "Darstellungsart" für den Merkzettel-Button auf Produktseiten hinzugefügt
• Neue Konfiguration für den HTML-Tag der Beschreibungs-Überschrift hinzugefügt Pro Feature-Request
• Neue Konfiguration "Link-Beschreibung" für die vollflächige Verlinkung der CMS-Elemente hinzugefügt Pro
• Neue Konfiguration "Platzierung" für die Produkt-Bewertung auf Produktseiten hinzugefügt Feature-Request
• Neue Konfiguration "Produkt-Bewertung anzeigen" für die Buybox auf Produktseiten hinzugefügt Feature-Request
• Neue Konfiguration "Schlagschatten" für das Flyout und die Dropdown-Navigation hinzugefügt
• Neue Konfiguration "Spalten" für das Flyout mit Karten hinzugefügt
• Neue Option "Abschnitte geöffnet lassen" im CMS-Element "Produktbeschreibung & Bewertungen (Akkordeon)" hinzugefügt Pro Feature-Request
• Neue Option "Auf Mobilgeräten als Liste" im CMS-Element "Produktbeschreibung & Bewertungen (Akkordeon)" hinzugefügt Pro Feature-Request
• Neue Position "unten links" für den Merkzettel-Button auf dem Produktbild hinzugefügt
• Neue Positionen für die Bewertung in der Produkt-Box hinzugefügt
• Neue Positionswahl für den Quickview-Button auf dem Produktbild hinzugefügt
• Neue Positionswahl für Produktseiten-Abschnitte hinzugefügt
• Neue Slots über und unter dem Produktnamen in der Produkt-Box hinzugefügt
• Neuer "Button-Stil" im CMS-Element "Produktbeschreibung & Bewertungen (Akkordeon)" hinzugefügt Pro
• Neuer Glaseffekt für das Panel des Flyouts und der Dropdown-Navigation hinzugefügt
• Neuer Hover-Effekt für die Produkt-Badges, die Bewertung, den Merkzettel- und den Quickview-Button auf dem Produktbild hinzugefügt
• Neuer Hover-Effekt "slide in" für die Pfeil-Navigation der Slider hinzugefügt
• Neuer Platzhalter "%manufacturer%" für die Überschriften des Hersteller- und GPSR-Tabs hinzugefügt
• Neuer "Stern-Stil" für die Bewertungssterne hinzugefügt Feature-Request
• Neuer Stil "Kompakt" für die Produkt-Spezifikationen in der Buybox hinzugefügt Feature-Request
• Abstände der Elemente in der Buybox vereinheitlicht
• Abstände von Badges, Merkzettel- und Quickview-Button auf dem Produktbild vereinheitlicht
• Der Stil "Liste in Spalten (Shopware 5)" wirkt jetzt nur noch im Flyout
• Die Animation des Flyouts wirkt jetzt auch in der Dropdown-Navigation
• Eigenschaften-Konfiguration im neuen Bereich "Eigenschaften-Tabelle (in Tabs)" gebündelt
• Fokus-Ringe für die Tastaturbedienung verbessert Feature-Request
• Hersteller-Konfiguration im neuen Bereich "Hersteller (in Tabs)" gebündelt
• In der Listenansicht ist das Produktbild wieder verlinkt Feature-Request
• Konfiguration "Zwischenüberschrift anzeigen" in den Bereich "Eigenschaften-Tabelle (in Tabs)" verschoben
• Lieferinformationen auf Produktseiten verbessert
• Maximale Höhe hat im Widget "Auszeichnungen, Siegel oder Zertifikate" jetzt Vorrang vor der maximalen Breite
• Modal, Offcanvas, Cookie-Hinweis und Fullscreen-Suche berücksichtigen jetzt die Systemeinstellung "Transparenz reduzieren"
• Produkt-Box in der Listenansicht überarbeitet: Produktbild, Badges und Buttons sind jetzt einheitlich ausgerichtet
• Feedback, News und Links im ThemeWare® Hub verbessert
• Performance der Sticky-Top-Navigation verbessert
• Bugfix: Animationen von CMS-Blöcken werden in Modals nicht mehr abgespielt
• Bugfix: CMS-Elemente werden nur noch vollflächig verlinkt, wenn eine URL hinterlegt ist Pro
• Bugfix: Der "Benutzerdefinierter Inhalt" wird nicht mehr angezeigt, wenn das Zusatzfeld leer ist Pro
• Bugfix: Die Sticky-Top-Navigation blendet sich jetzt genau dann ein, wenn die Navigation den oberen Bildschirmrand erreicht
• Bugfix: Die Sticky-Top-Navigation löst sich wieder, wenn das Fenster unter die eingestellte Mindestbreite verkleinert wird
• Bugfix: Die Sticky-Top-Navigation reserviert nach dem Ändern der Fenstergröße wieder die richtige Höhe
• Bugfix: Die Sticky-Top-Navigation verschiebt den Seiteninhalt beim Ein- und Ausblenden nicht mehr
• Bugfix: Die Systemeinstellung "Bewegung reduzieren" schaltet jetzt auch die Animationen der CMS-Blöcke und des Untermenüs ab
• Bugfix: Doppelte Block-Namen in der Konfiguration einiger CMS-Elemente korrigiert Pro
• Bugfix: Falscher Titel-Fallback und fehlende deutsche Hilfetexte bei Zusatzfeldern korrigiert
• Bugfix: Hilfe-Text der Headline-Konfigurationen in diversen CMS-Elementen korrigiert Pro
• Bugfix: Merkzettel- und Quickview-Button sind in der Listenansicht wieder rund
• Bugfix: Sticky-Bereiche hängen auf Mobilgeräten nicht mehr fest
• Bugfix: Varianten und andere Buttons reagieren auf Touch-Geräten wieder beim ersten Tippen

Hinweise

• Die Dropdown-Navigation nutzt jetzt die Farben der Untermenüs statt der Farben der Top-Navigation
• Konfigurations-Key des Flyout-Stils geändert
• Konfiguration und Template-Dateien der Lieferinformationen auf Produktseiten aktualisiert
• Konfiguration und Template-Dateien von Tabs auf Produktseiten aktualisiert
• Template-Struktur der CMS-Teaser-Elemente vereinheitlicht Pro
• Zwischenüberschriften und Untertitel auf Produktseiten nutzen jetzt einheitliche CSS-Klassen

Highlights

Neue Bild-Animationen für die Hero-Slides hinzugefügt Pro

Die Slides des "Hero-Sliders" können ihr Bild jetzt dezent animieren und wirken dadurch deutlich lebendiger. Über die neue Konfiguration "Animation (Bild)" wählst du pro Slide zwischen "Zoom" (das Bild wird langsam größer), dem klassischen Ken-Burns-Effekt (das Bild wird langsam größer und verschiebt sich dabei leicht – wahlweise "Ken Burns (unten links)" oder "Ken Burns (oben rechts)") und "Parallax (bei Mausbewegung)" (das Bild folgt dezent der Mausbewegung). Die Animation startet bei jedem Slide-Wechsel neu.

Die Konfiguration steht in allen drei Slide-Elementen zur Verfügung und wird im Anzeigemodus "Cover" angewendet. Der Parallax-Effekt ist auf Touch-Geräten deaktiviert; die Betriebssystem-Einstellung "Bewegung reduzieren" wird bei allen Bild-Animationen respektiert.

Neue Stile für das Flyout und die Dropdown-Navigation der Top-Navigation hinzugefügt

Die Untermenüs (Flyouts) deiner Hauptnavigation lassen sich jetzt deutlich freier gestalten. Das Flyout bekommt den neuen Stil "Buttons": Jede Kategorie erhält eine eigene Fläche mit abgerundeten Ecken statt einer schlichten Textzeile. Die bisherigen Stile bleiben erhalten und heißen jetzt "Liste (Shopware 6)", "Liste" und "Liste in Spalten (Shopware 5)".

Auch die Dropdown-Navigation hat eine eigene Stil-Auswahl bekommen: "Liste" zeigt reinen Text ohne Flächen und ohne Trennlinien, "Buttons (kompakt)" gibt jedem Menüpunkt eine Fläche über die volle Breite der Karte, und "Buttons" rückt die Flächen mit abgerundeten Ecken in die Karte ein.

Beide Stil-Auswahlen sind dabei in den neuen Abschnitt "Design" gewandert und heißen dort schlicht "Flyout" und "Dropdown-Navigation":

Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Design" => Konfigurationen "Flyout" und "Dropdown-Navigation"

Dein bisheriger Wert wird beim Update automatisch übernommen (Pro-Edition); die bisherige Konfiguration "Stil des Flyouts" findest du zum Nachschlagen im Tab "Weiteres" => Bereich "Veraltet".

Neuer Tab "Informationen zur Produktsicherheit" für die GPSR-Angaben Feature-Request

Die GPSR-Angaben (Herstellerinformationen und verantwortliche Person) können jetzt optional in einem eigenen Tab "Informationen zur Produktsicherheit" auf der Produktseite dargestellt werden.

Tab "Produktseiten" => Bereich "GPSR – Produktsicherheit (in Tabs)" => Konfiguration "Produktsicherheit (GPSR) anzeigen" => Option "in separatem Tab anzeigen"

Alternativ können sie in den Hersteller-Tab oder die Produktbeschreibung integriert werden.

Neues Feature "Config-Finder" für die Suche in der Theme-Konfiguration hinzugefügt Pro

Mit ThemeWare® 5.1.0 sind über 50 weitere Konfigurationen dazugekommen. Damit du in dieser Fülle weiterhin sofort findest, wonach du suchst, haben wir unseren Config-Finder dorthin gebracht, wo er am meisten Sinn ergibt: direkt in den Theme-Manager – also genau an die Stelle, an der du die Einstellung anschließend auch vornimmst.

An dieser Suche arbeiten wir schon seit einigen Monaten. Wir haben sie bewusst hinten angestellt, bis der ThemeWare® Hub und der Backup-Manager fertig waren – erst mit diesen beiden im Rücken ergibt sie das Bild, das wir im Kopf hatten: Einstellungen finden, ändern und sichern, alles an einer Stelle. Mit ThemeWare® 5.1.0 war der richtige Zeitpunkt gekommen. Die Feldsuchmaschine im Browser bleibt dir daneben natürlich erhalten.

Ein Klick auf "Config-Finder" oben rechts im Theme-Manager öffnet das Suchfeld. Während du tippst, blendet ThemeWare® alles aus, was nicht passt: Es bleiben nur die Karten und Felder stehen, die zu deinem Suchbegriff gehören, und Reiter ohne Treffer verschwinden aus der Leiste. Hinter jedem verbleibenden Reiter steht, wie viele Treffer dort liegen. Du siehst also auf einen Blick, wo die gesuchte Einstellung sitzt – und kannst sie sofort ändern.

Gesucht wird sowohl in den Bezeichnungen der Einstellungen als auch in ihren technischen Namen (zum Beispiel twt-header-type) – damit findest du auch wieder, was in der Dokumentation, im Changelog oder in einer Support-Antwort erwähnt wird. Ein Treffer auf einem Kartentitel zeigt die komplette Karte: Eine Suche nach "Header" bringt dich also zum ganzen Bereich statt zu einem einzelnen Feld. Mehrere Wörter grenzen weiter ein, ab zwei Zeichen geht es los, und mit Esc schließt du das Suchfeld wieder.

Neues Feature "Lieferinformationen in der Produkt-Box" hinzugefügt Feature-Request

"Sofort verfügbar, Lieferzeit: 1-3 Tage" – diese Info stand bisher nur auf der Produktseite. Jetzt kannst du sie auch in der Produkt-Box anzeigen lassen, direkt über dem Preis. Deine Kunden sehen also schon im Listing, ob ein Produkt sofort lieferbar ist, ausverkauft oder erst vorbestellbar – und müssen dafür nicht mehr jedes Produkt einzeln öffnen.

Das Aussehen wählst du über vier Darstellungsarten: "Text" ist die schlichte Zeile mit farbigem Punkt, "Label" stellt sie auf eine passend eingefärbte Fläche, "Badge" macht daraus eine Pille im Stil deiner Produkt-Badges, und "Chip" zeigt nur einen farbigen Punkt, hinter dem beim Überfahren mit der Maus der Text hervorfährt.

Standardmäßig steht die Produkt-Box auf "wie Produktseite" – du stellst die Optik also einmal ein und beide Bereiche passen automatisch zusammen. Wer möchte, kann die Produkt-Box aber auch abweichend gestalten.

Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Lieferinformation"

Vielen Dank für diesen Vorschlag.

Neues Feature "Produkt-Slider mit Überlauf" hinzugefügt

Bisher endete ein Produkt-Slider hart an der Kante seines Containers – man sah nicht, ob dahinter noch etwas kommt. Jetzt kannst du die Nachbarprodukte angeschnitten anzeigen lassen. Das signalisiert deinen Kunden auf den ersten Blick, dass es weitergeht, und lädt zum Weiterblättern ein.

Über die "Darstellungsart" wählst du zwischen "Angeschnitten" (die Nachbarprodukte lugen innerhalb des Containers hervor), "Überlaufend" (sie ragen über den Container hinaus) und beidem kombiniert. Wie breit der Anschnitt ist, legst du getrennt für Desktop und Mobilgeräte fest. Auf Wunsch werden die angeschnittenen Produkte abgeblendet dargestellt, damit der Blick auf den vollständig sichtbaren Produkten bleibt.

Du musst dich dabei nicht für den ganzen Shop festlegen: Über eine CSS-Klasse am CMS-Block lässt du einzelne Produkt-Slider abweichend darstellen – auch andersherum, also einen einzelnen Slider im Shopware-Standard belassen, obwohl global eine Darstellungsart aktiv ist.

Tab "Erlebniswelten" => Bereich "Produkt-Slider (Kategorie 'Commerce')" => Abschnitt "Design"

Neues Feature "Produkt-Symbole (Hinweisbilder)" hinzugefügt Feature-Request

Mit den neuen "Produkt-Symbolen" zeigst du Siegel, Pflegehinweise, Zertifikate & Co. als kleine Symbole direkt am Produkt. Gepflegt werden die Symbole auf zwei Wegen – einzeln oder kombiniert: zentral über Eigenschaften mit Bild (aktiviere dazu an der Eigenschaften-Gruppe das neue Zusatzfeld "Als Produkt-Symbole anzeigen" und wähle deine Bilder) oder individuell über drei Zusatzfelder im jeweiligen Produkt ("Symbol 1–3", optional mit eigenem Titel).

Die Position wählst du über die neue Konfiguration "Produkt-Symbole anzeigen": unter den Produktbildern (Galerie), über oder unter den Produkt-Spezifikationen (Buybox), in der Beschreibung, im Eigenschaften-Tab oder in einem separaten Tab "Symbole". Der "Stil" ("Icons (nebeneinander)", "Icon mit Text" oder "Icon-Liste") passt sich mit "Standard (empfohlen)" automatisch der gewählten Position an. Optional ergänzt du einen Beschreibungstext (aus Textbaustein und/oder Zusatzfeld) und eine Zwischenüberschrift.

Tab "Produktseiten" => Bereich "Produkt-Symbole" sowie Bereich "Tab 'Symbole'"

Vielen Dank für diesen Vorschlag.

Neues Feature "Produktsicherheit (GPSR)" hinzugefügt Feature-Request

Mit ThemeWare® 5.1.0 kannst du die nach der EU-Produktsicherheitsverordnung (GPSR) erforderlichen Angaben direkt im Theme pflegen und ausgeben – ganz ohne zusätzliches Plugin. Dafür stehen zwei neue Zusatzfelder ("Herstellerinformationen" und "Verantwortliche Person") bereit, die sowohl am Hersteller als auch am Produkt hinterlegt werden können. Die Angaben lassen sich flexibel positionieren: in einem eigenen Tab "Informationen zur Produktsicherheit", im Hersteller-Tab oder in der Produktbeschreibung. Die Details zu den einzelnen Bausteinen findest du in den folgenden Abschnitten.

Tab "Produktseiten" => Bereich "GPSR – Produktsicherheit (in Tabs)" => Konfiguration "Produktsicherheit (GPSR) anzeigen" => Option "in der Beschreibung anzeigen"

Vielen Dank für diesen Vorschlag.

Neues Feature "Versand-Link" hinzugefügt

Unterhalb des Kaufen-Buttons lässt sich jetzt ein Versand-Link einblenden. Ein Klick öffnet die in deinem Shop hinterlegte Versand- und Zahlungsseite als Overlay – der Kunde bleibt also auf der Produktseite.

Den Text formulierst du frei über den Textbaustein twt.detail.shippingLink, voreingestellt ist "Kostenloser Versand ab 50 €". Bei Produkten, die als versandkostenfrei gekennzeichnet sind, wird der Link automatisch ausgeblendet – dort steht ohnehin schon das Label "Versandkostenfrei".

Tab "Produktseiten" => Bereich "Buybox" => Abschnitt "Versand-Link"

Eigenschaften im "Produktbeschreibung & Bewertungen (Akkordeon)" hinzugefügt Pro

Das CMS-Element "Produktbeschreibung & Bewertungen (Akkordeon)" kann jetzt auch den Bereich "Eigenschaften" anzeigen. Die Sektion lässt sich in der Element-Konfiguration aktivieren und zeigt die Eigenschaften-Tabelle des Produkts als eigenen Abschnitt. Voraussetzung ist, dass die Eigenschaften in der Theme-Konfiguration als eigener Tab geführt werden – andernfalls erscheinen sie theme-gesteuert in der Beschreibung und der Schalter hat keine Wirkung.

Hersteller im "Produktbeschreibung & Bewertungen (Akkordeon)" hinzugefügt Pro

Das CMS-Element "Produktbeschreibung & Bewertungen (Akkordeon)" kann jetzt auch den Bereich "Hersteller" anzeigen. Die Sektion lässt sich in der Element-Konfiguration aktivieren und zeigt die gleichen Inhalte wie der Hersteller-Tab – inklusive der neuen GPSR-Informationen.

Zusatzfeld "Herstellerinformationen (GPSR)" hinzugefügt Feature-Request

Mit dem neuen Zusatzfeld "Herstellerinformationen" können die nach der EU-Produktsicherheitsverordnung (GPSR) erforderlichen Herstellerangaben gepflegt werden: Name bzw. Handelsname, ladungsfähige Postanschrift und eine elektronische Kontaktadresse.

Das Zusatzfeld steht am Hersteller sowie am Produkt zur Verfügung – ein am Produkt gepflegter Wert überschreibt dabei den Wert des Herstellers. Die Anzeige erfolgt je nach Konfiguration im Tab "Beschreibung", im Hersteller-Tab oder im neuen GPSR-Tab und kann in der Theme-Konfiguration aktiviert werden.

Hinweis: Die EU-Produktsicherheitsverordnung (GPSR) verpflichtet Händler, Angaben zum Hersteller und zur verantwortlichen Person in der EU direkt beim Produkt anzuzeigen. Viele von euch haben sich gewünscht, diese Angaben ohne zusätzliches Plugin direkt mit ThemeWare® pflegen und ausgeben zu können – diesem Wunsch kommen wir mit diesem Release nach. Wer bereits ein spezialisiertes GPSR-Plugin im Einsatz hat, kann dieses selbstverständlich weiterhin nutzen – die ThemeWare®-Anzeige bleibt dann einfach deaktiviert.

Zusatzfeld "Verantwortliche Person (GPSR)" hinzugefügt Feature-Request

Mit dem neuen Zusatzfeld "Verantwortliche Person" können die Angaben zur verantwortlichen Person in der EU (GPSR) gepflegt werden: Name, ladungsfähige Postanschrift und eine elektronische Kontaktadresse.

Auch dieses Zusatzfeld steht am Hersteller sowie am Produkt zur Verfügung – ein am Produkt gepflegter Wert überschreibt dabei den Wert des Herstellers. Die Anzeige erfolgt je nach Konfiguration im Tab "Beschreibung", im Hersteller-Tab oder im neuen GPSR-Tab und kann in der Theme-Konfiguration aktiviert werden.

Änderungen im Detail

Alle Konfigurationen, die mit diesem Update dazugekommen sind, erkennst du im Theme-Manager an einem blauen "New"-Badge neben der Bezeichnung. Pro

Neue Animationen für das Flyout und die Dropdown-Navigation hinzugefügt

Statt bisher drei stehen sechs Animationen zur Wahl – "Einblenden", "Einblenden von unten", "Einblenden von oben", "Federn von unten", "Federn von oben" sowie "Aufklappen (3D)". Wer es ruhig mag, wählt weiterhin "keine Animation".

Die Bewegungen wurden dabei neu aufgebaut: Sie sind kürzer und ruhiger als zuvor, auch wenn zügig zwischen den Menüpunkten gewechselt wird.

Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration" => Konfiguration "Animation"

Die Einstellung gilt für das Flyout und die Dropdown-Navigation gleichermaßen. Ist im Betriebssystem "Bewegung reduzieren" aktiviert, werden die Animationen automatisch abgeschaltet.

Neue Darstellungs-Optionen für die Bewertung in der Produkt-Box hinzugefügt

Bewertungen sind eines der stärksten Kaufargumente – und du bestimmst jetzt, wie sie in deinen Produkt-Boxen aussehen: als klassische Sterne, elegant mit feinen Linien gerahmt (dekoriert) oder als dezente, kompakte Zahl mit Stern für einen aufgeräumten, modernen Auftritt.

Liegt die Bewertung auf dem Produktbild, entscheidest du zusätzlich, ob sie in einem weißen Kästchen sitzt oder ganz reduziert direkt auf dem Bild liegt. So machst du das Vertrauen deiner Kundschaft schon in der Übersicht sichtbar – im Stil, den du dir wünschst.

Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Produkt-Bewertung"

Neue Hintergrundfarben für die Menüpunkte in Flyout und Dropdown-Navigation hinzugefügt

Die Flächen der einzelnen Menüpunkte lassen sich jetzt eigenständig einfärben – für den Ruhezustand, den Hover und die aktive Kategorie. Flyout und Dropdown-Navigation greifen auf dieselben Farben zu und sehen dadurch auch dann gleich aus, wenn du beide Varianten parallel einsetzt.

Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Farbkonfiguration" => Konfigurationen "Hintergrundfarbe (Menüpunkte)", "Hintergrundfarbe (Menüpunkte) @hover" und "Hintergrundfarbe (Menüpunkte) @active"

Im Flyout werden die Farben im Stil "Buttons" angewendet, in der Dropdown-Navigation in den Stilen "Buttons (kompakt)" und "Buttons".

Neue Konfiguration "Anordnung" für die Mengenauswahl und den Kaufen-Button hinzugefügt

Mengenauswahl und Kaufen-Button stehen bei Shopware nebeneinander in einer Zeile. Mit der neuen Konfiguration "Anordnung" kannst du beides stattdessen untereinander setzen: Der Kaufen-Button nutzt dann die volle Breite, die Mengenauswahl steht darüber und bleibt so schmal, wie sie sein muss.

Das lohnt sich vor allem bei langen Button-Texten oder wenn du eine Verpackungseinheit anzeigst – nebeneinander wird es dort schnell eng. Express-Kauf-Buttons, die andere Erweiterungen unterhalb ergänzen (zum Beispiel PayPal oder Amazon Pay), schließen in dieser Anordnung bündig an.

Tab "Produktseiten" => Bereich "Buybox" => Abschnitt "Buy-Widget (Mengenauswahl und Kaufen-Button)"

Neue Konfiguration "Anordnung" für die Produkt-Bewertung in der Buybox hinzugefügt

Die Bewertungssterne und der Link zu den Bewertungen stehen bei Shopware untereinander. Mit der neuen Konfiguration "Anordnung" setzt du beides nebeneinander in eine Zeile – das ist die Voreinstellung in ThemeWare® und spart Höhe in der Buybox.

Reicht der Platz nicht aus, etwa in einer schmalen Buybox oder auf dem Smartphone, rutscht der Link automatisch unter die Sterne. Die Sterne selbst bleiben dabei immer vollständig in einer Reihe.

Tab "Produktseiten" => Bereich "Produkt-Bewertung (in der Buybox oder am Produktnamen)" => Abschnitt "Basiskonfiguration"

Neue Konfiguration "Beschreibungstext" für die Tabs Datenblätter, Downloads, Eigenschaften und Videos hinzugefügt

Über die neue Konfiguration "Beschreibungstext" blendest du einen einleitenden Text über den Inhalten dieser Bereiche ein. Bei den Produktvideos und Datenblättern wählst du dabei, woher der Text kommt: aus einem Textbaustein, aus dem Zusatzfeld im jeweiligen Produkt oder aus beidem – Standard bleibt das Zusatzfeld, ohne Umstellung ändert sich also nichts. Bei den Eigenschaften und Downloads stammt der Text aus einem Textbaustein und ist standardmäßig ausgeblendet.

Du findest die neuen Konfigurationen im Tab "Produktseiten" – bei den Produktvideos im Bereich "Produktvideos (in Tabs)", bei den Datenblättern im Bereich "Datenblätter (in Tabs)", bei den Eigenschaften im Bereich "Eigenschaften-Tabelle (in Tabs)" und bei den Downloads im Bereich "Tab 'Beschreibung'" => Abschnitt "Downloads".

Neue Konfiguration "Darstellungsart" für den Merkzettel-Button auf Produktseiten hinzugefügt

Shopware zeigt "Auf den Merkzettel" unterhalb des Kaufen-Buttons als kleinen Link mit Herz-Symbol. Mit der neuen Konfiguration "Darstellungsart" wird daraus auf Wunsch ein richtiger Button – gefüllt ("Button") oder mit Rahmen ("Button (Outline)"). Die Darstellungsart "Link (Standard)" lässt alles wie bisher.

In welcher Farbe der Button erscheint, legst du in der zweiten Konfiguration "Buttonfarbe" fest: "Hell" oder "Sekundär". Beide Farbwerte stellst du im Tab "Layout" => Bereich "Buttons" => Abschnitt "Farbkonfiguration" ein.

Der Button ist dabei immer nur so breit wie seine Beschriftung – die Kauffläche darüber bleibt damit die auffälligste Stelle in der Buybox.

Tab "Produktseiten" => Bereich "Buybox" => Abschnitt "Merkzettel-Button ('Auf den Merkzettel')"

Neue Konfiguration für den HTML-Tag der Beschreibungs-Überschrift hinzugefügt Pro Feature-Request

Im CMS-Element "Produktbeschreibung & Bewertungen (Akkordeon)" kannst du jetzt die Überschriften-Ebene (HTML-Tag) des Beschreibungstitels festlegen. Über die neue Konfiguration "HTML-Tag" wählst du zwischen einem Absatz (P-Tag) und den Überschriften-Ebenen h1 bis h6 – standardmäßig h2, passend zur klaren Überschriften-Hierarchie der Produktseite. Die optische Darstellung des Titels bleibt dabei unverändert; es ändert sich nur die semantische Ebene, die z. B. für Suchmaschinen und Screenreader relevant ist.

Vielen Dank für diesen Vorschlag.

Neue Konfiguration "Link-Beschreibung" für die vollflächige Verlinkung der CMS-Elemente hinzugefügt Pro

Alle CMS-Elemente mit vollflächiger Verlinkung – Teaser, Banner, Hero-Slides & Co. – haben im Bereich "Barrierefreiheit" eine neue Konfiguration "Link-Beschreibung": Der Text wird als aria-label am Link ausgegeben und von Screenreadern als Linkbeschriftung vorgelesen – wie beim Bild-Element von Shopware. Das bisherige title-Attribut am vollflächigen Link entfällt dafür (es duplizierte nur den sichtbaren Text und wird von Screenreadern nicht zuverlässig vorgelesen). Falls du eigene CSS- oder JS-Selektoren auf das title-Attribut der Teaser-Links hast, stelle sie bitte um.

Die reinen Bild-Elemente ohne eigenen Textinhalt – "Image-Teaser", "Image-Banner" und "Image-Slide (Hero-Slider)" – sichern sich dabei automatisch ab: Wenn weder eine Link-Beschreibung gepflegt ist noch der Alt-Text des Bildes einen Namen liefert, wird der Titel des Mediums verwendet. Der Link bleibt für Screenreader also auch ohne gepflegte Konfiguration benannt.

Neue Konfiguration "Platzierung" für die Produkt-Bewertung auf Produktseiten hinzugefügt Feature-Request

Die Bewertung steht bei Shopware unter dem Preis. Mit der neuen Konfiguration "Platzierung" holst du sie stattdessen direkt an die Überschrift – wahlweise "Über Produktname" oder "Unter Produktname".

So sehen deine Kunden die Bewertung schon beim Lesen des Produktnamens, noch vor dem Preis. Die Platzierung wirkt auf Produktseiten im Shopware-Layout genauso wie in den ThemeWare® Bildergalerie-Blöcken mit Produktnamen. Ein großes Hersteller-Logo neben der Überschrift verschiebt die Bewertung dabei nicht.

Tab "Produktseiten" => Bereich "Produkt-Bewertung (in der Buybox oder am Produktnamen)" => Abschnitt "Basiskonfiguration"

Vielen Dank für diesen Vorschlag.

Neue Konfiguration "Produkt-Bewertung anzeigen" für die Buybox auf Produktseiten hinzugefügt Feature-Request

Die Bewertungssterne in der Buybox lassen sich jetzt gezielt steuern: "nicht anzeigen" blendet sie aus, "anzeigen (Standard)" verhält sich wie bisher, und "Produkt-Bewertung immer anzeigen" zeigt die Sterne auch bei Produkten, die noch gar keine Bewertung haben.

Ohne Bewertungen erscheinen dann leere Platzhalter-Sterne mit dem Link "Jetzt bewerten", der direkt zum Bewertungs-Tab führt. So lädst du deine Kunden aktiv dazu ein, die erste Bewertung zu schreiben.

Tab "Produktseiten" => Bereich "Produkt-Bewertung (in der Buybox oder am Produktnamen)" => Abschnitt "Basiskonfiguration"

Vielen Dank für diesen Vorschlag.

Neue Konfiguration "Schlagschatten" für das Flyout und die Dropdown-Navigation hinzugefügt

Beide Untermenü-Flächen haben jetzt eine eigene Konfiguration "Schlagschatten" – vorher war der Schatten fest eingebaut. Zur Wahl stehen "kein Schatten" sowie mehrere Abstufungen von klein bis groß; beim Flyout kommt zusätzlich der bisherige, breite ThemeWare®-Schatten als Option "Weicher Schatten (ThemeWare®)" dazu.

Die Voreinstellungen entsprechen genau dem bisherigen Aussehen, es ändert sich also nichts von allein. Wenn du magst, kannst du Flyout und Dropdown-Navigation jetzt aber angleichen: Wähle in beiden Feldern dieselbe Abstufung, und beide Flächen werfen denselben Schatten.

Den Schatten des Flyouts stellst du im Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration 'ThemeWare® Flyout'" ein, den der Dropdown-Navigation im Abschnitt "Basiskonfiguration 'ThemeWare® Dropdown'".

Neue Konfiguration "Spalten" für das Flyout mit Karten hinzugefügt

Im Untermenü-Typ "ThemeWare® Flyout mit Karten" legst du jetzt selbst fest, wie viele Karten nebeneinander stehen: 3, 4, 5 oder 6. Bisher war die Anzahl fest vorgegeben. Wenige, große Karten wirken ruhiger und zeigen mehr vom Bild, viele kleine Karten bringen alle Unterkategorien auf einen Blick unter.

Du wählst dabei nur einen Wert, um die kleineren Bildschirme kümmert sich das Theme: Auf Desktops werden höchstens 4 Karten nebeneinander gezeigt, auf Tablets höchstens 3 und auf Smartphones immer 2. Deine Auswahl greift also auf den größten Bildschirmen, und darunter wird automatisch passend reduziert – die Karten bleiben so immer groß genug, um das Bild zu erkennen.

Die Voreinstellung "Automatisch" entspricht genau dem bisherigen Verhalten, es ändert sich also nichts von allein.

Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration 'ThemeWare® Flyout mit Karten'" => Konfiguration "Spalten"

Neue Option "Abschnitte geöffnet lassen" im CMS-Element "Produktbeschreibung & Bewertungen (Akkordeon)" hinzugefügt Pro Feature-Request

Ist die Option "Abschnitte offen lassen" aktiviert, bleiben bereits geöffnete Abschnitte offen, wenn ein weiterer Abschnitt geöffnet wird – sie klappen nicht mehr automatisch zu. So lassen sich mehrere Bereiche gleichzeitig anzeigen.

Vielen Dank für diesen Vorschlag.

Neue Option "Auf Mobilgeräten als Liste" im CMS-Element "Produktbeschreibung & Bewertungen (Akkordeon)" hinzugefügt Pro Feature-Request

Ist die Option "Auf Mobilgeräten als Liste" aktiviert, werden auf Mobilgeräten alle Abschnitte offen als Liste dargestellt – ohne Auf- und Zuklappen. So sind alle Inhalte auf kleinen Bildschirmen direkt sichtbar.

Vielen Dank für diesen Vorschlag.

Neue Position "unten links" für den Merkzettel-Button auf dem Produktbild hinzugefügt

Du bestimmst jetzt selbst, in welcher Ecke des Produktbilds der Merkzettel-Button sitzt: oben rechts, unten rechts oder – jetzt neu – unten links. So platzierst du ihn genau dort, wo er zu deinem Bildaufbau passt und den Blick auf das Produkt frei lässt.

Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Merkzettel-Button" => Konfiguration "Position"

Neue Positionen für die Bewertung in der Produkt-Box hinzugefügt

Und du wählst, wo die Bewertung sitzt: in der Box über dem Produktnamen, jetzt neu auch darunter, oder direkt auf dem Produktbild – dort an der Ecke deiner Wahl (oben rechts, unten rechts, unten links oder unten mittig). So platzierst du das wichtige Kaufargument genau dort, wo es in deiner Übersicht am besten wirkt.

Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Produkt-Bewertung"

Die bisherige Konfiguration "Position der Produkt-Bewertung" ist dabei in zwei Konfigurationen aufgegangen: "Platzierung" (in der Box oder auf dem Produktbild) und die jeweils dazu passende "Position" (in der Box: über oder unter dem Produktnamen – auf dem Produktbild: die Ecke). Dein bisheriger Wert wird beim Update automatisch übernommen (Pro-Edition); die bisherige Konfiguration findest du zum Nachschlagen im Tab "Weiteres" => Bereich "Veraltet".

Neue Positionswahl für den Quickview-Button auf dem Produktbild hinzugefügt

Auch der Quickview-Button lässt sich jetzt frei positionieren: oben rechts, unten rechts oder unten links – oder er wird an den Merkzettel-Button "angedockt", sodass sich beide in derselben Ecke stapeln. So fügt sich der Button harmonisch in deinen Bildaufbau ein.

Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Quickview-Button" => Konfiguration "Position"

Neue Positionswahl für Produktseiten-Abschnitte hinzugefügt

Du entscheidest pro Abschnitt selbst, wo er auf der Produktseite erscheint: in der Produktbeschreibung oder als separater Tab. Das gilt für die Eigenschaften-Tabelle, die Datenblätter, die Produktvideos und die Hersteller-Angaben – gesteuert über die jeweilige Anzeige-Konfiguration im Tab "Produktseiten". So baust du die Produktseite genau so auf, wie es zu deinem Sortiment passt: alles kompakt in der Beschreibung oder übersichtlich auf eigene Tabs verteilt.

Werden die Hersteller-Angaben (inkl. der neuen GPSR-Informationen) in der Beschreibung angezeigt, erscheinen sie dort als hervorgehobene graue Box.

Neue Slots über und unter dem Produktnamen in der Produkt-Box hinzugefügt

Deine Produkt-Boxen erzählen jetzt mehr auf einen Blick. Blende genau die Information ein, die deiner Kundschaft die Entscheidung erleichtert – direkt über oder unter dem Produktnamen: die Produktnummer zum schnellen Wiederfinden, einen einladenden Teaser-Text, den Hersteller als Qualitätsversprechen oder einen dezenten Hinweis auf die verfügbaren Varianten (z. B. "+ 7 Variationen").

Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Inhalte"

Neuer "Button-Stil" im CMS-Element "Produktbeschreibung & Bewertungen (Akkordeon)" hinzugefügt Pro

Über die neue Konfiguration "Akkordeon-Stil" wählst du den Stil der Akkordeon-Überschriften: "Clean" (die bisherige, dezente Darstellung) oder "Buttons", bei der die Überschriften als Buttons dargestellt werden.

Neuer Glaseffekt für das Panel des Flyouts und der Dropdown-Navigation hinzugefügt

Das Panel kann den Seiteninhalt dahinter jetzt weichzeichnen und wirkt dadurch wie mattes Glas – der Inhalt bleibt zu erahnen, die Menüpunkte bleiben gut lesbar. Der Effekt wird erst sichtbar, wenn du als Hintergrundfarbe des Panels eine halbtransparente Farbe wählst; ein Wert um 10 px ist ein guter Startpunkt.

Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Farbkonfiguration" => Konfiguration "Glaseffekt [px] (Panel)"

Neuer Hover-Effekt für die Produkt-Badges, die Bewertung, den Merkzettel- und den Quickview-Button auf dem Produktbild hinzugefügt

Weniger ist mehr: Die Bewertung sowie der Merkzettel- und der Quickview-Button können auf dem Produktbild jetzt dezent im Hintergrund bleiben und erst sanft eingeblendet werden, wenn die Kundschaft mit der Maus über die Produkt-Box fährt. So bleibt die Übersicht angenehm aufgeräumt, und die Elemente erscheinen genau dann, wenn sie gebraucht werden – die beiden Buttons folgen dabei nacheinander mit einer feinen Verzögerung. Auf Touch-Geräten bleibt alles dauerhaft sichtbar, damit dort nichts verborgen ist.

Die Bewertung kann es auch andersherum: Mit der Option "bei Hover ausblenden" ist sie dauerhaft zu sehen und macht beim Überfahren sanft Platz. Kombinierst du das mit eingeblendeten Buttons, tauschen sich beide gegenseitig aus – ruhende Kachel mit Bewertung, beim Überfahren die Aktionen. Die Richtung, in die ein- bzw. ausgeblendet wird, folgt dabei immer der gewählten Ecke.

Auch die Produkt-Badges können Platz machen: Mit "bei Hover ausblenden" ziehen sie sich beim Überfahren zur linken Bildkante zurück – bei mehreren Badges nacheinander mit einer leichten Verzögerung, sodass sich der Stapel von oben nach unten leert. So gibst du das Produktbild frei für die Elemente, die dort erscheinen.

Für die Bewertung stellst du den Effekt im Tab "Kategorieseiten" => Bereich "Produkt-Box" => Abschnitt "Produkt-Bewertung" => Konfiguration "Hover-Effekt (auf dem Produktbild)" ein, für die beiden Buttons im selben Bereich => Abschnitt "Icon-Buttons (Merkzettel- / Quickview-Button)" => Konfiguration "Hover-Effekt" und für die Badges im Bereich "Produkt-Badges (in der Produkt-Box)" => Abschnitt "Basiskonfiguration" => Konfiguration "Hover-Effekt".

Neuer Hover-Effekt "slide in" für die Pfeil-Navigation der Slider hinzugefügt

Bisher konnten die Pfeile der Slider nur sanft eingeblendet werden ("fade in"). Neu hinzu kommt "slide in": Die Pfeile fahren beim Überfahren mit der Maus von links und rechts ins Bild und ziehen sich danach wieder zurück. Das wirkt lebendiger und lenkt weniger ab, solange die Kundschaft nur scrollt.

Der Effekt steht für alle Slider zur Verfügung – zentral für alle auf einmal oder einzeln für den Bilder-, Galerie- und Produkt-Slider. Auf Touch-Geräten bleiben die Pfeile wie gewohnt dauerhaft sichtbar, und wer in seinem System "Bewegung reduzieren" aktiviert hat, sieht die Pfeile ohne Animation.

Zentral stellst du den Effekt im Tab "Inhalt" => Bereich "Sliders" => Abschnitt "Pfeile-Navigation" => Konfiguration "Hover-Effekt" ein. Abweichend je Slider geht es im Tab "Erlebniswelten" im jeweiligen Bereich => Abschnitt "Pfeile-Navigation (Individuelles Styling)".

Neuer Platzhalter "%manufacturer%" für die Überschriften des Hersteller- und GPSR-Tabs hinzugefügt

Die Überschriften des Hersteller-Tabs und des Tabs "Informationen zur Produktsicherheit" kannst du jetzt frei formulieren und den Herstellernamen an beliebiger Stelle einsetzen. Schreibe dafür %manufacturer% in den Textbaustein – beim Aufruf der Seite wird der Platzhalter durch den Namen des jeweiligen Herstellers ersetzt.

Aus "Mehr über %manufacturer%" wird auf der Produktseite zum Beispiel "Mehr über Musterfirma".

Die betreffenden Textbausteine sind twt.detail.tabManufacturer.headline und twt.detail.tabGpsr.headline. Lässt du den Platzhalter weg, ändert sich nichts.

Neuer "Stern-Stil" für die Bewertungssterne hinzugefügt Feature-Request

Kleines Detail, große Wirkung: Mit dem neuen Stern-Stil bringst du die Bewertungssterne in Einklang mit deinem Design. Zur Wahl stehen "Gefüllt (Standard)" mit klassisch gefüllten Sternen, "Outline (leere Sterne)", bei dem nur die noch nicht erreichten Sterne zum feinen Umriss werden, und "Outline" für einen durchgehend leichten, modernen Look. Deine Wahl wirkt automatisch überall, wo Sterne erscheinen: in den Produkt-Boxen, auf der Produktseite und in den Testimonials.

Tab "Layout" => Bereich "Produkt-Bewertung" => Abschnitt "Basiskonfiguration"

Vielen Dank für diesen Vorschlag.

Neuer Stil "Kompakt" für die Produkt-Spezifikationen in der Buybox hinzugefügt Feature-Request

Die Produkt-Spezifikationen in der Buybox – z. B. Produktnummer, Hersteller, GTIN/EAN, Maße und Gewicht – können jetzt platzsparend als kompaktes Raster dargestellt werden: Die Einträge stehen nebeneinander, das Label steht dezent über dem jeweiligen Wert, und je nach verfügbarem Platz brechen die Einträge automatisch um.

Tab "Produktseiten" => Bereich "Produkt-Spezifikationen (in der Buybox)" => Abschnitt "Basiskonfiguration" => neue Konfiguration "Stil"

Vielen Dank für diesen Vorschlag.

Abstände der Elemente in der Buybox vereinheitlicht

Die ThemeWare®-Elemente in der Buybox – Produkt-Spezifikationen, Produkt-Symbole, Vorteile, Zahlungsarten-Logos und Teilen-Links – nutzen jetzt einen einheitlichen vertikalen Abstand. Bisher hatte jedes Element leicht unterschiedliche Abstände.

Abstände von Badges, Merkzettel- und Quickview-Button auf dem Produktbild vereinheitlicht

Alle Elemente, die auf dem Produktbild liegen – die Badges ("Neu", Rabatt, Topseller), der Merkzettel- und der Quickview-Button sowie die Bewertung – halten jetzt denselben Abstand zur Bildkante.

Der Abstand passt sich außerdem der Bild-Darstellung an: Bei vollflächigen Bildern rücken die Elemente etwas weiter von der Kante weg als bei Bildern mit Rand.

Der Stil "Liste in Spalten (Shopware 5)" wirkt jetzt nur noch im Flyout

Der Stil ordnet die Kategorien wie im Flyout von Shopware 5 in Spalten an. In den Darstellungen "Flyout mit Karten", "Flyout mit Sidebar" und "Flyout mit Teasern" hat er sich mit deren eigener Anordnung überschnitten – dort gilt jetzt der Stil "Liste".

Die Animation des Flyouts wirkt jetzt auch in der Dropdown-Navigation

Die Konfiguration "Animation" steuerte bisher nur das Aufklappen des Flyouts. Sie gilt jetzt für beide Untermenü-Flächen: Die Dropdown-Navigation klappt mit derselben Animation auf.

Weil die Einstellung nun für beide Flächen gilt, ist sie zusammen mit den "Hauptnavigations-Ebenen" in den allgemeinen Abschnitt "Basiskonfiguration" gewandert.

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

Eigenschaften-Konfiguration im neuen Bereich "Eigenschaften-Tabelle (in Tabs)" gebündelt

Die Einstellungen der Eigenschaften-Tabelle – Darstellungsart, Stil, Breite und der Hinweistext – sind jetzt im Bereich "Eigenschaften-Tabelle (in Tabs)" der Theme-Konfiguration gebündelt. Bisher waren sie auf die Bereiche "Layout" und "Tab 'Beschreibung'" verteilt. Zusammen mit der Anzeige-Konfiguration und der Zwischenüberschrift findest du damit alles zur Eigenschaften-Tabelle an einem Ort.

Fokus-Ringe für die Tastaturbedienung verbessert Feature-Request

Wer sich mit der Tastatur durch den Shop bewegt, sieht an jedem Element denselben Rahmen – den Fokus-Ring. Bisher sah er je nach Baustein unterschiedlich aus: an manchen Stellen schwarz, an anderen in der Primärfarbe. Jetzt ist er überall gleich und lässt sich zentral einfärben.

Tab "Weiteres" => Bereich "Barrierefreiheit" => Konfiguration "Fokus-Schattenfarbe @focus"

Farbige Buttons behalten dabei ihre eigene Farbe: Der Kaufen-Button zeigt seinen Ring in der Kaufen-Farbe, der Primär-Button in der Primärfarbe. Alles andere – Links, Icons, Formularfelder, Konfigurator-Optionen, Mengenauswahl, Widgets im Footer – folgt der Einstellung oben.

Nebenbei behoben: Der "Details"-Button in der Produkt-Box und die Mengenauswahl hatten bisher einen fast unsichtbaren Ring, weil er in ihrer eigenen, sehr hellen Farbe gezeichnet wurde. Beide nutzen jetzt den Standardring.

Vielen Dank für diesen Vorschlag.

Hersteller-Konfiguration im neuen Bereich "Hersteller (in Tabs)" gebündelt

Die Einstellungen für die Hersteller-Anzeige in den Tabs (Logo, weiterführende Links, Zwischenüberschrift) sind jetzt im neuen Bereich "Hersteller (in Tabs)" der Theme-Konfiguration gebündelt.

In der Listenansicht ist das Produktbild wieder verlinkt Feature-Request

Seit Shopware 6.7 ist das Produktbild in der Produkt-Box nicht mehr einzeln verlinkt – stattdessen legt sich ein unsichtbarer Link des Produktnamens über die gesamte Kachel. In der Listenansicht schalten wir diesen flächigen Link bewusst ab, damit sich der lange Beschreibungstext weiterhin markieren und kopieren lässt. Dadurch war das Bild dort zuletzt gar nicht mehr anklickbar. Es hat jetzt wieder einen eigenen Link – ohne Nachteil für die Barrierefreiheit: Der Link ist für Screenreader ausgeblendet und nicht per Tab erreichbar, sodass pro Produkt weiterhin genau ein Link angesagt wird. Der Merkzettel- und der Quickview-Button auf dem Bild bleiben davon unberührt.

Vielen Dank für diesen Vorschlag.

Konfiguration "Zwischenüberschrift anzeigen" in den Bereich "Eigenschaften-Tabelle (in Tabs)" verschoben

Die Konfiguration für die Zwischenüberschrift über der Eigenschaften-Tabelle (bisher "Zwischenüberschrift über der Eigenschaften-Tabelle anzeigen" im Bereich "Tab 'Beschreibung'") heißt jetzt "Zwischenüberschrift anzeigen" und findet sich im Bereich "Eigenschaften-Tabelle (in Tabs)" – dort, wo auch die übrigen Einstellungen der Eigenschaften-Tabelle liegen.

Die Zwischenüberschrift wirkt jetzt außerdem überall dort, wo die Eigenschaften-Tabelle angezeigt wird – also auch im separaten Tab. Dein bisheriger Wert wird beim Update automatisch übernommen (Pro-Edition).

Lieferinformationen auf Produktseiten verbessert

Die Hinweise zur Verfügbarkeit in der Buybox – "Versandkostenfrei", "Sofort verfügbar", "Ausverkauft" und die übrigen – haben wir gründlich überarbeitet.

Das Wichtigste: Du kannst jeden Hinweis jetzt einzeln ein- und ausblenden. Möchtest du also zum Beispiel den Lieferzeit-Hinweis zeigen, den Versandkostenfrei-Hinweis aber nicht (weil er schon als Badge auf dem Bild steht), ist das ab sofort möglich.

Für die Optik stehen statt bisher zwei jetzt vier Darstellungsarten zur Wahl: "Text", "Label", "Badge" und "Chip" – dieselben wie in der Produkt-Box. Alle Hinweise stehen außerdem in einer gemeinsamen Gruppe mit einheitlichen Abständen; bisher hatten sie je nach Einstellung unterschiedliche Abstände und standen teilweise getrennt voneinander.

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

Wenn du lieber bei Shopwares Standard-Darstellung bleiben möchtest, kannst du das über einen Kompatibilitäts-Schalter einstellen.

Tab "Weiteres" => Bereich "Kompatibilität (HC-Architecture®)" => Abschnitt "Produktseiten"

Maximale Höhe hat im Widget "Auszeichnungen, Siegel oder Zertifikate" jetzt Vorrang vor der maximalen Breite

Bisher musste im Footer-Widget "Auszeichnungen, Siegel oder Zertifikate" eines der beiden Größen-Felder von Hand auf "none" gestellt werden – waren beide befüllt, wurden beide ignoriert und ein interner Standard (100 Pixel Breite) verwendet. Jetzt gilt eine einfache Regel: Ist eine maximale Höhe gesetzt, hat sie Vorrang – so bekommen alle Bilder eine einheitliche Höhe (empfohlen). Die maximale Breite wirkt nur, wenn die Höhe auf "none" steht. Für korrekt konfigurierte Shops ändert sich dadurch nichts.

Modal, Offcanvas, Cookie-Hinweis und Fullscreen-Suche berücksichtigen jetzt die Systemeinstellung "Transparenz reduzieren"

Ist die Einstellung "Transparenz reduzieren" im Betriebssystem aktiv, wird der Glaseffekt dieser vier Overlays abgeschaltet.

Produkt-Box in der Listenansicht überarbeitet: Produktbild, Badges und Buttons sind jetzt einheitlich ausgerichtet

In der Listenansicht steht das Produktbild links neben dem Text. Die Produkt-Badges (z.B. "Neu" oder "Versandkostenfrei") saßen dort bisher am oberen Rand der Zeile statt am Bild – je länger der Produkttext, desto weiter rutschten sie vom Bild weg und desto schiefer standen sie zum Merkzettel- und Quickview-Button. Jetzt liegen die Badges auf dem Produktbild und halten denselben Abstand zur Bildkante wie die beiden Buttons und die Bewertung auf dem Bild – genau wie in der Kachelansicht.

Dazu beginnen Bild und Textspalte jetzt auf einer Linie: Bild, Badges, Buttons und der Produktname starten oben auf gleicher Höhe, statt dass das Bild mittig neben dem Text schwebt.

Feedback, News und Links im ThemeWare® Hub verbessert

Über die Karte "Feedback einsenden" landest du jetzt direkt auf unserer Seite für Verbesserungsvorschläge, statt ein Formular im Hub zu öffnen. In der englischen Administration zeigt der News-Bereich außerdem die englischen Beiträge, und ein paar Links zum Handbuch führen dort jetzt auf die richtige Sprachversion.

Performance der Sticky-Top-Navigation verbessert

Die Sticky-Top-Navigation arbeitet sparsamer: Warenkorb und Suche wechseln ihren Platz jetzt nur noch dann, wenn die Navigation tatsächlich andockt oder sich löst – vorher passierte das bei jedem einzelnen Scroll-Schritt. Auch beim Ändern der Fenstergröße wird nicht mehr alles zurückgesetzt. Das macht sich vor allem auf schwächeren Geräten und langen Seiten bemerkbar.

Bugfix: Animationen von CMS-Blöcken werden in Modals nicht mehr abgespielt

Wurde ein CMS-Inhalt mit Einblend-Animation in einem Modal geöffnet, verschob sich der Inhalt beim Öffnen noch einmal. Die Animationen sind in Modals jetzt vollständig abgeschaltet, der Inhalt steht sofort an seinem Platz.

Bugfix: CMS-Elemente werden nur noch vollflächig verlinkt, wenn eine URL hinterlegt ist Pro

In den CMS-Elementen "Button-Teaser", "Call-to-Action" und "Call-to-Action-Slide (Hero-Slider)" wurde bei aktivierter Option "Gesamtes Element anklickbar" auch dann ein Link um das gesamte Element gerendert, wenn keine URL hinterlegt war – ein Klick lud dann lediglich die aktuelle Seite neu. Die vollflächige Verlinkung wird jetzt, wie bei den anderen Teaser-Elementen, nur noch ausgegeben, wenn auch eine URL konfiguriert ist.

Bugfix: Der "Benutzerdefinierter Inhalt" wird nicht mehr angezeigt, wenn das Zusatzfeld leer ist Pro

Im CMS-Element "Produktbeschreibung & Bewertungen (Akkordeon)" wurde der Abschnitt "Benutzerdefinierter Inhalt" auch dann angezeigt, wenn das zugehörige Zusatzfeld am Produkt leer war – es erschien ein leerer Abschnitt. Der Abschnitt wird jetzt nur noch dargestellt, wenn tatsächlich ein Inhalt hinterlegt ist – analog zu den Bereichen "Eigenschaften", "Hersteller" und "Produktsicherheit (GPSR)".

Bugfix: Die Sticky-Top-Navigation blendet sich jetzt genau dann ein, wenn die Navigation den oberen Bildschirmrand erreicht

Der Umschaltpunkt wird jetzt direkt an der Navigation gemessen. Dadurch sitzt er in jeder Kombination punktgenau – auch mit Ankündigungs-Banner und unabhängig davon, wo die USP-Leiste steht.

Zusätzlich wird der Umschaltpunkt bei jeder Bewegung neu bestimmt. Schließt ein Besucher das Ankündigungs-Banner, greift die Sticky-Top-Navigation ab sofort an der neuen Position – vorher war dafür noch eine Größenänderung des Browserfensters nötig.

Tab "Header" => Bereich "Sticky Top-Navigation (Basis-Header: 'Header 1' und 'Header 2')" => Abschnitt "Basiskonfiguration" => Konfiguration "Scrolltiefe"

Bugfix: Die Sticky-Top-Navigation löst sich wieder, wenn das Fenster unter die eingestellte Mindestbreite verkleinert wird

Über die Konfiguration "Anzeigen ab ..." legst du fest, ab welcher Bildschirmbreite die Sticky-Top-Navigation greift. Bei der Einstellung "Container-max-width (Full-width Boxed)" blieb die Navigation fixiert, wenn das Browserfenster darunter verkleinert wurde. Sie löst sich jetzt in allen Einstellungen zuverlässig.

Außerdem greifen die Einstellungen "Tablet (Querformat) (≥992px)" und "Desktop (≥1200px)" jetzt exakt bei der genannten Breite.

Bugfix: Die Sticky-Top-Navigation reserviert nach dem Ändern der Fenstergröße wieder die richtige Höhe

Wurde die Größe des Browserfensters geändert, während die Sticky-Top-Navigation fixiert war, konnte anschließend zu viel Platz freigehalten werden – der Seiteninhalt sprang beim nächsten Scrollen. Der benötigte Platz wird jetzt in jeder Situation korrekt gemessen.

Bugfix: Die Sticky-Top-Navigation verschiebt den Seiteninhalt beim Ein- und Ausblenden nicht mehr

Die Sticky-Top-Navigation hält den benötigten Platz jetzt genau dort frei, wo sie sitzt. Die Seite bleibt beim Ein- und Ausblenden ruhig stehen, was sich direkt positiv auf den Cumulative Layout Shift (CLS) und damit auf deine Core Web Vitals auswirkt.

Das Scrollen fühlt sich dadurch merklich ruhiger an – vor allem auf großen Desktop-Bildschirmen, auf denen die Navigation besonders oft ein- und ausgeblendet wird.

Vielen Dank für den Hinweis.

Bugfix: Die Systemeinstellung "Bewegung reduzieren" schaltet jetzt auch die Animationen der CMS-Blöcke und des Untermenüs ab

Wer im Betriebssystem "Bewegung reduzieren" aktiviert hat, bekommt Animationen im Shop bewusst nicht zu sehen. Bisher wurden dabei nur die weichen Übergänge abgeschaltet – die eigentlichen Animationen der CMS-Blöcke, ihrer Überschriften und des Untermenüs liefen weiter. Jetzt greift die Einstellung durchgängig: Die Inhalte erscheinen sofort und vollständig, ohne Bewegung.

Bugfix: Doppelte Block-Namen in der Konfiguration einiger CMS-Elemente korrigiert Pro

In den Konfigurations-Templates einiger ThemeWare® CMS-Elemente war ein Block-Name doppelt vergeben. Das konnte in seltenen Fällen dazu führen, dass sich die Konfiguration des Elements nicht öffnen ließ. Die Namen sind jetzt eindeutig.

Bugfix: Falscher Titel-Fallback und fehlende deutsche Hilfetexte bei Zusatzfeldern korrigiert

Bei den Zusatzfeldern für Downloads, Datenblätter und weiterführende Links waren die deutschen Hilfetexte im Admin nicht hinterlegt und wurden daher nicht angezeigt. Zusätzlich griff bei Downloads ohne eigenen Titel ein falscher Ersatztext ("Datenblatt" statt "Download"). Beides ist jetzt korrigiert: Der Titel greift wie vorgesehen auf den in der Medienverwaltung hinterlegten Titel zurück, und die deutschen Hilfetexte werden wieder korrekt angezeigt.

Bugfix: Hilfe-Text der Headline-Konfigurationen in diversen CMS-Elementen korrigiert Pro

Der Hilfe-Text der Konfiguration "Überschrift" enthielt in mehreren CMS-Elementen einen Hinweis auf einen Textbaustein-Fallback, der nur für das CMS-Element "Unterkategorie-Navigation (Sidebar)" gilt. Der allgemeine Hilfe-Text wurde korrigiert – der Hinweis erscheint jetzt nur noch dort, wo er auch zutrifft.

Bugfix: Merkzettel- und Quickview-Button sind in der Listenansicht wieder rund

In der Listenansicht werden die Elemente der Produkt-Box kompakter dargestellt. Diese Anpassung hat auch die Größe der runden Icon-Buttons zurückgesetzt, wodurch der Merkzettel-Button in die Höhe gezogen wurde und oval erschien. Beide Buttons behalten jetzt ihre feste Größe und bleiben rund.

Bugfix: Sticky-Bereiche hängen auf Mobilgeräten nicht mehr fest

Auf Mobilgeräten konnten "sticky" Bereiche (z.B. Galerie & Buybox sowie die Sidebar) beim Scrollen kurz "festhängen", weil das Sticky-Verhalten auch dann griff, wenn diese Bereiche untereinander statt nebeneinander liegen. Es wird nun erst ab der Breite aktiv, in der die Bereiche tatsächlich nebeneinander stehen.

Bugfix: Varianten und andere Buttons reagieren auf Touch-Geräten wieder beim ersten Tippen

Auf Touch-Geräten (z.B. iPhone, iPad) reagierten manche Elemente wie die Variantenauswahl erst beim zweiten Tippen, weil Safari das erste Tippen als Hover wertet. ThemeWare® liefert Hover-Effekte jetzt nur noch an Geräte mit Mauszeiger aus: Auf Touch-Geräten reagiert alles sofort, und per Hover eingeblendete Inhalte sind dort immer sichtbar.

Vielen Dank für den Hinweis.

Hinweise im Detail

Die Dropdown-Navigation nutzt jetzt die Farben der Untermenüs statt der Farben der Top-Navigation

Bisher hat sich die Dropdown-Navigation ihre Farben aus der Top-Navigation geholt. Damit Flyout, Karten, Sidebar, Teaser und Dropdown eine gemeinsame Farbwelt haben, greift sie jetzt – wie alle anderen Darstellungen – auf die Farben der Untermenüs zu.

Wenn deine Top-Navigation eingefärbt ist, sieht die Dropdown-Navigation nach dem Update anders aus als vorher. Bitte prüfe deine Farbeinstellungen im Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Farbkonfiguration" und passe sie bei Bedarf an.

Konfigurations-Key des Flyout-Stils geändert

Die Konfiguration "Stil" des Flyouts heißt jetzt "Flyout" und liegt im Bereich "Design". Dein bisheriger Wert wird beim Update automatisch übernommen.

Konfiguration und Template-Dateien der Lieferinformationen auf Produktseiten aktualisiert

Die sechs Konfigurationen "…-Label anzeigen" (Versandkostenfrei, Lieferzeit, Vorbestellung, Versandfertig, Ausverkauft, Nicht verfügbar) sind durch neue Felder ersetzt worden, die nun tatsächlich die Sichtbarkeit schalten. Die bisherigen Felder findest du zum Nachschlagen im Tab "Weiteres" => Bereich "Veraltet"; sie sind nicht mehr wirksam.

Auch die Templates haben sich geändert: Die sechs Zustände liegen jetzt gemeinsam mit dem Lagerbestand-Label in themeware/product-detail/twt-delivery-information.html.twig. Das bisherige twt-product-detail-labels.html.twig leitet nur noch dorthin weiter. Bitte prüfe deine Konfiguration sowie deine Template- und CSS-Anpassungen.

Konfiguration und Template-Dateien von Tabs auf Produktseiten aktualisiert

Die Template-Dateien der Tabs auf Produktseiten wurden neu strukturiert: Die bisherigen Tab-Templates wurden in einen Tab-Wrapper (tab/) und den eigentlichen Inhalt (tab-content/) aufgeteilt. Durch diese Änderungen lassen sich Inhalte, die bisher nur in Tabs verwendet wurden, auch an anderer Stelle nutzen, z. B. im Akkordeon.

Konfiguration:

Die Anzeige der Bereiche Eigenschaften, Produktvideos, Datenblätter und Hersteller wird jetzt über eine einheitliche Auswahl gesteuert. Statt getrennter Schalter für Tab und Beschreibung wählst du pro Bereich einfach, wo er erscheinen soll:

• nicht anzeigen
• in der Beschreibung anzeigen
• in separatem Tab anzeigen
• im Hersteller-Tab anzeigen (nur bei den neuen GPSR-Angaben)

Was passiert mit meinen bisherigen Einstellungen?

Die bisherigen Konfigurationen wurden als veraltet markiert und verschoben. Du findest sie – und damit deine bisherigen Werte zum Nachschlagen – unter:

• Tab "Weiteres" => Bereich "Veraltet".

Übersicht: bisherige → neue Konfiguration

Die neuen Konfigurationen findest du im Tab "Produktseiten" im jeweiligen Bereich:

Template-Struktur der CMS-Teaser-Elemente vereinheitlicht Pro

Das Bild-Markup der Teaser-Elemente (Bild-Container, img-Attribute, Thumbnails) wird jetzt zentral über ein geteiltes Template gerendert:

Resources/views/storefront/themeware/includes/twt-cms-image-wrapper.html.twig

Die Element-Templates rufen dieses Include auf, statt das Markup jeweils selbst zu rendern. An der Storefront-Ausgabe ändert sich dadurch nichts – künftige Verbesserungen am Bild-Markup kommen aber automatisch allen Teaser-Elementen zugleich zugute.

{% sw_extends '@Storefront/storefront/themeware/includes/twt-cms-image-wrapper.html.twig' %}

{% block twt_cms_image_wrapper_media %}
    {% if element.type == 'twt-button-teaser' %}
        {# eigene Media-Ausgabe nur für den Button-Teaser #}
    {% else %}
        {{ parent() }}
    {% endif %}
{% endblock %}

Zwischenüberschriften und Untertitel auf Produktseiten nutzen jetzt einheitliche CSS-Klassen

Die Zwischenüberschriften und Untertitel der Produktseiten-Bereiche (Eigenschaften, Produktvideos, Datenblätter, Hersteller, GPSR, Produkt-Symbole) nutzen jetzt ein einheitliches Klassen-System: In der Beschreibung wie bisher twt-product-detail-description-subheadline bzw. twt-product-detail-description-subtitle, in separaten Tabs und im Akkordeon die neuen Pendants twt-product-detail-tab-subheadline bzw. twt-product-detail-tab-subtitle. Die Abstände sind identisch – lassen sich jetzt aber für Beschreibung und Tabs getrennt anpassen.

Nach dem Update: kurze Checkliste

Hier in Kurzform, was du nach dem Update anschauen solltest – der Reihe nach, in etwa 15 Minuten machbar:

1. Farben der Navigation prüfen. Öffne dein Untermenü im Shop. Sehen Flyout und Dropdown noch so aus wie vorher? Falls nicht: Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Farbkonfiguration".
2. Stil des Flyouts prüfen. Der Konfigurations-Key hat sich geändert. Schau nach, ob noch der Stil steht, den du haben möchtest: Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Design" => Konfigurationen "Flyout" und "Dropdown-Navigation".
3. Animation des Untermenüs prüfen. Hier gibt es jetzt sechs Möglichkeiten statt drei. Hattest du bisher "swing in down" eingestellt, wähle bitte neu: Tab "Header" => Bereich "Top-Navigation Flyout" => Abschnitt "Basiskonfiguration" => Konfiguration "Animation".
4. Produktseite anschauen. Stimmen die Lieferinformationen in der Buybox – also Hinweise wie "Versandkostenfrei" oder "Lieferzeit"? Optik und Position stellst du im Tab "Produktseiten" => Bereich "Lieferinformationen (in der Buybox)" ein.
5. Tabs auf der Produktseite durchklicken. Sind alle Tabs da, die du erwartest, und stehen die Überschriften richtig? Ob ein Abschnitt als eigener Tab oder in der Beschreibung erscheint, stellst du im Tab "Produktseiten" im jeweiligen Bereich ein: "Eigenschaften-Tabelle (in Tabs)", "Produktvideos (in Tabs)", "Datenblätter (in Tabs)", "Hersteller (in Tabs)" und "GPSR – Produktsicherheit (in Tabs)". Die Tab-Titel selbst änderst du über die Textbausteine.
6. Eigene Anpassungen testen. Nur wenn du oder deine Agentur eigene Templates, eigenes CSS oder eigene Textbausteine pflegt: Diese Stellen bitte einmal durchgehen. Hierfür gibt es keine Theme-Konfiguration – betroffen sind deine eigenen Dateien sowie die Textbausteine unter "Einstellungen" => "Shop" => "Textbausteine". Welche genau betroffen sind, steht in den Abschnitten oben.

Wir hoffen, euch gefällt das neue Update und die vielen Verbesserungen genauso gut wie uns. Wie immer freuen wir uns über euer Feedback, eure Ideen und eure Erfahrungen aus der Praxis – denn genau das hilft uns, ThemeWare® kontinuierlich weiter zu verbessern und zu modernisieren.

Vielen Dank für euer Vertrauen und weiterhin gute Geschäfte!

Sebastian und das Team von ThemeWare®