Personalizar o widget
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 lojaWidget 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.
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.
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.
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.
.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.
- O nome de cada serviço vem da transportadora ou do gateway. Para mostrar outro nome, como “Entrega expressa”, use as regras Renomear ou Agrupar.
- O prazo embaixo de cada serviço segue a opção 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.