Ga naar inhoud
DiscountOS Docs

Doelbalk in de winkelwagen

De Cart Goal Bar maakt van een aanbieding meer uitgeven, meer besparen één regel en één balk: hoeveel meer er uitgegeven moet worden, wat dat oplevert, en een markering voor elk niveau onderweg. Hij vult zich naarmate de winkelwagen van de koper groeit.

Instellen

Section titled “Instellen”

  1. Zet Show on storefront aan in de korting meer uitgeven, meer besparen.

    Open de korting meer uitgeven, meer besparen en zet Show on storefront aan. Bij een nieuwe korting staat het aan.

  2. Klik op Add naast Cart Goal Bar.

    In het paneel Add to your theme op die kaart staat bij de rij Cart Goal Bar de tekst “Shows progress toward the next tier in the cart”. De knop Add opent je thema-editor met het blok klaar om te plaatsen.

    De kaart Show on storefront van een Spend More Save More-korting, aangezet, met het paneel Add to your theme met Spend More Save More en Cart Goal Bar, elk met een knop Add

  3. Plaats het blok in de thema-editor en sla op.

    Zet het blok waar kopers hun voortgang horen te zien en klik op Save.

  4. Stel de kleuren en de tekst van de balk in.

    Alles hieronder is een instelling van het blok in de thema-editor.

Instellingen

Section titled “Instellingen”

Bar

Section titled “Bar”
  • Track color — het niet-gevulde deel van de balk. Standaard #e5e5e5.
  • Fill color — het gevulde deel. Standaard #1a1a1a.
  • Unlocked color — gebruikt zodra het hoogste niveau is bereikt. Standaard #2e7d32.
  • Text color — de regel boven de balk.
  • Bar height — 4–32 px. Standaard 10.
  • Roundness — 0–24 px. Standaard 8.
  • Show amounts under the bar — standaard uit. Toont het uitgegeven bedrag en de volgende grens.

Wording

Section titled “Wording”
  • Goal text — standaard Spend {amount} more to get {percent} off. {amount} en {percent} worden automatisch vervangen.
  • Unlocked text — standaard You’ve unlocked {percent} off!
  • Tier mark colour — standaard #ffffff. Markeert wat nog niet is bereikt; een bereikte markering krijgt de kleur voor ontgrendeld.
  • Tier mark shape — Circle (standaard) of Square.
  • Tier mark size — 6–28 px. Standaard 14.
  • Show tier amounts under the bar — standaard uit, omdat labels op smalle schermen kunnen overlappen.
  • Tier reached text — standaard You've got {current} off. Spend {amount} more to get {percent} off. Te zien zodra een niveau is bereikt en er nog een over is; {current}, {amount} en {percent} worden automatisch vervangen.
  • Code hint prefix — standaard “Use code”. Alleen te zien bij kortingscodes.
  • Static text — standaard Spend {amount} to get {percent} off. Gebruikt wanneer de voortgang niet te meten is.
  • Static text with excluded items — standaard Spend {amount} to get {percent} off eligible items. Wordt in plaats van de statische tekst gebruikt als de korting sommige artikelen uitsluit.

Voorbeelden

Section titled “Voorbeelden”

Een rustige balk in je merkkleuren

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

Een opvallende balk die elk niveau benoemt

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

Hoe de koper het ziet

Section titled “Hoe de koper het ziet”

Zolang de app de winkelwagen kan meten, telt de regel af — “Spend $20 more to get 15% off” — en vult de balk zich naar de volgende markering. Zodra een niveau is bereikt en er nog een over is, schakelt de regel over naar de Tier reached text; op het hoogste niveau schakelt hij over naar de Unlocked text en krijgt de balk de kleur voor ontgrendeld. Er worden markeringen getekend voor maximaal 6 niveaus.

Kan de voortgang niet worden gemeten, dan benoemt het blok de aanbieding met de Static text — nooit een uitspraak over voortgang die het niet waar kan maken. De korting zelf blijft in beide gevallen ongemoeid: Shopify controleert de winkelwagen en past hem toe zodra de winkelwagen in aanmerking komt.

Bij een kortingscode wordt de Code hint prefix getoond, zodat de koper weet dat er een code nodig is.

Limieten en aandachtspunten

Section titled “Limieten en aandachtspunten”
  • Er worden markeringen getekend voor maximaal 6 niveaus. Daarboven vult de balk zich nog steeds en telt de tekst nog steeds af; alleen de markeringen vervallen.
  • Bar height 4–32 px · Roundness 0–24 px · Tier mark size 6–28 px.
  • Voorwaarden en uitsluitingen kunnen de live voortgang uitzetten. Betekenen de regels van de aanbieding dat de app het deel van de winkelwagen dat in aanmerking komt niet kan meten, dan valt het blok terug op de statische tekst. De kaart Show on storefront van de korting zegt welk geval van toepassing is.
  • De aanbieding pauzeren verbergt de balk, en de kaart zegt dat ook, in plaats van een schakelaar achter te laten die actief lijkt.
  • Geen app embed nodig. Het blok rendert op eigen kracht.

Verwant

Section titled “Verwant”