Como ativar a barra de frete grátis ("faltam R$ X") na loja | Cota Frete

A Barra de frete grátis mostra ao cliente quanto falta pra ganhar 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, e se atualiza sozinha quando o cliente adiciona ou tira um item.

A barra depende de um desconto de frete grátis, então é recurso do plano Business. Por que ela vale a pena e como escolher o valor mínimo está em Frete grátis progressivo: como usar o “faltam R$ X” . Este artigo é só o passo a passo.

Como a barra funciona

A barra não tem configuração própria de valor nem de data. Quem manda nela é um desconto de 100% com a opção Mostrar barra ligada:

O Valor mínimo do desconto vira a meta da barra.
O Início e o Fim do desconto viram a agenda da barra. Fora do período, ela some sozinha.
Os Estados atendidos do desconto definem onde a barra aparece. Cliente de um estado fora da lista não vê a barra.

Só um desconto por vez pode mostrar a barra. O que você ajusta em Widgets da loja é como ela aparece: texto, cores, altura e posição.

Passo 1: ligar a barra num desconto de 100%

No menu do app, abra Regras de frete e fique na aba Descontos.
Edite o desconto de frete grátis que já existe ou clique em Criar desconto. Como criar do zero está em Frete grátis condicional: 5 regras úteis .
Confira os campos que a barra vai usar:
- Valor mínimo: a meta. É esse número que aparece na conta do “faltam R$ X”.
- Desconto: precisa ser 100. Com qualquer outro percentual, a opção da barra fica desligada e o app avisa “A barra só pode ser ligada em um desconto de 100%”.
- Início e Fim: em branco, a barra fica no ar sem prazo. Preenchidos, ela liga e desliga junto com o desconto. Veja Como criar descontos de frete com data de início e fim .
- Estados atendidos: os estados onde o desconto vale e, portanto, onde a barra aparece. “Brasil inteiro” pra valer em todo lugar.
Na seção Barra de frete grátis na loja, ligue Mostrar barra.
Salve.

Se outro desconto já estiver mostrando a barra, o app não deixa salvar e diz qual é (“a barra já é mostrada pelo desconto: Frete grátis SP”). Desligue Mostrar barra nele primeiro.

Passo 2: texto, cores e posição em Widgets da loja

No menu do app, abra Widgets da loja e clique na aba Barra de frete grátis.
No topo, o banner A barra está ligada confirma qual desconto está comandando a barra e qual é a meta. Se aparecer Nenhum desconto está mostrando a barra, volte ao passo 1.
Em Conteúdo:
- Título: texto à esquerda da barra (ex.: “Frete grátis”).
- Texto de progresso: a frase do “faltam”. Use {{ valor }} no lugar do número; o app troca por quanto falta, já formatado em reais (ex.: “Faltam {{ valor }} para frete grátis”).
- Texto de sucesso: substitui a barra quando o cliente atinge a meta (ex.: “Você ganhou frete grátis!”).
Em Aparência: Cor da barra (a parte preenchida), Cor do trilho (o fundo), Cor do texto, Altura da barra e Raio da barra, em pixels.
Em Posicionamento: Seletor de página de produto, Seletor de carrinho / drawer, Posição de inserção e as margens. Esses campos valem só pra inserção automática pelo app embed (veja o passo 3). Os padrões funcionam no Dawn e derivados; em outros temas, use os mesmos seletores que você já usa pro widget de cotação, descritos em Como personalizar o bloco de cotação de frete no tema .
Em Avançado, o CSS personalizado cobre o que os campos não cobrem. Comece o seletor com .cotafrete-upsell pra não vazar estilo pro tema.
Salve.

A coluna Pré-visualização à direita mostra a barra com as suas cores e o seu texto. Arraste o controle de carrinho embaixo dela pra ver a barra enchendo e chegando na meta, sem precisar abrir a loja.

Passo 3: colocar a barra no tema

A barra entra na loja de duas formas. Escolha uma por lugar; as duas juntas no mesmo lugar duplicam a barra.

Automático, pelo app embed. Se o app embed CotaFrete (automático) já está ativo no seu tema (é o mesmo do widget de cotação), a barra aparece sozinha nos elementos definidos em Posicionamento. Não precisa mexer no editor de temas. É o caminho pra gaveta do carrinho.

Pelo bloco no editor de temas. No editor de temas da Shopify, adicione o bloco de app Barra de frete grátis na seção onde você quer a barra (abaixo do botão de comprar na página do produto, ou junto do subtotal no carrinho) e arraste pra posição. O bloco ignora os campos de Posicionamento do passo 2: a posição é onde você soltou o bloco. Texto e cores continuam vindo de Widgets da loja.

O que o cliente vê

Com o carrinho abaixo da meta: o Título, o Texto de progresso com o valor que falta e a barra preenchida na proporção do subtotal.
Ao atingir a meta: o Texto de sucesso no lugar da barra.
Ao adicionar ou remover um item, a barra se atualiza na hora, sem recarregar a página. Vale pra gaveta também.

A conta usa o subtotal dos itens do carrinho, antes do frete. Na página do produto, antes de o cliente colocar algo no carrinho, a barra mostra o valor cheio da meta.

Desligar ou pausar a barra

Pausar por um tempo: preencha Fim no desconto. A barra some no horário marcado e o frete grátis também.
Tirar só a barra, mantendo o frete grátis: desligue Mostrar barra no desconto.
Desligar tudo: mude o Status do desconto pra Inativo.

Antes de publicar

Confira o Valor mínimo contra o seu ticket médio. Meta muito acima do ticket desanima; muito abaixo, você absorve frete em pedido que fecharia de qualquer jeito. A conta está no post sobre frete grátis progressivo .
Se a loja não tem Carrier Calculated Shipping (cotação calculada pela transportadora), a barra promete na gaveta e o checkout usa a tabela da Shopify. Espelhe a regra de frete grátis lá também, ou o cliente vê “frete grátis” e paga frete no checkout.
Abra a loja num CEP de estado atendido e outro de estado fora da lista pra ver a barra aparecer e sumir.

Relacionados

Última atualização: setembro de 2026