Barra de frete grátis para loja virtual

Barra de frete grátis para loja virtual: para que serve

A barra de frete grátis mostra ao cliente quanto falta para ganhar o frete, e isso incentiva a colocar mais um item no carrinho em vez de desistir por causa do frete. Defina o valor mínimo, a mensagem enquanto falta (com o valor em reais no lugar de {valor}) e a mensagem ao atingir.

O código cria a função freteGratis(total), que você chama sempre que o total do carrinho mudar. A barra usa o elemento progress e a mensagem é anunciada para leitores de tela. Teste com o controle de total na própria página.

Como usar

1. Defina o valor do frete grátis.
2. Escreva as mensagens e escolha a cor.
3. Copie o código e chame freteGratis(total) no carrinho.

Quando usar

• Carrinho de loja virtual.
• Topo da página de produtos.
• Página de checkout.

Perguntas frequentes

A barra de frete grátis aumenta as vendas?

Ela mostra quanto falta para ganhar o benefício, o que incentiva o cliente a acrescentar mais um item em vez de abandonar o carrinho por causa do frete. Funciona melhor quando o valor mínimo fica um pouco acima do ticket médio da loja.

Como ligar a barra ao meu carrinho?

O código cria a função freteGratis(total). Chame essa função sempre que o total do carrinho mudar, por exemplo freteGratis(87.5), e a barra e a mensagem se atualizam. Em plataformas prontas, coloque a chamada no evento de atualização do carrinho.

É acessível?

Sim. A barra usa o elemento progress, que leitores de tela entendem, e a mensagem fica numa região aria-live que é anunciada quando muda.

Ferramentas parecidas