# Como personalizar o bloco de cotação de frete no tema

> Título, texto do botão, cores, cor do preço, endereço do CEP, posição no tema e CSS próprio: tudo que dá pra ajustar no widget de cotação do Cota Frete, na tela Widgets da loja, e como ativar e posicionar o bloco no tema da Shopify.

Fonte: https://www.cotafrete.app/blog/personalizar-widget-cotacao-frete/
Publicado em 22/08/2026 · atualizado em 10/11/2026 · categorias: Configuração

---

O widget de cotação do Cota Frete se configura inteiro numa tela do app: **Widgets da loja**, aba **Widget de cotação**. Textos, cores, endereço do CEP e posição no tema ficam ali, com uma pré-visualização ao vivo ao lado. Disponível em todos os planos.

No editor de temas da Shopify, o bloco não tem campos próprios: só um link pra essa tela. Tudo o que você salva no app vale pra loja inteira.

O widget entra no tema de duas formas:

- **App Embed "CotaFrete (automático)"**: o app insere o bloco sozinho nos elementos do tema que você escolher. É o caminho pra página do produto, o carrinho e a gaveta do carrinho.
- **Bloco de app "Frete no produto"**: você arrasta pra onde quiser numa seção do tema, pelo editor.

## Passo 1: ativar no tema

No topo da aba **Widget de cotação** fica o aviso **Ative o CotaFrete no tema**. Clique em **Ativar no tema**: o editor de temas abre numa nova aba, já com a incorporação **CotaFrete (automático)** pronta pra ligar. Clique em **Salvar** no editor pra concluir.

O widget só aparece na loja depois desse passo. O app não consegue ver se a incorporação já está ativa, então o aviso continua na tela mesmo depois de ativado.

## Passo 2: escolher a posição no tema

No card **Posicionamento**, clique em **Escolher posição no tema**. O editor de temas abre numa nova aba, na página de um produto, com um seletor de posição por cima da loja:

1. Cada lugar possível ganha uma linha com o botão **Adicionar CotaFrete aqui**. Clique no lugar onde o widget deve entrar. O app grava o seletor na hora e o widget aparece ali na pré-visualização.
2. Pra posicionar também no carrinho, abra a gaveta do carrinho ou vá até a página do carrinho, ainda no editor, e repita.
3. Clique em **Concluir** na barra do seletor e volte pra aba do Cota Frete. Os campos de seletor já aparecem atualizados.

O seletor fica ativo por 30 minutos. A linha aparece em cima ou embaixo do elemento conforme a **Posição de inserção** escolhida no card, mesmo que você ainda não tenha salvo.

Se preferir preencher à mão, os campos do card são:

- **Seletor de página de produto**: elementos da página do produto onde o widget entra. Padrão `.product-form__buttons .product-form__payment-container`. O frete é calculado pro produto e a variante escolhidos. Se você usa o bloco de app "Frete no produto" na página do produto, deixe este campo vazio pra não duplicar.
- **Seletor de carrinho / drawer**: elementos do carrinho ou da gaveta. Padrão `.cart__ctas .drawer__footer`. O frete é calculado pro carrinho inteiro. A classe varia por tema.
- **Posição de inserção**: **Antes do elemento**, **Depois do elemento** (padrão), **Dentro, no início** ou **Dentro, no final**.
- **Margem superior** (padrão 20), **Margem inferior** (padrão 0) e **Espaçamento interno** (padrão 0).

Separe vários seletores por espaço, vírgula ou quebra de linha. Não use seletores descendentes com espaço interno: o seletor de posição já monta caminhos com `>` quando precisa.

Na página do produto, o widget lê a **quantidade** escolhida no formulário do tema e multiplica o peso e o valor do item por ela antes de cotar. Sem campo de quantidade no tema, vale uma unidade.

## Conteúdo

- **Título do bloco**: padrão "Calcule o frete estimado".
- **Texto do botão**: padrão "Consultar".

## Aparência e cor do preço

O card **Aparência** tem o interruptor **Personalização**. Desligado (padrão), o widget usa as cores e fontes do tema. Ligado, valem os campos do card:

- **Fonte do corpo**
- **Cor do texto**, **Cor do botão**, **Cor do texto do botão** e **Opacidade do botão**
- **Cor do valor da cotação**: a cor do preço de cada frete na lista. Vazio, o preço acompanha a cor do texto.
- **Raio dos inputs (px)** e **Raio dos botões (px)**

A **Cor do valor da cotação** só vale com a **Personalização** ligada. Com ela desligada, o preço segue a cor do tema, como o resto do widget.

## Endereço do CEP

Quando o cliente digita o CEP, o widget mostra o endereço por trás dele ("Rua Inácio Higino - Praia da Costa - ES") com um pin na frente, antes mesmo das cotações chegarem. Serve pra confirmar que o CEP está certo. Se o CEP não tem rua (CEP único de cidade pequena), mostra bairro ou cidade e UF.

- **Mostrar endereço do CEP**: liga ou desliga o endereço.
- **Posição do endereço**: acima ou abaixo das cotações.
- **Espaço antes do endereço** (padrão 8).
- **Cor de fundo do endereço**, **Cor do texto do endereço** e **Cor do pin**: vazios por padrão. Vazio significa fundo transparente, texto na cor do widget e pin na cor do texto, ou seja, o endereço acompanha o tema. Só preencha se quiser destacar.

## Avançado

- **CSS personalizado**: pra ajustes que os campos não cobrem. Comece o seletor com `.cotafrete-widget` pra limitar o estilo ao widget e não vazar pro tema.

Algumas classes do widget: `.cotafrete-label` (título), `.cotafrete-cep-input` (campo do CEP), `.cotafrete-btn` (botão), `.cotafrete-option` (cada frete da lista), `.cotafrete-name`, `.cotafrete-price` e `.cotafrete-description` (nome, preço e descrição de cada frete) e `.cotafrete-address` (endereço do CEP).

Exemplo: esconder o título e deixar o preço em negrito.

```css
.cotafrete-widget .cotafrete-label { display: none; }
.cotafrete-widget .cotafrete-price { font-weight: 700; }
```

## O que não dá pra mudar por aqui

As mensagens do widget são fixas: "Por favor, insira um CEP válido.", "CEP de destino inexistente.", "Consultando frete..." e "Erro ao consultar o frete. Tente novamente.". O que você controla é o título, o texto do botão e o estilo.

O nome de cada serviço na lista vem da transportadora. Pra mostrar nomes próprios ("Econômico", "Expresso"), use as regras de **Renomear** e **Agrupar** em [Regras de frete](https://www.cotafrete.app/blog/regras-de-frete-shopify-cota-frete/). O prazo embaixo de cada serviço segue a seção [Prazo no checkout](https://www.cotafrete.app/blog/data-prevista-entrega-segunda-linha-frete-checkout/), a mesma do checkout.

## Relacionados

- [Guia de configuração do Cota Frete](https://www.cotafrete.app/blog/guia-configuracao-cota-frete/) (adicionar o bloco no produto e no carrinho)
- [Como exibir a cotação na gaveta do carrinho](https://www.cotafrete.app/blog/cotacao-frete-gaveta-carrinho-shopify/)
- [Como ativar a barra de frete grátis na loja](https://www.cotafrete.app/blog/barra-de-frete-gratis-progressiva-shopify/)
- [Widgets da loja no manual do usuário](https://www.cotafrete.app/manual/widgets-da-loja/)

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