# 8.5 Personalizar o widget > Textos, aparência, endereço do CEP, posição no tema e CSS próprio: tudo o que a aba Widget de cotação ajusta, com a pré-visualização ao vivo. Fonte: https://www.cotafrete.app/manual/widgets-da-loja/personalizar-o-widget/ Planos: Widget, Basic, Business No app: Widgets da loja → Widget de cotação Atualizado em 25/10/2026 --- O widget deve parecer parte da loja, não um elemento colado de fora. Por padrão, ele herda o estilo do tema: fonte, cores e botões. Quando isso não basta, você ajusta textos, cores e bordas sem tocar em código, e vai além com CSS próprio. Tudo fica num lugar só: a aba **Widgets da loja → Widget de cotação**. O editor de temas não tem opções do widget. A configuração vale para a loja inteira, na página do produto, no carrinho e na gaveta, seja pela inserção automática, seja pelo bloco **Frete no produto**. A coluna da direita mostra uma **Pré-visualização** ao vivo, com um produto de exemplo. Dá para digitar um CEP nela e consultar de verdade. Nada muda na loja até você clicar em **Salvar** na barra da Shopify. ![Aba Widget de cotação com os campos de aparência e a pré-visualização ao vivo](https://www.cotafrete.app/manual/images/manual/widgets-tela.webp) ## Conteúdo | Campo | Padrão | |---|---| | **Título do bloco** | Calcule o frete estimado | | **Texto do botão** | Consultar | Um título que diz o que o cliente ganha funciona melhor que um genérico: "Calcule o frete e o prazo" ou "Quando chega na sua casa?". ## Aparência O cartão **Aparência** tem a chave **Personalização**. Desligada (padrão), o widget usa as cores e fontes do tema e os campos abaixo não têm efeito. Ligada, eles passam a valer: - **Fonte do corpo**: Assistant (padrão), Inter, Arial, Helvetica, Georgia ou a fonte do sistema. - **Cor do texto**, **Cor do botão** e **Cor do texto do botão**. - **Opacidade do botão**, de 0 a 1. - **Raio dos inputs (px)** e **Raio dos botões (px)**, de 0 a 24. Use o mesmo raio dos botões do tema para o widget não destoar. Comece sem personalização. Em muitos temas o resultado já fica coerente, e menos ajustes significam menos coisas para refazer quando você trocar de tema. ## 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, enquanto as cotações chegam. Serve para o cliente confirmar que digitou o CEP certo. Se o CEP não tem rua (CEP único de cidade pequena), aparecem o bairro ou a cidade e a UF. ![Widget do Cota Frete mostrando o endereço do CEP digitado antes das opções de frete](https://www.cotafrete.app/manual/images/listing/app_cep.webp) O cartão **Endereço do CEP** tem: - **Mostrar endereço do CEP**: liga ou desliga o endereço (ligado por padrão). - **Posição do endereço**: acima das cotações (padrão) ou abaixo. - **Espaço antes do endereço**: de 0 a 40 px (padrão 8). - **Cor de fundo do endereço**, **Cor do texto do endereço** e **Cor do pin**: vazias por padrão. Vazio quer dizer fundo transparente, texto na cor do widget e pin na cor do texto, ou seja, o endereço acompanha o tema. ## Posicionamento O cartão **Posicionamento** diz onde a inserção automática coloca o widget. Ele não afeta o bloco **Frete no produto**, que fica onde você o arrastou. | Campo | Para quê | Padrão | |---|---|---| | **Seletor de página de produto** | Elemento da página do produto onde o widget entra | `.product-form__buttons .product-form__payment-container` | | **Seletor de carrinho / drawer** | Elemento do carrinho ou da gaveta onde o widget entra | `.cart__ctas .drawer__footer` | | **Posição de inserção** | Antes do elemento, depois do elemento, dentro no início ou dentro no final | Depois do elemento | | **Margem superior** e **Margem inferior** | Espaço acima e abaixo do widget, de 0 a 100 px | 20 e 0 | | **Espaçamento interno** | Espaço dentro do widget, de 0 a 24 px | 0 | Cada campo de seletor aceita vários seletores, separados por espaço, vírgula ou quebra de linha. O widget entra no primeiro elemento encontrado. Um campo vazio, depois de salvo, desliga a inserção naquele contexto: útil quando você usa o bloco à mão na página do produto e quer a inserção automática só no carrinho. O botão **Escolher posição no tema** dispensa descobrir seletores. Ele abre o editor de temas numa aba nova, com linhas sobre os elementos possíveis da página. Clique em **Adicionar CotaFrete aqui** no ponto desejado, na página do produto e no carrinho ou na gaveta aberta, e depois em **Concluir**. Ao voltar para a aba do app, os campos já mostram os novos seletores. O passo a passo da gaveta está em [Widget na gaveta do carrinho](https://www.cotafrete.app/manual/widgets-da-loja/gaveta-do-carrinho/). ## CSS personalizado Para o que os campos não cobrem, o cartão **Avançado** tem o campo **CSS personalizado**. Comece cada seletor com `.cotafrete-widget`: isso limita o estilo ao widget e impede que ele vaze para o resto do tema. As partes do widget: | Classe | Parte | |---|---| | `.cotafrete-label` | Título do bloco | | `.cotafrete-input-group` | Campo de CEP e botão | | `.cotafrete-cep-input` | Campo de CEP | | `.cotafrete-btn` | Botão | | `.cotafrete-address` | Endereço do CEP | | `.cotafrete-result` | Lista de opções | | `.cotafrete-option` | Uma opção de frete | | `.cotafrete-name`, `.cotafrete-description`, `.cotafrete-price` | Nome, prazo e valor de uma opção | | `.cotafrete-error` | Mensagem de erro | 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á para mudar aqui Algumas coisas não são de estilo e têm outro lugar: - **As mensagens do widget** ("Por favor, insira um CEP válido." e as demais) são fixas. Veja [Mensagens do widget](https://www.cotafrete.app/manual/widgets-da-loja/mensagens-personalizadas/). - **O nome de cada serviço** vem da transportadora ou do gateway. Para mostrar outro nome, como "Entrega expressa", use as regras [Renomear](https://www.cotafrete.app/manual/regras-de-frete/renomear/) ou [Agrupar](https://www.cotafrete.app/manual/regras-de-frete/agrupar/). - **O prazo embaixo de cada serviço** segue a opção [Prazo no checkout](https://www.cotafrete.app/manual/checkout/prazo-no-checkout/), a mesma do checkout. ## Antes de publicar Confira o widget no celular. A maioria das compras acontece nele, e é ali que um raio de borda diferente ou uma cor de botão fraca aparecem primeiro.