Fortschrittsbalken gestalten

Fortschrittsbalken für kostenlosen Versand und Warenkorb-Rabatte gestalten: Farben, Layout, Texte und Animationen anpassen.

Gestalte den Fortschrittsbalken für kostenlosen Versand und Rabatte im Warenkorb. Passe Farben, Layout, Texte und Animationen passend zu deinem Shop an.

Die Primärfarbe bestimmt Balkenfüllung, erreichte Meilensteine und Hintergründe. Die Sekundärfarbe bestimmt Akzente und den nächsten offenen Meilenstein. Alles Weitere leitet das Plugin daraus ab.

Am schnellsten geht es mit dem Button "Farben aus Theme übernehmen". Der zieht die Farben aus dem Theme des gewählten Verkaufskanals, damit der Balken direkt zum Shop passt.

Layout und Größen des Fortschrittsbalkens

Unter Erweitert, Layout und Größen stellst du das Erscheinungsbild ein:

Einstellung	Standard	Wirkung
Überschrift anzeigen	aus	Titel über dem Balken
Schwelle (Betrag) anzeigen	an	Betrag über jedem Meilenstein
Titel des Meilensteins anzeigen	an	Name unter jedem Meilenstein
Cent-Werte anzeigen	aus	50,00 Euro statt 50 Euro
Position Infotext	unter dem Balken	Über, in oder unter dem Balken
Höhe des Fortschrittsbalkens	0.5rem	Dicke des Balkens
Größe Meilenstein	2rem	Durchmesser der Meilensteinpunkte
Abstand Infotext	3rem	Abstand zwischen Text und Balken
Box-Abstände (Padding)	3rem 3rem 1rem 1rem	Innenabstände oben, rechts, unten, links

Bei den Größen kannst du die üblichen CSS-Werte eintragen, also etwa 12px oder 0.75rem.

Fortschrittsbalken im Off-Canvas-Warenkorb gestalten

Der Off-Canvas-Warenkorb ist schmaler als die Warenkorbseite. Normalerweise übernimmt er einfach die Einstellungen von oben, und das reicht meistens auch.

Brauchst du dort ein eigenes Layout, schalte "Offcanvas-Warenkorb abweichend konfigurieren" ein. Erst dann greifen die Felder darunter. Solange die Option aus ist, kannst du dort eintragen was du willst, es passiert nichts.

Farben, Formen und Schriftgrößen anpassen

Unter Erweitert, Farben und Formen lässt sich jedes Detail einzeln überschreiben: Hintergrund, Rahmen, Radien, Schriftgrößen und die Farben für erreichte und offene Meilensteine.

Jedes Feld, das du leer lässt, wird automatisch aus deinen beiden Grundfarben abgeleitet.

In den Farbfeldern sind auch Farbverläufe erlaubt, zum Beispiel linear-gradient(90deg, #22c55e, #16a34a).

Texte für kostenlosen Versand und Rabatte anpassen

Alle Texte im Fortschrittsbalken änderst du über die Textbausteine.

Textbaustein	Standardtext
title	Sicher dir deinen Vorteil
message.addMore	Noch %amount% um %label% zu erhalten!
message.addMoreValue	Noch %amount% um %label% im Wert von %value% zu erhalten!
message.reached	Ziel erreicht!
message.keepShopping	Weiter einkaufen, um den nächsten Vorteil zu erreichen
message.excludedHint	Hinweis auf ausgeschlossene Artikel samt anrechenbarem Warenwert

Diese Platzhalter stehen dir zur Verfügung:

%amount% für den noch fehlenden Betrag, %label% für den Titel des nächsten Meilensteins, %value% für den hinterlegten Wert des Vorteils und %eligibleAmount% für den anrechenbaren Warenwert.

Animation beim Erreichen eines Meilensteins

Unter Anzeige und Verhalten wählst du zwischen Konfetti, Feuerwerk oder gar keiner Animation.

Möchtest du eigene Konfettibilder verwenden, etwa dein Logo, schalte "Individuelle Konfetti-Bilder aktivieren" ein und hinterleg die Bilder im Medienfeld darunter. Am besten funktionieren quadratische PNG-Dateien mit transparentem Hintergrund, ungefähr 64 mal 64 Pixel.