Personalize a fonte e o tamanho da fonte do widget
Você escolhe a fonte e o tamanho base do texto do widget Olvio na página Aparência. As mesmas configurações se aplicam ao widget nas suas páginas de produto, ao painel de chat dele e ao Olvio Advisor, disponível nos planos Growth e Scale (consulte O que é o Olvio Advisor?). A página Aparência está disponível em todos os planos, depois que você escolhe um plano.
Abrir as configurações de tipografia
No admin do Olvio, abra Aparência.
Clique na aba Estilo.
Role a página até o card Tipografia, abaixo de Cores.
O card contém o menu Fonte e o controle deslizante Tamanho de fonte base.
Escolher uma fonte
O menu Fonte oferece estas opções:
Default (sistema): a fonte padrão do Olvio. O widget usa DM Sans se o seu tema a carrega ou se ela está instalada no dispositivo do comprador; caso contrário, usa a fonte do sistema do dispositivo. Lojas novas começam com esta opção. Ela não segue as configurações de fonte do seu tema.
Fontes sem serifa: Assistant, DM Sans, Helvetica, Inter, Lato, Montserrat, Open Sans, Poppins, Roboto, Source Sans Pro e Work Sans.
Fontes com serifa: Georgia (serif), Merriweather (serif) e Playfair Display (serif).
Para usar uma fonte que não está na lista, selecione Personalizada no final do menu e digite a fonte no campo font-family CSS que aparece, por exemplo 'Brandon Grotesque', sans-serif. Termine o valor com uma família genérica, como sans-serif ou serif, para que o navegador tenha uma fonte alternativa. O campo aceita até 200 caracteres e começa com o valor CSS da fonte que você tinha selecionado (vazio se você estava em Default (sistema)). Se você deixá-lo vazio, o widget usa Default (sistema).
Verificar se o seu tema carrega a fonte
O Olvio não carrega nenhum arquivo de fonte por você, seja uma fonte escolhida na lista ou uma que você digitou, então a fonte precisa ser carregada pelo seu tema Shopify ou estar instalada no dispositivo do comprador. Caso contrário, o navegador usa a próxima fonte do valor, como uma fonte genérica sem serifa ou com serifa, e o widget fica diferente do que você escolheu. O CSS personalizado também não consegue carregar uma fonte a partir de um endereço web completo: ao salvar, o Olvio remove as regras @import e qualquer endereço que comece com http://, https:// ou // dentro de url(), mesmo que aponte para a sua própria loja. Para saber o que o CSS personalizado pode alterar, consulte Adicione CSS personalizado ao widget.
Para combinar o widget com o texto da sua loja:
No editor de temas da Shopify, abra Configurações do tema e depois Tipografia para ver as fontes que o seu tema usa nos títulos e no corpo do texto. As fontes disponíveis dependem do desenvolvedor do seu tema.
No Olvio, selecione a mesma fonte no menu Fonte ou selecione Personalizada e digite-a em font-family CSS.
Salve e depois confira uma página de produto na sua loja virtual.
Definir o tamanho base da fonte
Mova o controle deslizante Tamanho de fonte base entre 12 e 20 px, em incrementos de 1 px. O rótulo dele mostra o valor atual, e lojas novas começam em 14 px. Todo o texto dentro do widget é dimensionado a partir deste valor, então o rótulo, o título, as perguntas sugeridas e as mensagens mantêm suas proporções.
Uma exceção: em telas sensíveis ao toque, como celulares e tablets, o texto que os compradores digitam no campo de pergunta tem sempre 16 px. Isso impede que o navegador aplique zoom quando um comprador toca no campo.
Visualizar e salvar as alterações
A Pré-visualização ao vivo ao lado das configurações (abaixo delas em telas menores) é atualizada assim que você muda a fonte ou o tamanho. Use os botões Página de produto e Painel de chat acima dela para alternar entre as duas visualizações.
A pré-visualização usa as fontes disponíveis no seu navegador, não as fontes que o seu tema carrega; por isso, uma fonte pode ficar diferente na pré-visualização e na sua loja virtual. Por exemplo, a Inter sempre aparece corretamente na pré-visualização porque o admin do Olvio a carrega, mesmo que o seu tema não carregue a Inter. O título na pré-visualização também é um pouco menor do que na sua loja virtual.
Assim que você altera uma configuração, a barra de salvamento aparece. Clique em Salvar, e Alterações salvas confirma. Não é possível salvar enquanto um campo de cor mostrar Formato esperado: #rrggbb; por isso, corrija esse código primeiro. Descartar volta às suas últimas configurações salvas. Recarregue uma página de produto na sua loja virtual para ver o resultado. Se nada mudar, consulte Minhas alterações de Aparência não aparecem na loja virtual.
Usar outro tamanho em um modelo de produto
O bloco Olvio — Product page no editor de temas da Shopify tem uma seção Typography override. Quando você marca Use custom font size for this block, esse bloco usa o próprio tamanho de fonte em vez do definido em Aparência. A substituição se aplica a todos os produtos que usam este modelo de produto.
No editor de temas da Shopify, abra o modelo de produto em que você adicionou o bloco Olvio e selecione o bloco Olvio — Product page.
Em Typography override, marque Use custom font size for this block.
Defina Base font size entre 12 e 20 px. O padrão é 14 px.
Clique em Salvar.
A substituição também se aplica ao painel de chat que abre a partir desse bloco. Dessa forma, você só pode substituir o tamanho, não a fonte. A Pré-visualização ao vivo do Olvio não mostra essa substituição; por isso, se um tamanho definido em Aparência não aparecer em uma página de produto, verifique se esta caixa está marcada. Para encontrar o bloco, consulte Adicione o widget Olvio às suas páginas de produto.