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

> Título, texto do botão, cores, fontes, bordas, posição e CSS próprio: tudo que dá pra ajustar no bloco 'Frete no produto' e no App Embed do Cota Frete no editor de temas da Shopify.

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

---

O bloco de cotação do Cota Frete entra no tema de duas formas, e as duas se personalizam no editor de temas da Shopify, sem tocar em código. Disponível em todos os planos.

- **Bloco de app "Frete no produto"**: você arrasta pra onde quiser na página do produto e na página do carrinho.
- **App Embed "CotaFrete (automático)"**: o app insere o bloco sozinho num elemento do tema. É o caminho pra gaveta do carrinho e pra temas onde o bloco de app não encaixa.

Dentro do app, a tela **Widgets da loja → Widget de cotação** tem as mesmas opções de título, botão, cores e raios, com uma pré-visualização ao vivo do bloco. As duas formas configuram o mesmo bloco: ajuste onde preferir.

## Bloco de app "Frete no produto"

No editor de temas, com o bloco selecionado, as opções são:

- **Ativar personalização de estilo**: liga os campos abaixo. Desligado, o bloco herda o estilo do tema.
- **Titulo do bloco**: padrão "Calcule o frete estimado".
- **Tipografia**: fonte do corpo.
- **Cores**: cor do texto, cor do botão, cor do texto do botão, opacidade do botão.
- **Bordas**: raio dos inputs e raio dos botões.
- **Endereço do CEP**: o mesmo grupo descrito abaixo, no App Embed.

A **posição** é onde você arrasta o bloco dentro da seção. Abaixo do botão de comprar costuma funcionar bem na página do produto.

Na página do produto, o bloco lê a **quantidade** escolhida no formulário do tema e multiplica o peso e o valor do item por ela antes de cotar. O frete mostrado é o preço cheio pra aquela quantidade, o mesmo que o cliente vai ver no carrinho. Sem campo de quantidade no tema, vale uma unidade.

## App Embed "CotaFrete (automático)"

Em **Incorporações de app**, ative **CotaFrete (automático)** e abra as configurações. Elas ficam em cinco grupos.

**Posicionamento**

- **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`. Se o bloco de app já está 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`. A classe da gaveta varia por tema; `.cart-totals` e `.cart__ctas` cobrem o Dawn e derivados.
- **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) e **Margem inferior** (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.

**Conteúdo**

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

**Aparência**

As mesmas opções do bloco de app: fonte, cores e raios.

**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.

- **Posição do endereço**: acima das cotações (padrão) ou abaixo.
- **Espaço antes do endereço** (padrão 8) e **Espaçamento interno** (padrão 0).
- **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.

Não dá pra desligar o endereço por um campo. Se não quiser mostrar, use o CSS personalizado: `.cotafrete-widget .cotafrete-address { display: none; }`. 
**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.

Exemplo: esconder o título e alinhar o botão à direita.

```css
.cotafrete-widget .cotafrete-title { display: none; }
.cotafrete-widget button { margin-left: auto; }
```


## 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...", "Erro ao consultar o frete. Tente novamente." e o prazo como "Entrega em até X dias". 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 o agrupamento de frete em Configurações avançadas → Agrupamento de frete. O prazo embaixo de cada serviço segue a opção [Prazo no checkout](https://www.cotafrete.app/central-de-ajuda/data-prevista-entrega-segunda-linha-frete-checkout/), a mesma do checkout.

## Relacionados

- [Guia de configuração do Cota Frete](https://www.cotafrete.app/central-de-ajuda/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/central-de-ajuda/cotacao-frete-gaveta-carrinho-shopify/)
- [Agrupamento de frete](https://www.cotafrete.app/central-de-ajuda/agrupamento-frete-economico-expresso-normal/)

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