Warenkorb-Zielleiste

Die Cart Goal Bar macht aus einem Angebot „Mehr ausgeben, mehr sparen“ eine Zeile und eine Leiste: wie viel noch auszugeben ist, was das freischaltet, und eine Marke für jede Stufe auf dem Weg. Sie füllt sich, während der Warenkorb des Käufers wächst.

Einrichtung

Schalte Show on storefront im Rabatt „Mehr ausgeben, mehr sparen“ ein.

Öffne den Rabatt Mehr ausgeben, mehr sparen und schalte Show on storefront ein. Bei einem neuen Rabatt ist es an.
Klicke auf Add neben Cart Goal Bar.

Im Panel Add to your theme auf dieser Karte steht in der Zeile Cart Goal Bar “Shows progress toward the next tier in the cart”. Ihre Schaltfläche Add öffnet deinen Theme-Editor mit dem Block bereit zum Platzieren.
Platziere den Block im Theme-Editor und speichere.

Setze den Block dorthin, wo Käufer ihren Fortschritt sehen sollen, und klicke auf Save.
Lege Farben und Texte der Leiste fest.

Alles Folgende ist eine Theme-Editor-Einstellung am Block.

Einstellungen

Bar

Track color — der ungefüllte Teil der Leiste. Standard #e5e5e5.
Fill color — der gefüllte Teil. Standard #1a1a1a.
Unlocked color — wird verwendet, sobald die oberste Stufe erreicht ist. Standard #2e7d32.
Text color — die Zeile über der Leiste.
Bar height — 4–32 px. Standard 10.
Roundness — 0–24 px. Standard 8.
Show amounts under the bar — standardmäßig aus. Zeigt das Ausgegebene und die nächste Schwelle.

Wording

Goal text — Standard Spend {amount} more to get {percent} off. {amount} und {percent} werden automatisch ersetzt.
Unlocked text — Standard You’ve unlocked {percent} off!
Tier mark colour — Standard #ffffff. Für noch nicht erreichte Marken; eine erreichte Marke nimmt die Freischaltfarbe.
Tier mark shape — Circle (Standard) oder Square.
Tier mark size — 6–28 px. Standard 14.
Show tier amounts under the bar — standardmäßig aus, weil sich Beschriftungen auf schmalen Bildschirmen überlappen können.
Tier reached text — Standard You've got {current} off. Spend {amount} more to get {percent} off. Wird gezeigt, sobald eine Stufe erreicht ist und noch eine weitere aussteht; {current}, {amount} und {percent} werden automatisch ersetzt.
Code hint prefix — Standard “Use code”. Wird nur bei Code-Rabatten gezeigt.
Static text — Standard Spend {amount} to get {percent} off. Wird verwendet, wenn sich der Fortschritt nicht messen lässt.
Static text with excluded items — Standard Spend {amount} to get {percent} off eligible items. Wird statt des statischen Textes verwendet, wenn der Rabatt einzelne Artikel ausschließt.

Beispiele

Eine ruhige Leiste in deinen Markenfarben

Fill color: #1a1a1a
Unlocked color: #2e7d32
Bar height: 10
Roundness: 8
Show amounts under the bar: off

Eine auffällige Leiste, die jede Stufe benennt

Bar height: 16
Tier mark shape: Square
Tier mark size: 18
Show tier amounts under the bar: on
Goal text: Only {amount} more for {percent} off

So sieht es der Käufer

Solange die App den Warenkorb messen kann, zählt die Zeile herunter — “Spend $20 more to get 15% off” — und die Leiste füllt sich zur nächsten Marke. Sobald eine Stufe erreicht ist und noch eine weitere aussteht, wechselt die Zeile zum Tier reached text; auf der obersten Stufe wechselt sie zum Unlocked text, und die Leiste nimmt die Freischaltfarbe an. Marken werden für bis zu 6 Stufen gezeichnet.

Lässt sich der Fortschritt nicht messen, nennt der Block stattdessen das Angebot mit dem Static text — nie eine Fortschrittsaussage, für die er nicht geradestehen kann. Der Rabatt selbst ist in beiden Fällen unberührt: Shopify prüft den Warenkorb und wendet ihn an, wenn der Warenkorb qualifiziert.

Bei einem Code-Rabatt wird das Code hint prefix gezeigt, damit der Käufer weiß, dass ein Code nötig ist.

Limits und Hinweise

Stufenmarken werden für bis zu 6 Stufen gezeichnet. Darüber hinaus füllt sich die Leiste weiterhin und die Texte zählen weiterhin herunter; nur die Marken entfallen.
Bar height 4–32 px · Roundness 0–24 px · Tier mark size 6–28 px.
Bedingungen und Ausschlüsse können den Live-Fortschritt abschalten. Wenn die Regeln des Angebots dazu führen, dass die App den berechtigten Teil des Warenkorbs nicht messen kann, fällt der Block auf den statischen Text zurück. Die Karte Show on storefront des Rabatts sagt, welcher Fall gilt.
Das Angebot zu pausieren blendet die Leiste aus, und die Karte sagt das, statt einen Schalter stehen zu lassen, der aktiv aussieht.
Kein App embed nötig. Der Block rendert von selbst.