Das Aussehen des Warenkorb-Fortschrittsbalkens ohne Code anpassen

Wo die Design-Einstellungen liegen

Alles Optische stellen Sie auf der Seite Design von Yaco Progress Bar ein. Sie ist in Tabs aufgeteilt, einen pro Teil des Balkens:

Tab	Was er steuert
Balkenstil	Anordnung der Stufen und Balken, Farben, Höhe, Rahmen, Schatten, Eckenradius
Bilder	Symbole der Stufen und ihre Farben, erreicht oder nicht
Stufenname	Ob die Namen der Stufen erscheinen, ihre Größe und Farben
Schwellenwert	Der Schwellenwert unter jeder Stufe
Marker	Die Punkte oder Bilder, die jede Stufe auf dem Balken markieren
Betrag	Der Fortschrittswert und der Gesamtwert
Container	Außen- und Innenabstände, Rahmen, Hintergrund, maximale Breite, eigenes CSS
Erfolgsmeldung	Die Meldungszeile und das Runden der Beträge; siehe Erfolgsmeldung
Geschenk-Oberfläche	Geschenk-Button, Geschenkauswahl und Geschenkliste, dazu die Wahl zwischen Liste und Button für die Balken dieses Designs; siehe Geschenkauswahl
Presets	Fertige Designs als Ausgangspunkt

Eine Live-Vorschau folgt Ihren Änderungen; im Shop erscheint nichts vor Speichern (siehe Speichern und veröffentlichen).

Die Anordnung der Stufen wählen

Im Tab Balkenstil legt Stufenanzeige fest, wie sich die Stufen den Balken teilen:

• Symmetrisch: jede Stufe erhält dieselbe Breite.
• Volle Breite: die Stufen ziehen sich über die ganze Breite.
• Proportional: die Breite jeder Stufe folgt ihrem Schwellenwert.
• Einzeln: es wird immer nur eine Stufe angezeigt.

Unter Proportional legen Sie mit Manuelle Proportionen den Anteil jeder Stufe am Balken fest. Jede Stufe startet mit 1, sodass sich die Stufen den Balken gleichmäßig teilen, bis Sie einen Wert ändern. Eine Stufe mit 0 nimmt keine Breite ein: Sie steht am Anfang des Balkens, und die übrigen Stufen teilen sich den ganzen Platz, auch bei verketteten Balken. Stehen alle Stufen auf 0, teilen sie sich den Balken gleichmäßig.

Proportional und Einzeln benötigen mindestens 2 aktive Stufen auf demselben Balken (verkettete Balken zählen als ein Balken). Mit einer Stufe pro Balken sind beide Optionen ausgegraut, und ein Design, das bereits auf eine davon eingestellt ist, wird als Symmetrisch angezeigt.

Angezeigte Stufen begrenzen ist standardmäßig deaktiviert: Der Balken zeigt alle Stufen. Setzen Sie das Häkchen, damit er höchstens 4 Stufen gleichzeitig zeigt (Angezeigte Stufen (max.)), davon immer mindestens 2 nicht erreichte (Angezeigte nicht erreichte Stufen (min.)). Das Fenster rückt weiter, sobald Stufen freigeschaltet werden. Im Modus Einzeln gilt die Begrenzung nicht. Mit Fortschrittsbalken verketten gilt die Begrenzung für alle verketteten Balken zusammen: Ein Balken, von dessen Stufen keine im Fenster liegt, wird ausgeblendet, bis das Fenster ihn erreicht. Das gilt für verkettete Balken nach Betrag und Gewicht, deren Stufen sich nach Schwellenwert verschränken. Aufeinanderfolgende Balken nach Menge werden als ein Balken gezeichnet, behalten aber jeweils ihre eigene Begrenzung, da sie unterschiedliche Produkte zählen können. Zwei solche Balken mit einer Begrenzung von 4 können daher bis zu 8 Stufen zeigen.

Derselbe Tab enthält Preisausrichtung und die Balkenfarben; Höhe, Rahmen, Schatten und Radius finden Sie unter Erweiterte Optionen.

Einen festen Farbverlauf über die ganze Leiste legen

Standardmäßig wandert ein unter Standard-Balkenfarbe gewählter Farbverlauf mit der Füllung mit: Egal wie voll der Warenkorb ist, das Ende der Füllung zeigt immer die letzte Farbe. Aktivieren Sie Fester Farbverlauf über die ganze Leiste, damit der Verlauf einmal über die gesamte Leiste gelegt wird. Die Füllung legt ihn frei, während der Warenkorb wächst, und mit Fortschrittsbalken verketten läuft ein einziger Verlauf von der ersten bis zur letzten Leiste. Erreichte Markierungen ohne eigene Farbe für „erreicht“ übernehmen die Farbe der Leiste darunter, auch wenn alle Stufen erreicht sind: Die Einstellung Farbe bei allen erreichten Markierungen wird in diesem Modus ausgeblendet und ignoriert. Ein animierter Farbverlauf steht in diesem Modus still.

