Das Problem
Du hast vier Varianten-Merkmale: Farbe, Größe, Material, Schnitt. Dein Kunde klickt "Rot" an. Drei Viertel der Größen sind plötzlich ausgegraut.
Welche davon existieren noch? Welche kommen zurück, wenn er eine andere Farbe wählt? Shopware zeigt ihm dazu: einen Durchstreich und 60 Prozent Opacity. Auf allen Optionen gleich.
Der Kunde ist raus.
Ich verkaufe selbst in einem eigenen Shopware-Shop. Das war eines der ersten Probleme das mir bei komplexeren Produkten aufgefallen ist. Nicht die Technik — die UX.
Warum Shopware das so rendert
Shopwares Standard-Auswahl ist für zwei Gruppen gebaut. Farbe und Größe. Das reicht für T-Shirts.
Sobald du bei drei oder mehr Gruppen bist, passiert etwas das Shopware nicht löst: Die meisten theoretisch möglichen Kombinationen existieren im echten Lager gar nicht. Grün-XL-Regular ja, Grün-XL-Slim nein. Eiche-45cm-Chrom ja, Eiche-45cm-Messing nein.
Shopware durchstreicht diese nicht-lieferbaren Optionen. Das Problem: wenn zwei Drittel der UI durchgestrichen sind, sieht der Kunde nur noch Rauschen. Er sieht nicht mehr was er bekommen kann — er sieht was alles nicht geht.
Was ich probiert habe, bevor ich es selbst gebaut habe
Sortiment reduzieren geht nicht. Die Vielfalt ist der Grund warum der Kunde überhaupt auf der Seite landet.
Hinweistexte einbauen ("Bitte wähle zuerst die Farbe") macht die Produktseite länger. Der Kunde will klicken, nicht lesen.
Das Theme patchen ist technisch möglich. Bei jedem Shopware-Update prüfst du die Overrides. Bei jedem Theme-Update auch. Nach einem halben Jahr räumt das niemand mehr auf, und die Variantenauswahl sieht schlechter aus als vorher.
Wie ich es gelöst habe
Ich habe ein Plugin gebaut: Novastrix Varianten-Anzeige. Die Idee ist simpel — statt Durchstreichung vier klar unterscheidbare Zustände:
Grün — die Option passt zur aktuellen Auswahl und ist lieferbar. Einmal klicken, fertig.
Amber — die Option existiert in einer anderen Konfiguration. Wenn dein Kunde sie trotzdem wählt, springt Shopware automatisch zur nächsten lieferbaren Kombination. Ein Klick, Shopware macht den Rest.
Blau — die Option ist gerade ausgewählt.
Amber-Grau — die Option existiert grundsätzlich, ist aber in jeder Kombination gerade ausverkauft. Bleibt sichtbar, damit der Kunde weiß dass es sie gibt, ist aber eindeutig als "nicht bestellbar" markiert.
Dazu zeigt jede Option optional ein kleines Lieferbar-/Nicht-lieferbar-Badge. Das trennt sauber zwischen "passt nicht zur Auswahl" (Logik) und "Lager leer" (Bestand) — zwei Dinge, die Shopware-Standard in einen Topf wirft.
Unter dem Konfigurator steht eine Legende, die dem Kunden die Farbcodierung erklärt. Optional zeigt ein Hover-Tooltip, was passiert wenn er eine Amber-Option wählt. Alle Farbwerte kannst du an dein Branding anpassen, Grün wird dein Shop-Grün, Blau dein Primary.
Was das konkret ändert
Bei meinen eigenen Produkten sehe ich zwei Effekte.
Erstens: der Kunde klickt weniger auf Sackgassen. Wer eine Amber-Option wählt, landet automatisch auf einer funktionierenden Kombination — keine Enttäuschung, keine "Diese Kombination ist nicht verfügbar"-Meldung.
Zweitens: die Seite wirkt nicht mehr beschädigt. Eine Produktdetailseite mit drei Gruppen und 70 Prozent Opacity-Overlay sieht aus als wäre etwas kaputt. Mit klaren Farben sieht sie aus als hätte sie jemand absichtlich so gebaut.
Unter der Schwelle von drei Gruppen passiert übrigens gar nichts — Shopwares Standard bleibt unberührt. Das hält die Darstellung konsistent für einfache Produkte.
So setzt du es bei dir um
- Im Admin unter Erweiterungen → Store nach "Novastrix Varianten-Anzeige" suchen
- Plugin laden, unter Meine Erweiterungen installieren und aktivieren
- Cache leeren (
bin/console cache:clear) — fertig. Farbänderungen in der Config greifen live über CSS-Variablen, ein Theme-Compile ist nicht nötig. - Optional: Farben im Plugin-Config ans Branding anpassen
- Eine Produktdetailseite mit drei oder mehr Varianten-Gruppen aufrufen
Das Plugin arbeitet mit Daten, die Shopware sowieso geladen hat. Keine zusätzlichen Datenbank-Abfragen, rund 5 Millisekunden Overhead pro Produktseite. HTTP-Cache-kompatibel.
Nächster Schritt
Die vollständige Doku mit allen Konfigurations-Einstellungen findest du hier:
→ Plugin-Dokumentation: Novastrix Varianten-Anzeige
Wenn du unsicher bist, ob dein Shop genau dieses Problem hat: Schick mir eine Produkt-URL über das Kontaktformular — ich schaue rein und sage dir, ob sich das Plugin bei dir rechnet.
