# 8.6 Barra de frete grátis > Como funciona a barra "faltam R$ X para frete grátis": o desconto de 100% que define a meta e o período, a aparência em Widgets da loja e as duas formas de colocá-la no tema. Fonte: https://www.cotafrete.app/manual/widgets-da-loja/barra-de-frete-gratis/ Planos: Business No app: Widgets da loja → Barra de frete grátis Atualizado em 25/10/2026 --- 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. > **Plano necessário:** 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](https://www.cotafrete.app/manual/primeiros-passos/planos-e-teste/). ## 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% 1. Abra a tela **Descontos**. Edite o desconto de frete grátis que já existe ou clique em **Adicionar**. 2. 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). 3. Confira se o **Status** está **Ativo**. 4. No cartão **Exposição na loja**, ligue **Mostrar barra**. 5. 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](https://www.cotafrete.app/manual/descontos/criar-desconto/) e [Frete grátis condicional](https://www.cotafrete.app/manual/descontos/frete-gratis-condicional/). ## Passo 2: texto, cores e posição 1. Abra **Widgets da loja → Barra de frete grátis**. 2. 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. 3. Em **Conteúdo**, preencha o **Título**, o **Texto de progresso** e o **Texto de sucesso**. 4. Em **Aparência**, ajuste **Cor da barra**, **Cor do trilho**, **Cor do texto**, **Altura da barra** e **Raio da barra** (em pixels). 5. Em **Posicionamento**, confira os seletores (só valem para a inserção automática, veja o passo 3). 6. Clique em **Salvar** na barra da Shopify. ![Aba Barra de frete grátis com Conteúdo, Aparência, Posicionamento e a pré-visualização](https://www.cotafrete.app/manual/images/manual/widgets-barra.webp) 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](https://www.cotafrete.app/manual/painel-e-relatorios/aba-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.