Aus den Markierungen erzeugen baut diesen Verlauf für Sie: eine Farbe pro Stufe, die ihrer erreichten Markierung (oder der Hintergrund ihres Bildes, wenn Bilder als Markierungen dienen), an der Stelle, an der die Markierung in der Vorschau steht. Es braucht mindestens zwei verschiedene Farben. Das Ergebnis öffnet sich im Verlaufs-Editor, wo Sie jede Farbe und Position weiter anpassen können. Klicken Sie nach dem Hinzufügen oder Verschieben einer Stufe erneut.

Mehrere Balken in einem Block stapeln

Haben mindestens zwei Balken Stufen, zum Beispiel ein Betragsbalken für den Gratisversand und ein Mengenbalken für „3 kaufen, 20 % sparen“, legt Anordnung der Balken unter Balkenstil fest, wie sie sich den Block teilen:

• Nebeneinander (Standard): Die Balken stehen in einer Zeile, mit einer Meldungszeile für alle.
• Gestapelt: Jeder Balken hat seine eigene Zeile, untereinander, mit eigener Meldung: dem Text seiner nächsten Stufe und, sobald alle seine Stufen erreicht sind, seiner eigenen Erfolgsmeldung (siehe Erfolgsmeldung).

Abstand zwischen den Balken legt den Abstand zwischen den gestapelten Zeilen fest (standardmäßig 16 px). Ist Fortschrittsbalken verketten aktiviert, teilen sich aufeinanderfolgende Balken desselben Typs (Betrag, Menge …) eine Zeile und wirken wie ein einziger Balken. Ein Balken eines anderen Typs dazwischen trennt sie, auch wenn ein Block ihn nicht anzeigt. Der Geschenk-Button und die Geschenkliste bleiben unter der letzten Zeile. Die Anordnung gehört zum Design: Ein Warenkorb-Drawer kann seine Balken stapeln, während die Produktseite sie nebeneinander zeigt.

Marker, Preise, Bilder und Beträge gestalten

• Marker: schalten Sie Markierung anzeigen ein, oder nutzen Sie das Bild der Stufe mit Stufenbild als Markierung verwenden. Die Farben können je nach Zustand abweichen: nicht erreicht, erreicht, alle erreicht.
• Schwellenwert: Schwellenwert der Stufe anzeigen, dann Größe, Fettdruck, Farben pro Zustand, Innenabstände und Ränder. Der Text des Schwellenwerts selbst lässt sich für jede Stufe umschreiben: siehe Stufe hinzufügen.
• Bilder: Stufenbild anzeigen aktiviert Bilder für alle Stufen. Das Bild jeder Stufe wählen Sie in ihrer Karte; dieser Tab regelt nur Größe, Farben, Radius und Schatten. Bei einer Geschenk-Stufe ist Bild und dann Bild des Geschenkprodukts voreingestellt, sobald Sie das Bild aktivieren: Die Stufe zeigt das Bild der geschenkten Variante (oder das Hauptbild des Produkts) und folgt ihm, wenn es sich in Shopify ändert. Bei mehreren Geschenken wählen Sie das Produkt oder, wenn ein Produkt in mehreren Varianten verschenkt wird, die Variante; ohne Bild wird das des nächsten Geschenkprodukts verwendet, sonst das Geschenk-Symbol.
• Betrag: Fortschrittswert anzeigen und Gesamtwert anzeigen, mit Farbe, Größe und Abstand.

4:26

Beträge auf ganze Zahlen runden

Aktivieren Sie im Tab Erfolgsmeldung neben Dezimalstellen immer anzeigen die Option Beträge auf ganze Zahlen runden: Alle Beträge, die der Balken mit diesem Design zeigt, erscheinen dann ohne Cent. Das gilt für jede Währung, ob der Betrag für einen Markt umgerechnet wird oder nicht:

• Schwellenwerte und der Restbetrag werden aufgerundet;
• der Warenkorbwert und die Rabattbeträge werden abgerundet: Der Balken verspricht nie mehr, als der Kunde bekommt;
• der Restbetrag wird vom angezeigten Schwellenwert aus gerechnet: Gesamtwert und Restbetrag ergeben zusammen immer diesen Schwellenwert. Solange die Stufe nicht erreicht ist, zeigt der Restbetrag nie 0, sondern mindestens 1.

Bei Stufen zu 100,50 € und 200,50 € und einem Warenkorb von 24,95 € zeigt der Balken „77 € fehlen“, Schwellenwerte von „101 €“ und „201 €“ und einen Gesamtwert von „24 €“.

