Fortschrittsbalken / Threshold Nudge Bars

Verfügbarkeit: Convertly Pro · ab Plugin-Version 7.28.0

Was sind Fortschrittsbalken?

Fortschrittsbalken (auch Threshold Nudge Bars genannt) sind Hinweisleisten im Warenkorb und Offcanvas-Cart, die Deinen Kunden zeigen, wie nah sie an einer Belohnung sind – zum Beispiel an kostenlosem Versand oder einem Gratisgeschenk. Sobald die Schwelle erreicht ist, wird die Belohnung sichtbar einlösbar oder sogar automatisch zum Warenkorb hinzugefügt.

Typische Einsatzszenarien:

  • Versandkostenfreie Lieferung ab X € – die wahrscheinlich meistgenutzte Variante zur Steigerung des durchschnittlichen Warenkorbwerts.
  • Gratisgeschenk ab X € – ein Produkt wird beim Erreichen der Schwelle kostenlos beigelegt.
  • Mehrstufige Belohnungen – z. B. „ab 50 € Versand frei, ab 100 € zusätzlich ein Gratisgeschenk, ab 150 € zwei Geschenke“. Mehrere Ziele lassen sich auf einem Balken kombinieren.
  • A/B-Test eines Nudges – Du kannst einen Fortschrittsbalken direkt mit einer Convertly-Experimentvariante verknüpfen und so messen, ob der Nudge tatsächlich die Conversion und den AOV hebt.

Der Fortschrittsbalken wird automatisch sowohl auf der Warenkorbseite (/checkout/cart) als auch im Offcanvas-Cart eingeblendet, sobald aktive Konfigurationen vorliegen.


Übersicht im Dashboard

Im Convertly-Dashboard findest Du den Bereich Extras → Fortschrittsbalken / Threshold Nudge. Über Fortschrittsbalken erstellen legst Du einen neuen Balken an. In der Listenansicht siehst Du alle bestehenden Fortschrittsbalken inklusive Status (aktiv/inaktiv) und der ggf. verknüpften Experimentvariante.

Hinweis: Wenn Dein Convertly-Pro-Abonnement nicht mehr aktiv ist, werden alle bestehenden Fortschrittsbalken im Dashboard als deaktiviert markiert und im Storefront nicht mehr angezeigt.


Detail-Ansicht: Drei Tabs

Nach dem Erstellen oder Öffnen eines Fortschrittsbalkens stehen Dir drei Tabs zur Verfügung:

  1. Allgemein – Name, Aktiv-Status, Regel und A/B-Test-Verknüpfung
  2. Konfigurieren – Ziele (Goals), Schwellenwerte, Produkte/Versand, Design
  3. Snippets – Eigene Texte für die verschiedenen Zustände des Balkens

Tab 1 – Allgemein

Einstellungen

  • Name – interner Name zur Wiedererkennung im Dashboard. Wird im Storefront nicht angezeigt.
  • Aktiv – nur aktive Fortschrittsbalken werden im Storefront ausgespielt.

Regel

Eine optionale Shopware-Regel kann den Fortschrittsbalken zusätzlich auf bestimmte Kundengruppen, Verkaufskanäle, Lieferländer o. ä. einschränken.

Wichtig bei A/B-Tests: Wenn der Fortschrittsbalken bereits mit einer Experiment-Variante verknüpft ist, solltest Du hier keine zusätzliche Regel hinterlegen. Die Steuerung, welcher Besucher den Balken sieht, übernimmt dann das Experiment selbst. Andernfalls können sich beide Filter überschneiden und zu inkonsistentem Verhalten führen.

A/B-Testing

  • Experiment-Variante – wählst Du hier eine Variante aus, wird der Fortschrittsbalken nur Besuchern angezeigt, die dieser Variante zugeordnet sind. Lässt Du das Feld leer, wird er allen Besuchern (innerhalb der ggf. gewählten Regel) ausgespielt.
  • Experiment erstellen – über diesen Button kannst Du direkt aus der Detailansicht heraus ein passendes A/B-Test-Experiment mit zwei Varianten anlegen lassen, das automatisch mit dem Fortschrittsbalken verknüpft wird. So kannst Du sauber messen, ob der Nudge tatsächlich Wirkung zeigt: Eine Variante sieht den Balken, die andere nicht.

