Barra de frete grátis
A barra de frete grátis mostra ao cliente quanto falta para ganhar o frete grátis (“Faltam R$ 38,00 para frete grátis”) e vai enchendo conforme o carrinho cresce. Aparece na página do produto, no carrinho e na gaveta.
O efeito é dar ao cliente um motivo concreto para colocar mais um item no carrinho. Funciona quando a meta está um pouco acima do ticket médio da loja: perto o bastante para valer o esforço, longe o bastante para aumentar o pedido.
A barra depende de um desconto de frete, e a tela Descontos é do plano Business. A mudança de plano é feita na tela Planos do app. Veja Escolher o plano.
Quem comanda a barra#
A barra não tem valor nem data próprios. Quem manda nela é um desconto de 100% com a opção Mostrar barra ligada, criado na tela Descontos:
| No desconto | Na barra |
|---|---|
| Valor mínimo | A meta: é o número da conta “faltam R$ X” |
| Início e Fim | A agenda: fora do período, a barra não aparece |
| Estados atendidos | Onde a barra aparece: cliente de um estado fora da lista não vê a barra |
| Status | Precisa estar Ativo. Um desconto inativo não comanda a barra, mesmo com Mostrar barra ligado |
Só um desconto por vez pode mostrar a barra. A separação é proposital: a regra comercial (meta, período, região) fica num lugar só, o desconto, e a barra apenas a mostra. Assim, a barra não promete um frete grátis que o desconto não dá.
O que a tela Widgets da loja controla é a aparência: texto, cores, tamanho e posição.
Passo 1: ligar a barra num desconto de 100%#
- Abra a tela Descontos. Edite o desconto de frete grátis que já existe ou clique em Adicionar.
- Confira o Valor mínimo (a meta), o Desconto (precisa ser
100), o Início e o Fim (em branco, a barra fica no ar sem prazo) e os Estados atendidos (“Brasil inteiro” para valer em todo lugar). - Confira se o Status está Ativo.
- No cartão Exposição na loja, ligue Mostrar barra.
- Clique em Salvar na barra da Shopify.
Se o percentual não for 100, o app não salva e avisa que “só um desconto de 100% pode mostrar a barra de frete grátis”. Se outro desconto ativo já mostra a barra, o app também não salva e diz qual é (“a barra já é mostrada pelo desconto: …”). Desligue Mostrar barra nele primeiro.
Como montar o desconto do zero está em Criar um desconto e Frete grátis condicional.
Passo 2: texto, cores e posição#
- Abra Widgets da lojaBarra de frete grátis.
- Confira o aviso do topo. A barra está ligada mostra qual desconto comanda a barra e qual é a meta, com o botão Ver desconto. Nenhum desconto está mostrando a barra quer dizer que falta o passo 1; o botão Ir para descontos leva à tela certa.
- Em Conteúdo, preencha o Título, o Texto de progresso e o Texto de sucesso.
- Em Aparência, ajuste Cor da barra, Cor do trilho, Cor do texto, Altura da barra e Raio da barra (em pixels).
- Em Posicionamento, confira os seletores (só valem para a inserção automática, veja o passo 3).
- Clique em Salvar na barra da Shopify.
Os textos padrão são:
| Campo | Padrão | Para quê |
|---|---|---|
| Título | Frete grátis | Texto à esquerda da barra |
| Texto de progresso | Faltam {{ valor }} para frete grátis | O app troca {{ valor }} por quanto falta, já em reais |
| Texto de sucesso | Você desbloqueou o frete grátis! | Substitui a barra quando o cliente atinge a meta |
A Pré-visualização ao lado mostra a barra com as suas cores e textos. Arraste o controle embaixo dela para ver a barra enchendo e chegando na meta, sem abrir a loja.
Para ajustes que os campos não cobrem, o CSS personalizado, em Avançado, aceita estilos limitados à barra pelo seletor .cotafrete-upsell. As partes internas são .cotafrete-upsell-label (título), .cotafrete-upsell-remaining (valor que falta), .cotafrete-upsell-track (trilho), .cotafrete-upsell-fill (preenchimento) e .cotafrete-upsell-success (texto de sucesso).
Passo 3: colocar a barra no tema#
A barra entra na loja de duas formas.
Automática, pela incorporação. Com CotaFrete (automático) ligado no tema (a mesma incorporação do widget de cotação), a barra aparece sozinha no primeiro elemento encontrado pelos seletores da aba Barra de frete grátis: um para a página do produto (padrão .product-form__buttons) e um para o carrinho e a gaveta (padrão .cart__ctas .drawer__footer). O botão Escolher posição no tema abre o editor com as linhas “Adicionar barra aqui”, como no widget. É o caminho para a gaveta.
Pelo bloco no editor de temas. Adicione o bloco de app Barra de frete grátis na seção onde quer a barra e arraste para a posição. O bloco ignora os seletores: a posição é onde você o soltou. Onde há um bloco, a inserção automática não coloca uma segunda barra na página do produto.
No editor de temas, mesmo sem desconto no ar, a barra aparece com uma meta de exemplo (R$ 200,00) e um subtotal de exemplo (R$ 120,00), com as suas cores e textos, para você ver a posição.
O que o cliente vê#
- Abaixo da meta: o título, o texto de progresso com o valor que falta e a barra preenchida na proporção do subtotal.
- Na meta ou acima: o texto de sucesso no lugar da barra.
A conta usa o subtotal dos itens do carrinho que a Shopify informa, sem o frete. Na página do produto, antes de o cliente pôr algo no carrinho, a barra mostra a meta cheia.
Pausar ou desligar#
| Para | Faça |
|---|---|
| Pausar numa data | Preencha Fim no desconto. Barra e frete grátis saem juntos |
| Tirar só a barra, mantendo o frete grátis | Desligue Mostrar barra no desconto |
| Desligar tudo | Mude o Status do desconto para Inativo |
Antes de publicar#
- Compare a meta com o ticket médio. Meta muito acima desanima. Muito abaixo, a loja paga frete em pedido que fecharia de qualquer jeito. O ticket médio está no Painel.
- Confira o checkout. O desconto vale no checkout pelo Carrier Calculated Shipping (CCS, “cotação calculada pela transportadora”). Se a loja não tem CCS, o checkout usa as tarifas da própria Shopify: reproduza a regra de frete grátis lá também, ou o cliente vê “frete grátis” na barra e paga frete no checkout.
- Teste dois CEPs: um de estado atendido e um de fora da lista, para ver a barra aparecer e sumir.