Barra obiettivo del carrello

La Cart Goal Bar trasforma un’offerta spendi di più, risparmia di più in una riga e una barra: quanto manca da spendere, che cosa sblocca e un segno per ogni livello lungo il percorso. Si riempie man mano che il carrello dell’acquirente cresce.

Configurazione

1. Attiva Show on storefront nello sconto spendi di più, risparmia di più.

   Apri lo sconto spendi di più, risparmia di più e attiva Show on storefront. In uno sconto nuovo è già attivo.

2. Fai clic su Add accanto a Cart Goal Bar.

   Nel pannello Add to your theme di quella scheda, la riga Cart Goal Bar dice “Shows progress toward the next tier in the cart”. Il suo pulsante Add apre il tuo editor dei temi con il blocco pronto da collocare.

   

3. Colloca il blocco nell’editor dei temi e salva.

   Metti il blocco dove gli acquirenti devono vedere il loro progresso, poi fai clic su Save.

4. Definisci i colori e i testi della barra.

   Tutto quello che segue è un’impostazione dell’editor dei temi sul blocco.

Impostazioni

Bar

• Track color — la parte non riempita della barra. Predefinito #e5e5e5.
• Fill color — la parte riempita. Predefinito #1a1a1a.
• Unlocked color — usato una volta raggiunto il livello più alto. Predefinito #2e7d32.
• Text color — la riga sopra la barra.
• Bar height — 4–32 px. Predefinito 10.
• Roundness — 0–24 px. Predefinito 8.
• Show amounts under the bar — disattivato per impostazione predefinita. Mostra la spesa fatta e la soglia successiva.

Wording

• Goal text — predefinito Spend {amount} more to get {percent} off. {amount} e {percent} vengono sostituiti automaticamente.
• Unlocked text — predefinito You’ve unlocked {percent} off!
• Tier mark colour — predefinito #ffffff. Segna i livelli non ancora raggiunti; un segno raggiunto usa il colore di sblocco.
• Tier mark shape — Circle (predefinito) o Square.
• Tier mark size — 6–28 px. Predefinito 14.
• Show tier amounts under the bar — disattivato per impostazione predefinita, perché le etichette possono sovrapporsi sugli schermi stretti.
• Tier reached text — predefinito You've got {current} off. Spend {amount} more to get {percent} off. Mostrato una volta raggiunto un livello quando ne resta un altro; {current}, {amount} e {percent} vengono sostituiti automaticamente.
• Code hint prefix — predefinito “Use code”. Mostrato solo negli sconti con codice.
• Static text — predefinito Spend {amount} to get {percent} off. Usato quando il progresso non si può misurare.
• Static text with excluded items — predefinito Spend {amount} to get {percent} off eligible items. Usato al posto del testo statico quando lo sconto esclude alcuni articoli.

Esempi

Una barra discreta nei colori del tuo marchio

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

Una barra vistosa che nomina ogni livello

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

Come lo vede l’acquirente

Finché l’app può misurare il carrello, la riga fa il conto alla rovescia — “Spend $20 more to get 15% off” — e la barra si riempie verso il segno successivo. Una volta raggiunto un livello quando ne resta un altro, la riga passa al Tier reached text; al livello più alto passa all’Unlocked text e la barra prende il colore di sblocco. I segni vengono disegnati fino a 6 livelli.

Quando il progresso non si può misurare, il blocco dichiara l’offerta con lo Static text — mai una promessa di progresso che non può sostenere. Lo sconto in sé non ne risente in nessuno dei due casi: Shopify controlla il carrello e lo applica quando il carrello soddisfa i requisiti.

In uno sconto con codice viene mostrato il Code hint prefix, così l’acquirente sa che serve un codice.

Limiti e note

• I segni dei livelli vengono disegnati fino a 6 livelli. Oltre quel numero la barra si riempie comunque e i testi continuano il conto alla rovescia; vengono meno solo i segni.
• Bar height 4–32 px · Roundness 0–24 px · Tier mark size 6–28 px.
• Condizioni ed esclusioni possono disattivare il progresso in tempo reale. Quando le regole dell’offerta fanno sì che l’app non possa misurare la parte del carrello che soddisfa i requisiti, il blocco ripiega sui testi statici. La scheda Show on storefront dello sconto dice quale caso si applica.
• Mettere in pausa l’offerta nasconde la barra, e la scheda lo dice invece di lasciare un interruttore che sembra attivo.
• Non serve l’app embed. Il blocco si mostra per conto proprio.

Correlati

• Spendi di più, risparmia di più — lo sconto dietro la barra.
• Widget del negozio online — gli altri tre blocchi del tema.
• App embed — serve per i badge e i Price Drop, non per i blocchi.