Drei Eigenschaftsgruppen reichen, um deinen Shopware-Konfigurator unbenutzbar zu machen

Ab drei Varianten-Merkmalen kippt Shopwares Standard-Auswahl — alle ausgegrauten Optionen sehen gleich aus. So habe ich das in meinem Shop gelöst.

Philipp Flaum
3 min Lesezeit
ShopwareVariantenProduktdatenKonversion
Shopware-Variantenkonfigurator mit farbigen Auswahloptionen

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: Pflaum Varianten-Anzeige. Die Idee ist simpel — statt Durchstreichung ein 3-Farben-System:

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.

Optionen die in keiner lieferbaren Variante existieren, fliegen raus. Nicht durchgestrichen — weg.

Produktkonfigurator mit 3-Farben-System

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 16 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

  1. Im Admin unter Erweiterungen → Store nach "Pflaum Varianten-Anzeige" suchen
  2. Plugin laden, unter Meine Erweiterungen installieren und aktivieren
  3. bin/console theme:compile ausführen (einmalig, danach nur bei Farbänderungen)
  4. Optional: Farben im Plugin-Config ans Branding anpassen
  5. 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: Pflaum 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.

Zum Kontaktformular

Über den Autor

Geschrieben von Philipp Flaum

Das Novastrix Team teilt Expertise und Insights über E-Commerce, Online-Handel und digitale Lösungen für Lieferanten und Händler.

Mehr erfahren?

Entdecken Sie, wie Novastrix Ihnen helfen kann, Ihre Produkte erfolgreich online zu verkaufen