Se os controles nativos da página Aparência não derem o visual que você quer, você pode adicionar seu próprio CSS para mudar a aparência do widget do Olvio na sua loja virtual. O CSS personalizado está disponível em todos os planos.

Para cores, fontes e raio dos cantos, comece pelos controles nativos: veja Personalize as cores do widget, Personalize a fonte e o tamanho da fonte do widget e Personalize o raio dos cantos do widget.

O widget não fica isolado do restante da página da sua loja virtual. O Olvio adiciona seu CSS à página como uma folha de estilos comum, então uma regra pode alterar qualquer elemento da página, não só o widget.

O Olvio o adiciona nas páginas de produto que exibem o bloco do Olvio e, se você usa o Olvio Advisor (planos Growth e Scale), nas outras páginas da sua loja em que a incorporação de app Olvio Advisor é carregada.

Inclua uma classe do Olvio em cada seletor, como .olvio-panel. Um seletor isolado como p ou button muda o estilo de todos os parágrafos ou botões dessas páginas.

A mensagem Alterações salvas confirma que o CSS foi salvo. Em seguida, o campo mostra seu CSS do jeito que o Olvio o armazenou, para você ver se algo foi removido (veja O que o Olvio remove ao salvar abaixo).

A Pré-visualização ao vivo da página Aparência não mostra o CSS personalizado: O CSS personalizado só é aplicado no widget ao vivo. Para ver suas alterações, recarregue uma página de produto na sua loja virtual.

Os estilos do próprio widget do Olvio usam !important em muitas propriedades para que seu tema não consiga quebrar o widget. Adicione !important a cada propriedade que você sobrescrever: onde o estilo do Olvio o utiliza, uma regra sem ele perde para o padrão do Olvio.

Para ajudar suas regras a prevalecerem, o Olvio adiciona html antes de cada seletor ao aplicar seu CSS: .olvio-panel é aplicado como html .olvio-panel.

Seletores dentro de at-rules como @media não recebem esse prefixo. Comece-os você mesmo com html, por exemplo @media (max-width: 600px) { html .olvio-title { font-size: 1.2em !important; } }.

Fora das at-rules, não comece você mesmo um seletor com html ou :root: com o prefixo que o Olvio adiciona, a regra não corresponderia a nada. Evite também vírgulas dentro de :has() e dentro de valores de atributo entre aspas: o Olvio adiciona o prefixo ali também, e essa parte do seletor deixa de corresponder.

O card CSS personalizado sugere estes seletores:

Para descobrir a classe de outro elemento, clique com o botão direito nele na sua loja virtual e use a ferramenta Inspecionar do seu navegador.

O Olvio verifica seu CSS ao salvar e remove, entre outras coisas:

Dentro de uma string entre aspas, evite sequências de escape com barra invertida como \", \\ e \A: elas quebram a string quando você salva. Sempre que possível, digite o próprio caractere, e coloque uma string que contenha " entre aspas simples.

Na parte inferior do painel de chat aparece uma linha que diz, em português, Você está conversando com uma IA • Com tecnologia Olvio, com um link para o Olvio na Shopify App Store. O Olvio não oferece nenhuma forma de ocultar essa linha, em nenhum plano.

O Olvio remove regras que citam as classes dessa linha. Na sua loja virtual, o widget também força os estilos de exibição e visibilidade próprios da linha e a coloca de volta se algo a remover.

Depois de salvar, recarregue uma página de produto na sua loja virtual e clique em uma pergunta sugerida (ou digite uma pergunta) para abrir o painel de chat. Verifique se as mensagens estão legíveis e se nada fica sobreposto. Verifique a página também em uma janela estreita, do tamanho de um celular.

Para cancelar edições que você ainda não salvou, clique em Descartar na barra de salvamento. Para remover um CSS personalizado que você já salvou, apague o conteúdo do campo e clique em Salvar: o widget volta à aparência padrão na próxima vez que uma página da loja virtual for carregada.

Se suas alterações ainda não aparecerem, veja Minhas alterações de Aparência não aparecem na loja virtual.