Statushinweise, die hier erscheinen können:

  • „Verknüpft mit Experiment ‚X‘ über Variante ‚Y‘.“ – alles korrekt verknüpft.
  • „Das verknüpfte Experiment ist derzeit pausiert.“ – der Balken wird aktuell keinem Besucher angezeigt.
  • „Das verknüpfte Experiment wurde noch nicht gestartet.“ – der Balken ist konfiguriert, das Experiment muss aber noch gestartet werden.

Tab 2 – Konfigurieren

Hier definierst Du die Ziele (Goals) des Fortschrittsbalkens. Pro Balken können beliebig viele Ziele angelegt werden, die in der Reihenfolge ihrer Schwellenwerte sortiert auf dem Balken erscheinen.

Es gibt zwei Ziel-Typen:

Typ „Versand“ (Free Shipping)

Belohnt den Kunden mit kostenfreiem Versand ab einem bestimmten Warenkorbwert.

  • Versandart – die Versandart, deren Schwelle für kostenlosen Versand verwendet werden soll.
  • Schwellenwert – bei Versand-Zielen ist dieser Wert optional und dient nur zur Sortierung/Position in der Verwaltung. Der tatsächliche Schwellenwert wird automatisch aus der Preismatrix der gewählten Versandart ermittelt.

Voraussetzung an die Versandart: Die ausgewählte Versandart muss in den Versandkosten eine Preismatrix auf Basis von „Warenkorbpreis“ verwenden und mindestens einen Eintrag mit 0,00 € enthalten – das ist der Punkt, ab dem der Versand kostenlos wird. Der niedrigste Warenkorb-Schwellenwert mit Preis 0 wird als Free-Shipping-Threshold ausgelesen.

Wenn der Kunde im Checkout die passende Versandart ausgewählt und die Schwelle erreicht hat, gilt das Versand-Ziel als „eingelöst“.

Typ „Produkt“ (Gratisgeschenk)

Legt dem Warenkorb beim Erreichen der Schwelle ein oder mehrere Produkte als Geschenk bei.

  • Schwellenwert – Warenkorbwert (ohne Versand, ohne bereits eingelöste Geschenke), ab dem das Geschenk verfügbar wird.
  • Produkt – ein oder mehrere Produkte, die als Geschenk infrage kommen. Auch Produktvarianten sind möglich; die Variantenmerkmale (z. B. Farbe: Rot | Größe: M) werden im Auswahldialog automatisch angezeigt.
  • ODER-Modus
    • deaktiviert (Standard, „UND-Modus“): Beim Einlösen werden alle konfigurierten Produkte gleichzeitig dem Warenkorb hinzugefügt.
    • aktiviert: Der Kunde muss beim Einlösen eines der konfigurierten Produkte auswählen (z. B. „Wähle Dein Gratisgeschenk: Tasse, Notizbuch oder Stoffbeutel“).
  • Geschenk sofort in den Warenkorb(seit 7.29.4) – ist diese Option aktiv, wird das Geschenk automatisch zum Warenkorb hinzugefügt, sobald die Schwelle erreicht ist. Der Kunde muss nichts mehr klicken.
    • Entfernt der Kunde das Geschenk manuell aus dem Warenkorb, kann er es später über die Einlöseaktion in der Fortschrittsanzeige wieder hinzufügen.
    • Im ODER-Modus ist diese Option nicht verfügbar – der Kunde muss in diesem Fall ja erst auswählen.
    • Für Versand-Ziele gilt die Option nicht.

Tipp: Nutze „Geschenk sofort in den Warenkorb“ gemeinsam mit einem A/B-Test, um zu messen, ob die automatische Beilage tatsächlich höher konvertiert als der manuelle Einlöse-Klick.

Wie Schwellenwert und Warenkorbwert berechnet werden

Der zugrundeliegende Warenkorbwert für die Fortschrittsberechnung ist die Summe aller normalen Warenkorbpositionen. Bereits eingelöste Geschenkprodukte werden bei der Berechnung herausgerechnet – der Kunde rutscht also nicht durch das Einlösen eines Geschenks aus der nächsten Schwelle heraus.

Ziele werden auf dem Balken automatisch nach ihrem Schwellenwert sortiert. Die Position eines Markers im Balken berechnet sich aus dem Verhältnis seines Schwellenwerts zum höchsten Schwellenwert auf dem Balken.

Design

