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

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. Com Abrangência em Faixas de CEP, a barra não filtra por região: aparece pra todo cliente, mesmo que o frete grátis só valha nas faixas.

O desconto também precisa estar com Status Ativo. Só um desconto por vez pode mostrar a barra. O que você ajusta em Widgets da loja é como ela aparece: texto, cores, borda, ícone e posição.

Passo 1: ligar a barra num desconto de 100%

1. No menu do app, abra Descontos.
2. Edite o desconto de frete grátis que já existe ou clique em Adicionar. Como criar do zero está em Frete grátis condicional: 5 regras úteis.
3. Confira os campos que a barra vai usar:
   • Valor mínimo: a meta. É esse número que aparece na conta do “faltam R$ X”.
   • Tipo de desconto e Desconto: precisa ser Percentual (%) com 100. Com outro percentual ou com Valor fixo (R$), a opção da barra fica desligada e o app avisa “A barra só pode ser ligada em um desconto percentual 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.
4. Na seção Exposição na loja, em Barra de frete grátis, ligue Mostrar barra.
5. 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

1. No menu do app, abra Widgets da loja e clique na aba Barra de frete grátis.
2. 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.
3. 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!”).
4. Em Aparência:
   • Cor da borda, Altura da borda e Raio da borda: a moldura em volta da barra. Altura da borda em 0 remove a borda.
   • Cor da barra (a parte preenchida), Cor do trilho (o fundo), Cor do texto, Altura da barra e Raio da barra, em pixels.
   • Ícone: Nenhum, Caminhão, Check (padrão), Presente, Caixa, Estrela, Coração ou Etiqueta.
   • Onde mostrar o ícone: Na mensagem de sucesso (padrão), Ao lado do título ou Nos dois.
   • Tamanho do ícone: Pequeno, Médio ou Grande.
5. 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. O jeito mais fácil de preencher é o botão Escolher posição no tema, explicado no passo 3.
6. 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.
7. Salve.

A coluna Pré-visualização à direita mostra a barra com as suas cores, borda, ícone e 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. É o caminho pra gaveta do carrinho.

A aba da barra não tem botão de ativar no tema. Se o app embed ainda não está ligado, use o Ativar no tema da aba Widget de cotação, como descrito em Como personalizar o bloco de cotação de frete no tema.

Pra escolher onde a barra entra:

1. No card Posicionamento da aba Barra de frete grátis, clique em Escolher posição no tema. O editor de temas abre numa nova aba, na página de um produto.
2. Mesmo sem campanha no ar, o editor mostra uma barra de exemplo (meta de R$ 200,00, carrinho de R$ 120,00) com as suas cores.
3. Cada lugar possível ganha uma linha com o botão Adicionar barra aqui. Clique no lugar desejado: o app grava o seletor e a barra muda de lugar na pré-visualização.
4. Pra posicionar também no carrinho, abra a gaveta ou vá até a página do carrinho, ainda no editor, e repita.
5. Clique em Concluir e volte pra aba do Cota Frete. Os seletores já aparecem atualizados.

O seletor fica ativo por 30 minutos e respeita a Posição de inserção que estiver na tela, mesmo antes de salvar.

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.

Se usar o bloco na página do produto, deixe o Seletor de página de produto vazio pra não ter duas barras.

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, dentro da borda.
• Ao atingir a meta: o Texto de sucesso no lugar da barra.
• O ícone aparece onde você escolheu: na mensagem de sucesso, ao lado do título ou nos dois.
• Ao adicionar ou remover um item, a barra se atualiza 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

• Frete grátis condicional: 5 regras úteis
• Como criar descontos de frete com data de início e fim
• Como exibir a cotação na gaveta do carrinho
• Frete grátis progressivo: como usar o “faltam R$ X”
• Widgets da loja no manual do usuário

Última atualização: novembro de 2026