Personalize o raio dos cantos do widget
O raio dos cantos define o quanto os cantos do widget são arredondados: de cantos retos em 0 px até um círculo no avatar e um formato de pílula no botão de adicionar ao carrinho e no campo de entrada. O Olvio oferece cinco controles deslizantes separados para você ajustar cada parte do widget ao seu tema. Eles estão disponíveis em todos os planos.
Os mesmos valores se aplicam ao widget nas suas páginas de produto, ao painel de chat e às conversas do Olvio Advisor (planos Growth e Scale).
Encontre os controles de raio dos cantos
No admin do Olvio, abra Aparência.
Na aba Página de produto, o card Sugestões tem um controle deslizante Raio dos cantos.
Na aba Painel de chat, o card Avatar tem um controle deslizante Raio dos cantos, e o card Forma tem os controles Balão de conversa, Botão de adicionar ao carrinho e Campo de entrada.
Aba | Card | Controle deslizante | Faixa | Padrão |
Página de produto | Sugestões | Raio dos cantos | 0 a 24 px | 12 px |
Painel de chat | Avatar | Raio dos cantos | 0 a 16 px | 16 px (círculo) |
Painel de chat | Forma | Balão de conversa | 0 a 24 px | 12 px |
Painel de chat | Forma | Botão de adicionar ao carrinho | 0 a 32 px | 32 px (pílula) |
Painel de chat | Forma | Campo de entrada | 0 a 32 px | 32 px (pílula) |
O rótulo de cada controle mostra o valor atual, por exemplo Balão de conversa — 12px. O controle do avatar acrescenta (círculo) em 16 px, e os controles Botão de adicionar ao carrinho e Campo de entrada acrescentam (pílula) a partir de 28 px.
O que cada controle muda na sua loja
Raio dos cantos de Sugestões: as perguntas sugeridas no widget Olvio na página de produto.
Raio dos cantos de Avatar: o avatar exibido ao lado de cada resposta da IA no painel de chat. Em 16 px, o avatar é um círculo.
Balão de conversa: as mensagens do comprador, as respostas da IA e o indicador de digitação. Ele também arredonda a imagem do produto no topo do painel de chat, as imagens dos cards de produto no chat e os selos de desconto e de esgotado nesses cards. Seja qual for o valor do controle, o canto inferior de cada mensagem do lado de quem a enviou mantém um raio de 4 px.
Botão de adicionar ao carrinho: o botão de adicionar ao carrinho acima do campo de entrada no painel de chat das suas páginas de produto, e os botões de adicionar ao carrinho dos cards de produto no chat quando Ativar adicionar ao carrinho no chat está ativado. Consulte Mostre cards de produto e permita adicionar ao carrinho pelo chat.
Campo de entrada: o campo de pergunta na página de produto e na parte inferior do painel de chat, os menus de variantes dos cards de produto (quando Ativar adicionar ao carrinho no chat está ativado) e os botões de resposta exibidos acima do campo de entrada nas conversas do Olvio Advisor.
O botão de enviar e o botão de fechar são redondos e não têm controle deslizante.
Pré-visualize suas alterações
A Pré-visualização ao vivo é atualizada enquanto você arrasta um controle. Ao abrir a aba Página de produto, você vê a pré-visualização da página de produto, com as sugestões e o campo de entrada. Ao abrir a aba Painel de chat, você vê a pré-visualização do painel de chat, com o avatar, os balões de mensagem, o botão de adicionar ao carrinho e o campo de entrada. Você também pode alternar entre as duas com os botões Página de produto e Painel de chat acima da pré-visualização.
A pré-visualização não mostra os cards de produto, os botões de resposta do Advisor nem seu CSS personalizado, e o espaço reservado para a miniatura do produto no topo da pré-visualização do painel de chat não segue o controle Balão de conversa (a imagem do produto na sua loja segue). O avatar ao lado das respostas na pré-visualização segue o controle Avatar, mas o avatar maior no card Avatar sempre aparece como um círculo. Confira sua loja depois de salvar.
Salve e confira sua loja
Depois que você move um controle, uma barra de salvamento aparece. Clique em Salvar, ou em Descartar para voltar aos últimos valores salvos.
Aguarde a mensagem Alterações salvas. Se aparecer uma mensagem de erro no lugar dela, como Too many requests, suas alterações não foram salvas: a barra de salvamento continua aberta, então aguarde um momento e clique em Salvar novamente.
Abra ou recarregue uma página de produto da sua loja para ver os novos cantos. O avatar, o Balão de conversa e o Botão de adicionar ao carrinho só aparecem no painel de chat. Faça uma pergunta no widget para abri-lo e conferi-los.
Se você não conseguir clicar em Salvar, procure na aba Estilo um campo de cor que mostre Formato esperado: #rrggbb e corrija-o primeiro.
Não há botão para redefinir. Para voltar aos valores padrão, mova cada controle para o valor padrão indicado na tabela acima e salve.
Se sua loja ainda mostrar os formatos antigos, consulte Minhas alterações de Aparência não aparecem na loja virtual.
O que os controles não cobrem
Configurações do bloco no editor de temas: o bloco Olvio — Product page no editor de temas da Shopify só pode substituir as cores e o tamanho da fonte. O raio dos cantos sempre vem de Aparência.
Outros formatos: para mudar um formato que não tem controle deslizante, como o botão de enviar, use CSS personalizado. Consulte Adicione CSS personalizado ao widget.