Pro Fortschrittsbalken kannst Du drei Farben individuell festlegen:

  • Grundfarbe – Hintergrund-/Trackfarbe des Balkens.
  • Fortschrittsfarbe – die ausgefüllte Fortschrittsanzeige.
  • Textfarbe – Farbe der Marker-Beschriftungen.

Diese Werte werden als CSS Custom Properties (--convertly-progress-track, --convertly-progress-fill, --convertly-marker-label-color) in das Storefront-Markup ausgegeben. Wer eine tiefere Anpassung möchte, kann die Klassen .convertly-cart-threshold, .convertly-cart-threshold-progress-bar und .convertly-cart-threshold-progress-bar-fill im eigenen Theme weiter überschreiben.


Tab 3 – Snippets

Hier passt Du die Texte an, die Deinen Kunden über dem Fortschrittsbalken angezeigt werden. Du kannst alle Texte leer lassen – dann greifen die Standard-Snippets aus dem Plugin.

Es gibt vier Zustände, denen jeweils ein eigener Text zugeordnet werden kann:

ZustandWann wird er angezeigt?Verfügbare Platzhalter
Standard (nicht erreicht)Noch kein Ziel ist erreicht.%maxThreshold%, %nextGoal%
Erreicht – nächstes verfügbarEin Ziel ist erreicht und einlösbar (z. B. Geschenk muss noch geklickt werden).%currentGoal%
Eingelöst – nächstes verfügbarEin Ziel wurde eingelöst, ein weiteres Ziel folgt noch.%currentGoal%, %nextGoal%, %nextGoalEstimate%
Eingelöst – nichts verfügbarDas letzte Ziel wurde eingelöst.%currentGoal%

Platzhalter im Detail

  • %currentGoal% – das Label des zuletzt erreichten oder eingelösten Ziels.
  • %nextGoal% – das Label des nächsten noch nicht erreichten Ziels.
  • %nextGoalEstimate% – formatierter Betrag (mit Währung), der noch fehlt, um das nächste Ziel zu erreichen.
  • %maxThreshold% – formatierter Schwellenwert des nächsten Ziels.

Standardtexte (Deutsch)

Wenn Du keine eigenen Snippets hinterlegst, verwendet Convertly diese Standardformulierungen:

  • Standard (nicht erreicht): „Erreiche den Warenkorb-Wert von %maxThreshold% und erhalte %nextGoal%.“
  • Erreicht – nächstes verfügbar: „Glückwunsch! Du hast %currentGoal% erreicht. Löse jetzt deine Prämie ein.“
  • Eingelöst – nächstes verfügbar: „Glückwunsch! Du hast %currentGoal% erreicht. Nur noch %nextGoalEstimate% bis %nextGoal%.“
  • Eingelöst – nichts verfügbar: „Glückwunsch! Du hast %currentGoal% erreicht.“

HTML in eigenen Snippets

Eigene Snippets dürfen einfaches HTML enthalten (z. B. <strong>, <span>). Der Inhalt wird vor der Ausgabe durch Shopwares sw_sanitize gefiltert, um XSS auszuschließen. Wer eigene Style-Hooks setzen möchte, kann beispielsweise wie im Standard die Klasse convertly-cart-threshold-progress-bar-description-goal verwenden, um Ziel-Labels visuell hervorzuheben.


Verhalten im Storefront

Wo erscheint der Balken?

Der Fortschrittsbalken wird an zwei Stellen automatisch eingebunden:

  • Warenkorbseite (/checkout/cart) – im Hauptbereich oberhalb der Positionsliste.
  • Offcanvas-Cart – in der seitlichen Warenkorb-Schublade.

Sind mehrere Fortschrittsbalken aktiv und treffen auf den aktuellen Besucher zu, werden sie nacheinander ausgespielt – sortiert nach dem Erstellungsdatum (älteste zuerst).

Statusanzeige der Marker

Jedes Ziel wird auf dem Balken durch einen Marker repräsentiert, der einen von drei Zuständen anzeigen kann:

  • Noch nicht erreicht – der Warenkorbwert liegt unter dem Schwellenwert.
  • Erreicht – die Schwelle ist erreicht, aber das Ziel ist noch nicht eingelöst (z. B. Geschenk wurde noch nicht ausgewählt; Versandart wurde noch nicht im Checkout gewählt).
  • Eingelöst – das Geschenk liegt im Warenkorb bzw. die richtige Versandart ist ausgewählt.

