Como personalizar o bloco de cotação de frete no tema
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.
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.
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-totalse.cart__ctascobrem 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-widgetpra limitar o estilo ao widget e não vazar pro tema.
Exemplo: esconder o título e alinhar o botão à direita.
| |
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. O prazo embaixo de cada serviço segue a opção Segunda linha de frete no checkout , a mesma do checkout.
Relacionados
- Guia de configuração do Cota Frete (adicionar o bloco no produto e no carrinho)
- Como exibir a cotação na gaveta do carrinho
- Agrupamento de frete
Última atualização: agosto de 2026