# 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, o texto e as cores em Widgets da loja, e as duas formas de colocar a barra no tema da Shopify.

Fonte: https://www.cotafrete.app/central-de-ajuda/barra-de-frete-gratis-progressiva-shopify/
Publicado em 31/08/2026 · atualizado em 21/10/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.

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%

1. No menu do app, abra **Regras de frete** e fique na aba **Descontos**.
2. 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](https://www.cotafrete.app/central-de-ajuda/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".
   - **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](https://www.cotafrete.app/central-de-ajuda/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 **Barra de frete grátis na loja**, 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 barra** (a parte preenchida), **Cor do trilho** (o fundo), **Cor do texto**, **Altura da barra** e **Raio da barra**, em pixels.
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 (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](https://www.cotafrete.app/central-de-ajuda/personalizar-widget-cotacao-frete/).
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 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](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/central-de-ajuda/frete-gratis-condicional-regras-uteis/)
- [Como criar descontos de frete com data de início e fim](https://www.cotafrete.app/central-de-ajuda/descontos-de-frete-com-agendamento/)
- [Como exibir a cotação na gaveta do carrinho](https://www.cotafrete.app/central-de-ajuda/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/)

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