Bei Produktzielen mit mehreren Optionen im ODER-Modus erscheint zusätzlich eine Auswahl im Marker, sobald die Schwelle erreicht ist.

Verhalten bei „Geschenk sofort in den Warenkorb“

Bei aktivierter Option und erreichter Schwelle wird das Geschenkprodukt automatisch dem Warenkorb beigelegt. Entfernt der Kunde das Geschenk wieder, merkt sich Convertly das pro Sitzung – das Geschenk wird also nicht sofort wieder eingefügt, kann aber jederzeit über die Einlöseaktion am Marker erneut hinzugefügt werden.


Zusammenspiel mit A/B-Tests

Convertly-Fortschrittsbalken sind eng mit den Experimenten verzahnt. Über die Verknüpfung mit einer Variante ergeben sich folgende typische Setups:

1. Klassischer Nudge-Test (Variante A: Balken aus, Variante B: Balken an) Lege ein Experiment mit zwei Varianten an, verknüpfe den Fortschrittsbalken nur mit Variante B. So messen die Convertly-Auswertungen direkt, ob der Balken die Conversion oder den durchschnittlichen Warenkorbwert (ARPU) hebt.

2. Schwellen-Test (Variante A: 50 €-Schwelle, Variante B: 75 €-Schwelle) Lege zwei Fortschrittsbalken an, jeweils einer pro Variante verknüpft. Du kannst so herausfinden, welche Schwelle besser konvertiert – ein klassischer Trade-off zwischen Reichweite (niedrige Schwelle) und Warenkorbwert (höhere Schwelle).

3. Belohnungs-Test (Variante A: Versand frei, Variante B: Gratisgeschenk) Zwei Balken mit unterschiedlichen Ziel-Typen, jeweils einer Variante zugeordnet. Welche Belohnung motiviert Deine Kunden mehr?

4. Permanente Einblendung (alle Besucher) Wenn Du keinen Test fahren willst, lass das Variantenfeld einfach leer. Der Balken wird dann allen Besuchern angezeigt (eingeschränkt auf die ggf. gewählte Regel).


Häufige Fragen / Troubleshooting

Der Fortschrittsbalken wird im Storefront nicht angezeigt. Prüfe in dieser Reihenfolge:

  1. Ist der Fortschrittsbalken auf Aktiv gesetzt?
  2. Ist eine Regel hinterlegt, die auf den aktuellen Besucher nicht zutrifft?
  3. Ist eine Experimentvariante verknüpft – läuft das Experiment? Ist es nicht pausiert?
  4. Ist mindestens ein Ziel hinterlegt? Ohne Ziele wird der Balken nicht ausgespielt.
  5. Bei Versand-Zielen: Hat die ausgewählte Versandart eine Preismatrix nach Warenkorbpreis mit einem 0-€-Eintrag?
  6. Ist Dein Convertly-Pro-Abonnement aktiv?

Der Schwellenwert für kostenlosen Versand stimmt nicht. Der Wert wird dynamisch aus der Preismatrix der Versandart ausgelesen – konkret die niedrigste „Warenkorbpreis ab“-Schwelle, bei der der Versandpreis 0 € beträgt. Prüfe die Versandkosten-Konfiguration in Shopware unter Einstellungen → Versand.

Eingelöste Geschenke verfälschen den Warenkorbwert. Tun sie nicht – Convertly rechnet bereits eingelöste Geschenkprodukte explizit aus dem Vergleichswert heraus. Der Kunde fällt also nicht durch das Einlösen aus der nächsten Schwelle.

Im ODER-Modus lässt sich „Geschenk sofort in den Warenkorb“ nicht aktivieren. Das ist Absicht: Bei mehreren auswählbaren Geschenken kann Convertly nicht selbst entscheiden, welches automatisch beigelegt werden soll. Wer eine automatische Beilage möchte, muss den ODER-Modus deaktivieren – dann werden alle konfigurierten Produkte als Set beigelegt.

Der Balken springt nach dem Hinzufügen eines Produkts nicht weiter. Stelle sicher, dass die Storefront-Caches nach Konfigurationsänderungen geleert wurden. Der Datenprovider arbeitet pro Request, sodass nach jeder Warenkorbänderung neu gerechnet wird – Caching auf Layout- oder HTTP-Ebene kann das Verhalten aber überlagern.