Das Runden ändert nur, was geschrieben steht: Eine Stufe schaltet immer bei ihrem genauen Schwellenwert frei. Die Stufe zu 100,50 € schaltet bei 100,50 € frei, auch wenn sie „101 €“ anzeigt. Ist die letzte Stufe der Leiste erreicht, zeigt der Gesamtwert nie weniger als ihren Schwellenwert: Ein Warenkorb von 100,50 € erscheint als „101 €“, nicht als „100 €“.

KI-Assistenten und Screenreader lesen immer die genauen Beträge: Die Zusammenfassung Ihrer Angebote und der für den Balken vorgelesene Text behalten die Cent („100,50 €“, „75,55 € fehlen“).

Gewichte, Mengen und Bestellanzahlen werden nicht gerundet. Solange das Runden aktiv ist, ist Dezimalstellen immer anzeigen ausgegraut. Im Checkout gilt die Einstellung des Standarddesigns. Diese Option ersetzt Umgerechnete Werte aufrunden, um Dezimalzahlen zu vermeiden, bisher in den Erweiterten Optionen der Stufe: Hatten Sie sie bei einer aktiven Stufe aktiviert, ist sie jetzt in Ihren Designs aktiviert.

Festlegen, wohin ein Klick auf eine Stufe führt

In den Einstellungen jeder Stufe legt die Karte Beim Klick fest, was passiert, wenn ein Kunde auf die Stufe in der Leiste oder auf ein Geschenk in der Inline-Geschenkliste klickt:

• Keine Weiterleitung: Der Klick bewirkt nichts.
• Seite des Geschenkprodukts: die Standardeinstellung einer Geschenkstufe.
• Ein anderes Produkt: ein beliebiges Produkt deines Shops.
• Eine Seite oder URL: eine Seite deines Shops wie /pages/versand oder /collections/sommer, in der Sprache des Kunden geöffnet, oder eine vollständige https://-Adresse.

Jeder Stufentyp kann zu einem Produkt oder einer Seite führen, nicht nur Geschenkstufen. Die Einstellung gehört zum ausgewählten Design: Wechsle oben auf der Seite das Design, um sie für ein anderes festzulegen.

Abstände für Desktop und Mobil einstellen

Wechseln Sie im Tab Container oben zwischen Standard und Mobil, um Außen- und Innenabstände je Bildschirmgröße festzulegen. Maximale Breite gilt nur auf dem Desktop. Diese Werte gelten überall, wo das Design verwendet wird; die eigenen Einstellungen einer Platzierung in der Theme-Integration können sie überschreiben (siehe Theme-Platzierung).

Mehr mit eigenem CSS

Unten im Tab Container nimmt Benutzerdefiniertes CSS für Fortschrittsbalken Ihr eigenes CSS auf, und CSS-Klassennamen fügt dem Container des Balkens Klassen hinzu. Das CSS wird beim Speichern geprüft und auf den Balken begrenzt: Ihre Regeln wirken nicht auf den Rest des Themes.

Mit einem Preset oder aus einem anderen Shop starten

• Presets: wählen Sie ein fertiges Design und klicken Sie auf Anwenden. Es ersetzt den Stil des Designs, das Sie gerade bearbeiten; Ihre Erfolgsmeldung, die Geschenktexte und ihre Übersetzungen bleiben erhalten.
• Aus einem anderen Shop importieren: Sie betreiben mehrere Shops? Das Symbol neben Design hinzufügen oder die Karte Design aus einem anderen Shop übernehmen unter Presets kopiert eines ihrer Designs als neues Design, ohne bestehende zu ändern. Ein Shop erscheint, wenn Sie in beiden dieselbe verifizierte Shopify-E-Mail-Adresse nutzen und Yaco Progress Bar dort mindestens einmal geöffnet haben. Jedes Design in der Liste zeigt seine Hauptfarben und die Platzierungen, an denen es in diesem Shop erscheint – so lassen sich zwei Designs namens „Default“ leicht unterscheiden.

In beiden Fällen klicken Sie auf Speichern, um das Ergebnis zu behalten.

Mehrere Designs nutzen

Design hinzufügen und Design duplizieren legen weitere Designs an, etwa eines für den Warenkorb-Drawer und eines für die Produktseite. Ein Design ist das Standarddesign; mit Dieses Design verwenden weisen Sie ein anderes bestimmten Platzierungen zu oder öffnen die Warenkorbseite im Theme-Editor: Im App-Block Yaco progress bar wählen Sie es unter Design nach Namen aus.

Jedes Design kann Stufen mit mehreren Geschenken außerdem auf seine Weise zeigen: in einem Balken als Liste, in einem anderen mit dem Button Geschenk auswählen. Das stellen Sie in der Karte Geschenkanzeige im Tab Geschenk-Oberfläche ein (siehe Geschenkauswahl).