Adicionar CSS personalizado

Use primeiro as configurações de estilo do próprio app e adicione CSS no seu tema apenas para as poucas coisas que elas não cobrem.

As configurações de estilo do app cobrem a maior parte do que as lojas precisam. Quando elas não bastam, como um raio de borda específico ou um ajuste que deve valer apenas no celular, você pode adicionar CSS próprio.

Comece pelas configurações integradas

Quase toda mudança de aparência para a qual as pessoas recorrem ao CSS já é uma configuração em Quote settings > Customize. Confira estas antes de escrever qualquer coisa.

Onde	O que você pode definir
Button & widget > Style	Button type (Filled / Outline / Text link), Size (Medium / Large / Full width), Text color, Background color e Font size.
Quote form > Style	Um estilo predefinido, mais Match theme styling if possible.
Quote form > Customize text	Font style.
Quote form > Customize form color	Title bar color, Title bar background, Color, Background color, Border color e Quote popup primary color.
Quote cart page > Enable Quote Cart Widget	Text color e Background color: são as únicas duas que o widget flutuante aceita.

A maioria das mudanças de aparência já é uma configuração: comece por aqui.

Onde guardar seu CSS

Onde quer que você guarde CSS personalizado, guarde em um lugar que você consiga encontrar de novo e desfazer. O CSS mantido no seu próprio tema tem um efeito colateral útil: ele é versionado junto com o tema, então duplicar o tema antes de editar dá a você algo para o qual reverter.

Descobrir o que alvejar

Clique com o botão direito no elemento da sua loja virtual e escolha Inspecionar. Isso mostra os nomes de classe para os quais escrever as regras.

Uma página de produto da loja virtual com o botão de cotação abaixo de Add to cart, pronta para ser inspecionada no navegador

Inspecione o botão de cotação na sua própria loja virtual para descobrir o que alvejar.

Duas coisas valem a pena saber antes de começar:

O botão de cotação aparece com o Button text que você definiu, no lugar que escolheu em Button position, então confira Product page button position antes de sair procurando por ele.
O widget flutuante de cotação, com o rótulo Quote (n), fica dentro de um contêiner com a classe grfq-quote-widget-container.

Algumas regras práticas

Regra	Por quê
Mude uma coisa por vez	Quando algo quebrar, você saberá qual regra causou o problema.
Teste no celular	A maioria das solicitações de cotação vem de celulares, e um ajuste só para desktop muitas vezes quebra lá.
Guarde uma cópia em outro lugar	Cole seu CSS também em uma nota, para poder restaurá-lo se precisar.
Evite `!important` sempre que puder	Ele vence hoje e torna cada mudança futura mais difícil.
Comente cada regra	Em seis meses, um bloco de CSS sem explicação é algo que ninguém tem coragem de apagar.

Depois de trocar de tema

Comece pela incorporação de app no novo tema. Ela é ativada no seu tema e, enquanto não estiver ativada, nada do que o app faz aparece na sua loja virtual. Veja Ativar o app no seu tema.

Depois, confira o seu CSS. Ele foi escrito para a marcação do seu tema, então, após uma troca de tema ou uma atualização importante, olhe seu botão de cotação, o formulário de cotação e o widget flutuante: as regras podem precisar de ajustes.

Próximos passos

Alterar o texto e as cores do botão: as configurações de botão para testar primeiro
Combinar com o estilo do seu tema: deixe o formulário seguir o seu tema automaticamente
Falar com o suporte: peça um trecho de código

Isso foi útil?