# Aparência do Video Commerce: CSS avançado

> Para quem cuida do código da loja. As classes públicas vc-* do Video Commerce, os estados, onde vale cada CSS e as regras que o painel confere ao salvar.

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

A área **Avançado** de **Video Commerce › Aparência** é para quem cuida do código da loja. Ela tem dois campos de CSS que valem para todas as vitrines, um para as vitrines e a bolha e outro para o player. O CSS só alcança as partes públicas listadas nesta página e é conferido antes de salvar.

> **Nota:** O CSS faz parte do plano Enterprise. Nos outros planos, os campos aparecem com o selo **Plano Enterprise**. Veja [O que é do plano Enterprise](https://provei.ai/ajuda/video-commerce/aparencia-marca/#o-que-%C3%A9-do-plano-enterprise).

Antes de escrever CSS, confira se o ajuste já existe no painel: a maioria das mudanças de cor, cantos, tamanho e texto está em **Estilo**, **Elementos** e **Textos**, com prévia.

## Onde vale cada CSS

| Campo                 | Onde fica                                                 | Onde vale                    |
| --------------------- | --------------------------------------------------------- | ---------------------------- |
| **CSS do tema**       | **Aparência › Avançado**                                  | Todas as vitrines e a bolha. |
| **CSS do player**     | **Aparência › Avançado**                                  | Só o player.                 |
| **CSS personalizado** | Editor da vitrine, em **Avançado (para desenvolvedores)** | Só aquela vitrine.           |

Cada campo aceita até 10.000 caracteres. Somando o tema, o player e todas as vitrines, o limite é de 30.000 caracteres.

![Área Avançado com os campos CSS do tema e CSS do player e a lista Partes e variáveis que o CSS pode usar, com as classes vc-\* e os estados](https://provei.ai/ajuda/_astro/aparencia-avancado.JHLUf6Q6_Xxn9v.webp)

## Classes públicas

O CSS só pode usar estas classes. Elas são estáveis: novas classes podem chegar, mas estas não mudam de nome.

| Classe                  | Parte                                                                                     |
| ----------------------- | ----------------------------------------------------------------------------------------- |
| `.vc-vitrine`           | A vitrine inteira na página (carrossel, stories, grade ou destaque).                      |
| `.vc-heading`           | O título acima dos vídeos.                                                                |
| `.vc-card`              | Cada vídeo da vitrine (cartão, story ou linha do destaque).                               |
| `.vc-media`             | A imagem do vídeo dentro do cartão, do story ou da bolha.                                 |
| `.vc-name`              | O nome embaixo do cartão ou do story.                                                     |
| `.vc-badge`             | O ícone de play ou de som sobre o vídeo.                                                  |
| `.vc-stories-ring`      | O anel colorido em volta de cada story.                                                   |
| `.vc-bubble`            | A bolha flutuante no canto da página.                                                     |
| `.vc-player`            | A janela do player (vídeo, controles e produtos).                                         |
| `.vc-progress`          | As barrinhas de progresso sobre o vídeo.                                                  |
| `.vc-controls`          | A barra de controles embaixo do vídeo.                                                    |
| `.vc-product-panel`     | O painel de produtos (ao lado, ou embaixo no celular).                                    |
| `.vc-product`           | Cada produto do painel.                                                                   |
| `.vc-cta`               | O botão principal: comprar no player, **Assistir** no destaque.                           |
| `.vc-bubble-label`      | A etiqueta da bolha: embaixo dela, ou o texto curvo na borda de baixo.                    |
| `.vc-bubble-tab`        | A aba em que a bolha vira quando o cliente minimiza. Um toque nela traz a bolha de volta. |
| `.vc-cta-link`          | O **Botão com link** de um vídeo, no lugar dos produtos (também tem `.vc-cta`).           |
| `.vc-whatsapp`          | A pergunta pelo WhatsApp: o botão, o campo da pergunta e o envio.                         |
| `.vc-price`             | O preço da loja no player.                                                                |
| `.vc-price-list`        | O preço **De**, riscado.                                                                  |
| `.vc-price-now`         | O preço atual: **Por** ou **A partir de**.                                                |
| `.vc-price-discount`    | O desconto, como “25% OFF”, no player e no card comprável.                                |
| `.vc-installments`      | A linha das parcelas sem juros.                                                           |
| `.vc-buy-together`      | O **Compre junto** no player.                                                             |
| `.vc-buy-together-item` | Cada produto do **Compre junto**, com a caixa de seleção.                                 |
| `.vc-buy-together-cta`  | O botão do **Compre junto** (também tem `.vc-cta`).                                       |
| `.vc-shop-card`         | O card comprável inteiro (também tem `.vc-card`).                                         |
| `.vc-card-controls`     | Os botões redondos no topo do card comprável.                                             |
| `.vc-card-toggle`       | O botão de pausar e tocar a prévia do card comprável.                                     |
| `.vc-card-sound`        | O botão de som do card comprável, que abre o player com som.                              |
| `.vc-strip`             | A faixa do produto embaixo do card comprável.                                             |
| `.vc-strip-thumb`       | A foto do produto na faixa.                                                               |
| `.vc-strip-name`        | O nome do produto na faixa.                                                               |
| `.vc-strip-price`       | A linha do preço na faixa.                                                                |
| `.vc-strip-add`         | A sacola da faixa.                                                                        |
| `.vc-strip-link`        | O link **Ver produto** da faixa, quando não dá para adicionar dali.                       |
| `.vc-product-strip`     | No player imersivo, a faixa do produto sobre o vídeo.                                     |
| `.vc-product-sheet`     | No player imersivo, o painel que abre da faixa para escolher o tamanho e adicionar.       |
| `.vc-overlay-controls`  | No player imersivo, os controles sobre o vídeo.                                           |

## Estados

O atributo `data-vc-state` diz em que estado uma parte está. Uma parte pode ter mais de um estado ao mesmo tempo, como um player tocando sem som, então use `~=`:

| Seletor                    | Quando vale                                                       |
| -------------------------- | ----------------------------------------------------------------- |
| `[data-vc-state~=playing]` | No player enquanto o vídeo toca.                                  |
| `[data-vc-state~=muted]`   | No player sem som, e no cartão cuja prévia toca sem som.          |
| `[data-vc-state~=active]`  | No cartão cuja prévia está tocando, e na barrinha do vídeo atual. |

Dois outros atributos ajudam a estilizar:

- `[data-vc-sale]` fica na faixa do card comprável e no produto do player quando o preço está em promoção, por exemplo `[data-vc-sale] .vc-price-now`.
- `[data-vc-layout=imersivo]` e `[data-vc-layout=vitrine]` dizem qual **Estilo do player** está em uso no celular.

## Variáveis

Cada ajuste do painel também tem uma variável de CSS `--vc-*`, como `--vc-accent` para a **Cor de destaque**. A lista completa fica em **Avançado**, em **Partes e variáveis que o CSS pode usar**, e em **Para desenvolvedores** de cada grupo, em **Variáveis CSS deste grupo**. Use as variáveis no **CSS do tema**.

## Exemplos

Espaçar as letras do nome embaixo de cada vídeo, no **CSS do tema**:

```css
.vc-card .vc-name {
  letter-spacing: .02em;
}
```

Arredondar mais a janela do player e destacar o botão de comprar, no **CSS do player**:

```css
.vc-player {
  border-radius: 20px;
}

.vc-player .vc-cta:hover {
  filter: brightness(1.1);
}
```

Esconder o ícone de som dos cartões que tocam sem som, no **CSS do tema**:

```css
.vc-card[data-vc-state~=muted] .vc-badge {
  opacity: 0;
}
```

## O que o painel confere

Ao salvar, o painel confere o CSS. Se algo não passa, o campo mostra o motivo e o rascunho guarda o último CSS válido. As regras:

- **Seletores**: só as classes `vc-*` acima, atributos `data-vc-*`, `:scope` (a raiz da vitrine) e pseudo-classes comuns, como `:hover`, `:focus-visible`, `:first-child`, `:nth-child()`, `::before` e `::after`. Seletores de tag, id e outras classes ficam de fora.
- **Regras com @**: só `@media` e `@supports`. Sem `@import`, `@font-face` ou `@keyframes`.
- **Sem conteúdo de fora**: nada de `url()` nem outras funções que carregam imagens.
- **Sem sair da vitrine**: `position` e `z-index` têm valores limitados (o campo mostra o motivo quando recusa um valor); nada de unidades da tela, como `vw` e `vh`.
- **Sem truques**: sem regras aninhadas e sem escapes com `\`.

Assim, o CSS só muda o visual das vitrines e do player.

Para posicionar uma vitrine por seletor da página, veja [Avançado (para desenvolvedores)](https://provei.ai/ajuda/video-commerce/onde-aparece/#avan%C3%A7ado-para-desenvolvedores).

## Perguntas frequentes

### Preciso de CSS para mudar cores, cantos ou a fonte?

Não. Cores, cantos, sombras, fontes, textos e o visual de cada elemento ficam nas outras áreas de Aparência. Use CSS só para o que o painel não cobre.

### Posso usar as classes internas que vejo no inspetor do navegador?

Não. O CSS só alcança as classes públicas vc-\* e os atributos data-vc-\*. As outras classes podem mudar a qualquer momento, e o painel recusa um CSS que use essas classes.

## 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.
- [Video Commerce para desenvolvedores](https://provei.ai/ajuda/video-commerce/para-desenvolvedores/) - O código da PROVEI.AI já carrega as vitrines de vídeo. Veja quando usar o código só do Video Commerce, onde copiar e como ele lida com SPA e CSP.
- [Video Commerce: onde a vitrine aparece](https://provei.ai/ajuda/video-commerce/onde-aparece/) - Escolha em quais páginas a vitrine de vídeos aparece, o lugar pronto na página ou o canto da bolha, e entenda os vídeos automáticos de cada produto.

## Algo deu errado?

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