Personalize as cores do widget

Você pode combinar o widget Olvio com a sua marca usando sete cores. Elas se aplicam ao widget nas suas páginas de produto e ao painel de chat, incluindo o painel de chat que abre a partir dos links do Olvio Advisor (planos Growth e Scale). As configurações de cor em si estão disponíveis em todos os planos.

Alterar as cores do widget

Abra Aparência no menu do app Olvio.
Clique na aba Estilo.
No card Cores, altere as cores que quiser. Elas estão agrupadas em Marca (Cor de destaque, Primeiro plano de destaque), Superfícies (Fundo, Superfície, Borda) e Texto (Texto, Texto atenuado).
Clique em Salvar na barra de salvamento que aparece assim que você altera algo. A mensagem Alterações salvas confirma o salvamento.

Para escolher uma cor, clique no quadrado colorido à esquerda de um campo para abrir o seletor de cores do seu navegador, ou digite ou cole um código hexadecimal no campo. Os códigos precisam usar o formato de seis dígitos #rrggbb, por exemplo #7b3fe4. Códigos curtos como #fff e nomes de cores não são aceitos: o campo mostra Formato esperado: #rrggbb e você não consegue salvar até corrigir.

Para cancelar alterações que você ainda não salvou, clique em Descartar na barra de salvamento.

O que cada cor altera

Cor	Onde aparece
Cor de destaque	O Nome do especialista acima da Pergunta de chamariz, os ícones de brilho nas perguntas sugeridas da página de produto, o botão de enviar, as mensagens do comprador, o avatar padrão, a área atrás de um avatar enviado com fundo transparente, o botão Adicionar ao carrinho acima do campo de pergunta no painel de chat das páginas de produto, e os botões de adicionar ao carrinho e os selos de desconto nos cards de produto. Ela também contorna uma pergunta sugerida ao passar o mouse e o campo de pergunta enquanto ele está selecionado, e colore os links nas respostas da IA ao passar o mouse.
Primeiro plano de destaque	Texto e ícones exibidos sobre a cor de destaque: as mensagens do comprador, a seta de enviar, o ícone do avatar padrão, o texto dos botões de adicionar ao carrinho no painel de chat e nos cards de produto, e os selos de desconto.
Fundo	O painel de chat, as perguntas sugeridas, o campo de pergunta (na página de produto e no painel de chat) e os seletores de variante e seus menus nos cards de produto. Na página de produto, o restante do widget é transparente, então o fundo do seu tema aparece atrás do Nome do especialista e da Pergunta de chamariz e ao redor das sugestões e do campo de pergunta.
Superfície	As respostas da IA, o indicador de digitação, o fundo atrás das imagens de produto nos cards de produto, o destaque quando um comprador passa o mouse sobre uma pergunta sugerida ou uma opção de variante, e a opção selecionada em um menu de variantes.
Borda	O contorno das perguntas sugeridas, do campo de pergunta, dos seletores de variante e dos seus menus, e a linha abaixo do cabeçalho do painel de chat. A linha fina acima do campo de pergunta no painel de chat não usa essa cor.
Texto	A Pergunta de chamariz, as perguntas sugeridas, o texto que os compradores digitam, as respostas da IA, os nomes de produtos no painel de chat e nos cards de produto, os seletores de variante e suas opções nos cards de produto, o nome da sua loja no topo do painel de chat do Advisor, e o botão de fechar e a seta para carregar mensagens anteriores ao passar o mouse.
Texto atenuado	O placeholder do campo de pergunta, os preços dos produtos no painel de chat e nos cards de produto, a seta suspensa dos seletores de variante e as opções esgotadas nos menus de variantes dos cards de produto, os pontinhos do indicador de digitação, o botão de fechar e a seta para carregar mensagens anteriores (os dois mudam para Texto ao passar o mouse; a seta também mostra o rótulo Carregar mensagens anteriores), o aviso e a linha Com tecnologia Olvio no rodapé do painel de chat, e o fundo do selo Esgotado nos cards de produto.

Os seletores de variante e os botões de adicionar ao carrinho nos cards de produto só aparecem quando Ativar adicionar ao carrinho no chat está ativado, na aba Avançado da página Aparência. Consulte Mostre cards de produto e permita adicionar ao carrinho pelo chat.

O Olvio não ajusta o contraste das suas cores. Verifique se o Primeiro plano de destaque continua legível sobre a Cor de destaque, se o Texto e o Texto atenuado continuam legíveis sobre o Fundo, se o Texto continua legível sobre a Superfície e se o Fundo continua legível sobre o Texto atenuado, que preenche o selo Esgotado. Nas páginas de produto, o Nome do especialista (Cor de destaque) e a Pergunta de chamariz (Texto) aparecem diretamente sobre o fundo do seu tema, então verifique se continuam legíveis ali também.

Pré-visualizar suas cores

A Pré-visualização ao vivo é atualizada enquanto você edita, antes de salvar. Use os botões Página de produto e Painel de chat acima dela para alternar a visualização. Superfície só aparece na visualização Painel de chat. Enquanto um código de cor for inválido, a pré-visualização mostra a cor padrão do Olvio no lugar dele.

A pré-visualização usa conteúdo de exemplo e não inclui seu CSS personalizado nem as cores substituídas no editor de temas. Na visualização Painel de chat, Borda também colore a linha acima do campo de pergunta; na sua loja, essa linha mantém a mesma cor suave, qualquer que seja a sua escolha. Depois de salvar, confira uma página de produto na sua loja.

Ver as novas cores na sua loja

Quando você clica em Salvar, o Olvio envia as novas cores para a sua loja. Recarregue uma página de produto para vê-las. Se as cores antigas continuarem aparecendo, consulte Minhas alterações de Aparência não aparecem na loja virtual.

Substituir as cores para um modelo de produto

O bloco Olvio — Product page tem configurações de cor próprias, que aparecem quando você seleciona o bloco no editor de temas da Shopify. Use custom colors for this block: quando a caixa está marcada, as cores Accent, Accent foreground, Background, Surface, Border, Text e Muted text do bloco substituem as definidas na página Aparência. Clique em Salvar no editor de temas.

A substituição se aplica a todos os produtos que usam o modelo e também ao painel de chat que abre a partir do bloco, mesmo que a descrição da configuração diga for this block only.
As configurações de cor do bloco começam com as cores padrão do Olvio, e não com as cores definidas na página Aparência. Ao ativar a substituição, defina as sete.
Use custom colors for this block: para voltar às cores da página Aparência, desmarque essa caixa e salve o tema.

Para a configuração completa do bloco, consulte Adicione o widget Olvio às suas páginas de produto.