Barra de meta do carrinho

A Cart Goal Bar (barra de meta do carrinho) transforma uma oferta de gaste mais economize mais em uma linha e uma barra: quanto falta gastar, o que isso libera, e uma marca para cada nível pelo caminho. Ela vai se enchendo conforme o carrinho do comprador cresce.

Configuração

1. Ligue Show on storefront no desconto gaste mais economize mais.

   Abra o desconto gaste mais, economize mais e ligue Show on storefront. Ele vem ligado em um desconto novo.

2. Clique em Add ao lado de Cart Goal Bar.

   No painel Add to your theme desse cartão, a linha Cart Goal Bar diz “Shows progress toward the next tier in the cart”. O botão Add dela abre o editor do seu tema com o bloco pronto para ser colocado.

   

3. Coloque o bloco no editor de temas e salve.

   Coloque o bloco onde os compradores devem ver o progresso deles, depois clique em Save.

4. Defina as cores e os textos da barra.

   Tudo o que vem abaixo é um ajuste do bloco no editor de temas.

Ajustes

Bar

• Track color — a parte não preenchida da barra. Padrão #e5e5e5.
• Fill color — a parte preenchida. Padrão #1a1a1a.
• Unlocked color — usada quando o nível mais alto é alcançado. Padrão #2e7d32.
• Text color — a linha acima da barra.
• Bar height — 4–32 px. Padrão 10.
• Roundness — 0–24 px. Padrão 8.
• Show amounts under the bar — desligado por padrão. Mostra o que já foi gasto e o próximo limiar.

Wording

• Goal text — padrão Spend {amount} more to get {percent} off. {amount} e {percent} são substituídos automaticamente.
• Unlocked text — padrão You’ve unlocked {percent} off!
• Tier mark colour — padrão #ffffff. Marca os níveis ainda não alcançados; uma marca alcançada usa a cor de liberado.
• Tier mark shape — Circle (padrão) ou Square.
• Tier mark size — 6–28 px. Padrão 14.
• Show tier amounts under the bar — desligado por padrão, porque os rótulos podem se sobrepor em telas estreitas.
• Tier reached text — padrão You've got {current} off. Spend {amount} more to get {percent} off. Aparece quando um nível foi alcançado e ainda resta outro; {current}, {amount} e {percent} são substituídos automaticamente.
• Code hint prefix — padrão “Use code”. Aparece só em descontos com código.
• Static text — padrão Spend {amount} to get {percent} off. Usado quando o progresso não pode ser medido.
• Static text with excluded items — padrão Spend {amount} to get {percent} off eligible items. Usado no lugar do texto estático quando o desconto exclui alguns itens.

Exemplos

Uma barra discreta nas cores da sua marca

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

Uma barra chamativa que nomeia cada nível

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

Como aparece para o comprador

Enquanto o app consegue medir o carrinho, a linha faz a contagem regressiva — “Spend $20 more to get 15% off” — e a barra se enche rumo à próxima marca. Quando um nível é alcançado e ainda resta outro, a linha muda para o Tier reached text; no nível mais alto ela muda para o Unlocked text e a barra assume a cor de liberado. As marcas são desenhadas para até 6 níveis.

Quando o progresso não pode ser medido, o bloco declara a oferta com o Static text — nunca uma afirmação de progresso que ele não possa sustentar. O desconto em si não é afetado de um jeito nem de outro: a Shopify verifica o carrinho e o aplica quando o carrinho se qualifica.

Em um desconto com código, o Code hint prefix é mostrado para o comprador saber que um código é necessário.

Limites e observações

• As marcas de nível são desenhadas para até 6 níveis. Além disso a barra continua se enchendo e o texto continua na contagem regressiva; só as marcas deixam de aparecer.
• Bar height 4–32 px · Roundness 0–24 px · Tier mark size 6–28 px.
• Condições e exclusões podem desligar o progresso ao vivo. Quando as regras da oferta fazem com que o app não consiga medir a parte do carrinho que se qualifica, o bloco recorre ao texto estático. O cartão Show on storefront do desconto diz qual é o caso.
• Pausar a oferta esconde a barra, e o cartão diz isso em vez de deixar um interruptor com cara de ativo.
• Não precisa de app embed. O bloco se renderiza sozinho.

Relacionado

• Gaste mais, economize mais — o desconto por trás da barra.
• Widgets da loja virtual — os outros três blocos de tema.
• App embed — necessário para os selos e os Price Drops, não para os blocos.