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

> Passo a passo da Barra de frete grátis do Cota Frete: o desconto de 100% que comanda a meta e o período, texto, cores, borda e ícone em Widgets da loja, e como escolher a posição da barra no tema da Shopify.

Fonte: https://www.cotafrete.app/blog/barra-de-frete-gratis-progressiva-shopify/
Publicado em 31/08/2026 · atualizado em 10/11/2026 · categorias: Configuração

---

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"](https://www.cotafrete.app/blog/frete-gratis-progressivo-faltam-x-reais-shopify/). 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](https://www.cotafrete.app/blog/frete-gratis-condicional-regras-uteis/).
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](https://www.cotafrete.app/blog/descontos-de-frete-com-agendamento/).
   - **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](https://www.cotafrete.app/blog/personalizar-widget-cotacao-frete/).

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](https://www.cotafrete.app/blog/frete-gratis-progressivo-faltam-x-reais-shopify/).
- 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](https://www.cotafrete.app/blog/frete-gratis-condicional-regras-uteis/)
- [Como criar descontos de frete com data de início e fim](https://www.cotafrete.app/blog/descontos-de-frete-com-agendamento/)
- [Como exibir a cotação na gaveta do carrinho](https://www.cotafrete.app/blog/cotacao-frete-gaveta-carrinho-shopify/)
- [Frete grátis progressivo: como usar o "faltam R$ X"](https://www.cotafrete.app/blog/frete-gratis-progressivo-faltam-x-reais-shopify/)
- [Widgets da loja no manual do usuário](https://www.cotafrete.app/manual/widgets-da-loja/)

*Última atualização: novembro de 2026*