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:
- 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.
- Pra posicionar também no carrinho, abra a gaveta do carrinho ou vá até a página do carrinho, ainda no editor, e repita.
- 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-widgetpra 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.
| |
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. O prazo embaixo de cada serviço segue a seção Prazo 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
- Como ativar a barra de frete grátis na loja
- Widgets da loja no manual do usuário
Última atualização: novembro de 2026