# Aparência do Video Commerce: kits e estilo

> Escolha um kit pronto, como Boutique ou Minimal, e ajuste cor de destaque, texto, fundo, cantos, sombra e tamanho de todas as vitrines de uma vez.

Canonical: https://provei.ai/ajuda/video-commerce/aparencia-kits-e-estilo/
Produto: video-commerce
Tipo: guia
Last updated: 2026-11-06
Translation (en): https://provei.ai/ajuda/en/video-commerce/aparencia-kits-e-estilo.md

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

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.

1. Em **Aparência › Estilo**, em **Escolha um kit**, clique no kit.

2. 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**.

3. O aviso **Kit … aplicado** confirma: “Ajuste o que quiser. Nada muda na loja antes de publicar.” Confira na prévia.

4. Ajuste o que quiser em **Cores e formas gerais** e clique em **Publicar** quando estiver pronto.

![Kit Boutique aplicado: o cartão Boutique marcado como Atual, o aviso Kit Boutique aplicado, a prévia com o título em serifa e a barra 1 alteração não publicada com Descartar e Publicar](https://provei.ai/ajuda/_astro/aparencia-kit-aplicado.Bz69Ko1q_Z1UYWIm.webp)

> **Nota:** No plano Enterprise, o kit também muda a fonte dos títulos quando ele tem uma, como a serifa do Boutique. Fora do Enterprise, a fonte fica como está.

## 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](https://provei.ai/ajuda/video-commerce/aparencia-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

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](https://provei.ai/ajuda/video-commerce/aparencia-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 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.

![Aba Bolha em Elementos com as quatro distâncias da bolha no computador e no celular, a dica Afaste a bolha de outros botões, como o do WhatsApp, e a etiqueta Ver looks](https://provei.ai/ajuda/_astro/aparencia-elementos-bolha.CTDl_Dm9_Z1JtF7q.webp)

## 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.

![Campo Cor do texto do cartão com uma cor clara e o aviso de contraste com o botão Corrigir contraste](https://provei.ai/ajuda/_astro/aparencia-contraste.Dk5tdxNn_5cetP.webp)

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.

## Veja também

- [Video Commerce: personalizar a aparência](https://provei.ai/ajuda/video-commerce/aparencia/) - Na aba Aparência do Video Commerce você muda cores, logo, textos e o player de todas as vitrines de uma vez, vê a prévia e publica quando quiser.
- [Aparência do Video Commerce por vitrine](https://provei.ai/ajuda/video-commerce/aparencia-por-vitrine/) - Cada vitrine segue o tema da loja. Veja como mudar a cor ou os cantos só numa vitrine, voltar ao tema e aplicar o mesmo ajuste a todas as vitrines.
- [Aparência do Video Commerce: publicar](https://provei.ai/ajuda/video-commerce/aparencia-publicar/) - As mudanças da Aparência ficam salvas como rascunho e só chegam à loja com Publicar. Veja como publicar, descartar e o que fazer com avisos e conflitos.

## Algo deu errado?

- [Video Commerce: solução de problemas](https://provei.ai/ajuda/video-commerce/solucao-de-problemas/)