# 8.1 A tela Widgets da loja

> O que a tela Widgets da loja configura, como o widget entra no tema (inserção automática ou bloco) e por que tudo se ajusta no app.

Fonte: https://www.cotafrete.app/manual/widgets-da-loja/tela-widgets-da-loja/
Planos: Widget, Basic, Business
No app: Widgets da loja
Atualizado em 25/10/2026

---

A tela **Widgets da loja** reúne tudo o que o cliente vê na loja antes do checkout. Uma configuração vale para a loja inteira: o mesmo widget aparece em todos os produtos e no carrinho.

![Tela Widgets da loja, aba Widget de cotação, com a aparência, o posicionamento e a pré-visualização](https://www.cotafrete.app/manual/images/manual/widgets-tela.webp)

## As abas

| Aba | O que controla | Plano |
|---|---|---|
| **Widget de cotação** | O bloco de CEP com as opções de frete: textos, aparência, endereço do CEP, posição no tema e CSS | Todos |
| **Barra de frete grátis** | A barra "faltam R$ X para frete grátis": textos, cores, tamanho e posição | Business (a barra depende de um desconto, e Descontos é do Business) |

As duas abas têm, à direita, uma **pré-visualização ao vivo**: cada mudança aparece na hora, sem abrir a loja. As mudanças só valem na loja depois de clicar em **Salvar** na barra da Shopify, no topo da tela.

## Como o widget entra no tema

O Cota Frete entra no tema por uma **extensão de tema** da Shopify. Ela tem três peças, que aparecem no editor de temas:

| Peça | Tipo | Para quê |
|---|---|---|
| **CotaFrete (automático)** | Incorporação de app (App Embed) | Insere o widget sozinho na página do produto e no carrinho ou na gaveta, no ponto definido pelos seletores da tela Widgets da loja. É o caminho principal |
| **Frete no produto** | Bloco de app | Coloca o widget à mão, numa seção do tema, na posição que você arrastar |
| **Barra de frete grátis** | Bloco de app | Coloca a barra à mão, numa seção do tema |

Nenhuma das três tem opções no editor de temas. Ali só aparece um aviso de que textos, cores e endereço do CEP são configurados no app, com um link para a tela Widgets da loja. Isso é proposital: uma configuração só, num lugar só.

### O caminho principal: a inserção automática

1. Em **Widgets da loja → Widget de cotação**, clique em **Ativar no tema**, no aviso "Ative o CotaFrete no tema". O editor de temas abre em **Incorporações de app**, com o CotaFrete selecionado.
2. Confirme que **CotaFrete (automático)** está ligado e clique em **Salvar** no editor.
3. De volta ao app, ajuste a posição em **Posicionamento** (veja [Personalizar o widget](https://www.cotafrete.app/manual/widgets-da-loja/personalizar-o-widget/#posicionamento)).

O app não consegue saber se a incorporação já está ligada no tema, então o aviso continua na tela mesmo depois de ativado. Se o widget aparece na loja, está tudo certo.

### O caminho alternativo: o bloco à mão

Se a inserção automática não encontra um bom lugar no seu tema, adicione o bloco **Frete no produto** pelo editor de temas, na seção que quiser. Onde há um bloco, a inserção automática não insere outro widget no mesmo contexto (produto ou carrinho), então não há duplicidade. O passo a passo está em [Widget na página do produto](https://www.cotafrete.app/manual/widgets-da-loja/pagina-do-produto/).

## O que o widget mostra

Quando o cliente digita o CEP e clica no botão, o widget:

1. Mostra o endereço por trás do CEP ("Rua X - Bairro - UF"), para o cliente confirmar que digitou certo. Dá para desligar em **Endereço do CEP**.
2. Consulta as transportadoras e os gateways ativos, com as regras de frete e os descontos aplicados.
3. Lista cada opção com nome do serviço, prazo e valor.

![Widget de cotação do Cota Frete na página do produto de uma loja Shopify, com CEP digitado e opções de frete](https://www.cotafrete.app/manual/images/listing/app_pdp.webp)

O texto do prazo segue o que você escolheu em **Prazo no checkout**, na aba Geral de Transportadoras (veja [Prazo no checkout e data prevista](https://www.cotafrete.app/manual/checkout/prazo-no-checkout/)). Os valores são os mesmos do checkout, salvo os casos explicados em [Por que o checkout mostra fretes diferentes do widget](https://www.cotafrete.app/manual/checkout/checkout-diferente-do-widget/).

## Plano

O widget funciona a partir do plano Widget, em qualquer plano da Shopify. Sem um plano do Cota Frete ativo, o widget continua no tema, mas a consulta não devolve cotações.