Aparência do Video Commerce: kits e estilo
Onde no painel: Video Commerce › Aparência
A área Estilo de Video Commerce › Aparência muda o visual de todas as vitrines e do player de uma vez. Comece por um kit pronto e depois ajuste as cores e formas que quiser.
Escolher um kit
Seção intitulada “Escolher um kit”Um kit é um ponto de partida para tudo de uma vez: cores, cantos, sombras, tamanhos e o visual de cada elemento.
| Kit | Como é |
|---|---|
| Padrão Provei | O visual de hoje, valor por valor. |
| Minimal | Tinta escura, linhas finas, sem sombra. |
| Boutique | Ameixa rosada, serifa nos títulos, curvas. |
| Esportivo | Laranja forte, título em caixa alta, sombra marcada. |
| Luxo | Dourado envelhecido, cantos retos, muito respiro. |
| Ótica | Azul petróleo, cantos suaves, leitura fácil. |
| Casa | Verde-oliva, linho, cantos macios. |
| Cinema | Faixa escura, vermelho de gravação, player imersivo. |
A ordem dos kits muda conforme o segmento da loja, e dois deles levam a etiqueta do segmento, como Para moda, Para óticas ou Para casa. O kit em uso mostra Atual. Um kit com a etiqueta 1 ressalva tem uma cor com pouco contraste: ainda dá para usar.
-
Em Aparência › Estilo, em Escolha um kit, clique no kit.
-
Se você já mudou alguma coisa, o painel pergunta Aplicar o kit …? e avisa: “Textos, logo e CSS ficam como estão.” Clique em Aplicar kit.
-
O aviso Kit … aplicado confirma: “Ajuste o que quiser. Nada muda na loja antes de publicar.” Confira na prévia.
-
Ajuste o que quiser em Cores e formas gerais e clique em Publicar quando estiver pronto.
Cores e formas gerais
Seção intitulada “Cores e formas gerais”Abaixo dos kits, Cores e formas gerais vale para todas as vitrines e o player, a não ser que uma vitrine mude só para ela. Veja Ajustes por vitrine.
| Ajuste | O que muda |
|---|---|
| Cor de destaque | O play, o anel dos stories, o botão de comprar e o contorno de foco. |
| Cor do texto | O texto das vitrines. Da loja usa a cor do texto da sua página. |
| Fundo da vitrine | Transparente deixa aparecer o fundo da sua página. |
| Cor das superfícies | O cartão do formato Destaque. |
| Cantos | Redondos, Suaves ou Retos. |
| Sombra | Sem sombra, Sutil, Clássica, Suave ou Elevada. |
| Tamanho dos vídeos | Pequeno, Médio ou Grande, no computador. |
| Tamanho no celular | Igual ao do computador, ou Pequeno, Médio ou Grande. |
Em Mais opções ficam o texto sobre o destaque, o texto secundário, o fundo enquanto o vídeo carrega, a cor e a espessura da borda e a cor das sombras. Em Para desenvolvedores, o contorno de foco, que aparece quando o cliente navega pelo teclado.
Para mudar uma cor, escolha Escolher cor e use o quadrado de cor ou digite o código, como #8c3b5e. Nos campos com Automático, a Provei escolhe uma cor legível a partir da cor de destaque ou do tema do player.
Elementos em detalhe
Seção intitulada “Elementos em detalhe”Para ir além das cores gerais, abra Elementos. Cada aba tem os ajustes de uma parte:
- Cards: Formato dos cards no carrossel e na grade (Retângulo, Quadrado, Círculo, Flor, Coração ou Selo; fora o retângulo, os vídeos aparecem em recorte quadrado), Posição da fileira no computador e no celular (Esquerda, Centro ou Direita, quando os vídeos não ocupam a largura toda), ícone de play, alinhamento, tamanho, letras e peso do título, espaço entre os vídeos e acima e abaixo da vitrine.
- Stories: o anel em volta (Cor de destaque, Uma cor ou Degradê), a cor do anel e o texto embaixo.
- Bolha: Formato da bolha (Círculo, Arredondado, Quadrado, Flor, Coração ou Selo), distância da lateral e do canto, no computador e no celular, a etiqueta e o Estilo da etiqueta (Etiqueta, Curva, em que o texto contorna a borda de baixo da bolha, ou Sem etiqueta), o anel e as cores do botão que minimiza a bolha.
- Destaque: cor do texto do cartão e cantos do botão Assistir.
- Player: Estilo do player, Ajuste do vídeo, tema do player (Escuro, Claro ou Cor da marca), destaque do player, cantos da janela e quanto escurecer o fundo da página.
- Produtos no player: o cartão do produto, a escolha da variação e o estilo, a cor e os cantos do botão de comprar.
No Player:
- Estilo do player: Imersivo, o padrão, deixa o vídeo em tela cheia no celular, com os produtos por cima. Vitrine mostra o vídeo em cima e a lista de produtos embaixo. No computador os dois são iguais.
- Ajuste do vídeo: Automático preenche a tela quando o vídeo tem quase o mesmo formato dela e, se não, mostra o vídeo inteiro sobre a imagem desfocada. Preencher a tela pode cortar as bordas. Mostrar o vídeo inteiro nunca corta.
Os dois também podem mudar só numa vitrine, na seção Estilo do editor. Veja Ajustes por vitrine.
Para ver o player com os seus ajustes, escolha Player na Prévia ao vivo. No celular, a prévia mostra o player como o cliente vê: o vídeo, os controles, os produtos e o selo “Tecnologia por Provei.AI”.
Afastar a bolha do botão do WhatsApp
Seção intitulada “Afastar a bolha do botão do WhatsApp”Se a bolha cobre o botão do WhatsApp ou outro botão no canto da página, abra Elementos › Bolha e aumente Distância da lateral ou Distância do canto. Há um par de ajustes para o computador e outro para o celular. Busque “whatsapp” na busca de ajustes para chegar direto.
Avisos de contraste
Seção intitulada “Avisos de contraste”Quando uma cor fica difícil de ler sobre o fundo, o campo mostra o contraste e o mínimo recomendado, por exemplo: “Contraste 1,21:1 com cor das superfícies. O mínimo para texto é 4,50:1. Você pode publicar assim.” O topo de Estilo também avisa quantas cores estão com pouco contraste.
O aviso não bloqueia nada. Clique em Corrigir contraste para trocar pela cor mais próxima da sua que fica legível, ou mantenha a sua cor e publique.
Perguntas frequentes
Aplicar um kit apaga minha logo ou meus textos?
Não. O kit troca cores, cantos, sombras e o visual dos elementos. Textos, logo e CSS ficam como estão.
O aviso de pouco contraste impede publicar?
Não. O aviso só aconselha. Você pode publicar assim ou clicar em Corrigir contraste para usar a cor legível mais próxima da que você escolheu.