Aparência do Video Commerce: CSS avançado

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.

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.

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:

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

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

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

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

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ênciaNa 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 desenvolvedoresO 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 apareceEscolha 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