Personalizar o provador com CSS

O botão e a janela do provador usam variáveis de CSS. Comece pelo painel: em Experiência na loja você muda cores, cantos, fonte, tamanho e posição sem mexer no tema, e vê a prévia antes de publicar. Use as variáveis só para o que o painel não cobre.

Dica

Cada aba de Experiência na loja tem uma seção Para desenvolvedores com um campo de CSS próprio. Veja Botão na página e Janela do provador.

Variáveis do botão padrão

Valem para o botão no estilo Padrão do provador de ambientes, de moda e de óculos. Os valores iniciais vêm do Tom escolhido no painel.

Variável	O que controla
--reverbs-btn-gradient	Fundo do botão. Aceita cor ou degradê.
--reverbs-btn-color	Cor do texto e do ícone.
--reverbs-btn-shadow	Sombra do botão.
--reverbs-btn-shadow-hover	Sombra ao passar o mouse.
--reverbs-btn-glow	Cor do brilho ao passar o mouse.

Variáveis da janela

Variável	O que controla
--reverbs-modal-bg	Fundo escurecido atrás da janela.
--reverbs-modal-content-bg	Fundo da janela e do rodapé.
--reverbs-modal-header-bg	Fundo do cabeçalho.
--reverbs-modal-text	Cor do texto do cabeçalho.
--reverbs-modal-border	Borda da janela, do cabeçalho e do rodapé. Use o valor completo, por exemplo 1px solid #e2e8f0.
--reverbs-modal-radius	Cantos da janela. Vem de Cantos e sombra.
--reverbs-modal-width	Largura da janela. Vem de Tamanho.
--reverbs-modal-height	Altura da janela. Vem de Tamanho.

Variáveis de camada

Variável	O que controla
--reverbs-z-button	Camada do botão.
--reverbs-z-modal	Camada da janela.

Se um menu ou um carrinho lateral da loja fica por cima do provador, ou o contrário, ajuste as camadas em Para desenvolvedores, na aba Janela do provador.

Como sobrescrever as variáveis

O provador adiciona a folha de estilo dele no fim do <head>, depois do CSS do tema. Por isso, uma regra :root do tema perde para a do provador. Use um seletor mais específico:

html:root {
  --reverbs-btn-gradient: #1f2937;
  --reverbs-btn-color: #ffffff;
  --reverbs-modal-content-bg: #fafaf9;
}

Variáveis do botão personalizado

Quando o botão está no estilo Personalizado, em Botão na página › Aparência, o provador marca o botão com o atributo data-reverbs-custom-appearance="true" e usa estas variáveis no lugar das do botão padrão:

Variável	O que controla
--reverbs-button-background	Cor de fundo.
--reverbs-button-color	Cor do texto.
--reverbs-button-hover-background	Fundo ao passar o mouse.
--reverbs-button-hover-color	Texto ao passar o mouse.
--reverbs-button-border-color	Cor da borda.
--reverbs-button-border-width	Espessura da borda.
--reverbs-button-radius	Cantos.
--reverbs-button-shadow	Sombra.
--reverbs-button-padding	Espaçamento interno.
--reverbs-button-gap	Espaço entre o ícone e o texto.
--reverbs-button-width	Largura.
--reverbs-button-icon-size	Tamanho do ícone.
--reverbs-button-font-family	Fonte.
--reverbs-button-font-size	Tamanho da letra.
--reverbs-button-font-weight	Peso da letra.
--reverbs-button-font-style	Itálico.
--reverbs-button-text-transform	Maiúsculas.
--reverbs-button-letter-spacing	Espaço entre letras.
--reverbs-button-line-height	Altura da linha.
--reverbs-button-text-decoration	Sublinhado ao passar o mouse.
--reverbs-button-focus-color	Cor do contorno de foco, para quem navega pelo teclado.
--reverbs-button-focus-width	Espessura do contorno de foco.
--reverbs-button-focus-offset	Distância do contorno de foco.

Os valores vêm dos ajustes do painel e ficam no próprio botão. Para mudar, prefira o painel. Se precisar sobrescrever no tema, use o atributo no seletor e !important:

.reverbs-widget-button[data-reverbs-custom-appearance="true"] {
  --reverbs-button-background: #111827 !important;
  --reverbs-button-color: #ffffff !important;
}

O atributo data-reverbs-custom-appearance é colocado pelo provador. Não adicione à mão: sem o estilo Personalizado no painel, essas variáveis não têm valor.

Links de medidas

Os links do provador de medidas (Guia de medidas, Descubra seu tamanho e Comparar tamanhos) têm aparência própria. Ajuste em Medidas e tamanho na página do produto, que também tem campos de CSS próprio em Para desenvolvedores.

Cuidados

• Confira o resultado na loja depois de publicar o tema, no computador e no celular.
• Use só as variáveis desta página. Classes internas do provador podem mudar sem aviso.
• Mantenha contraste suficiente entre texto e fundo, e não esconda o contorno de foco.

Perguntas frequentes

Preciso de CSS para mudar a cor do botão?

Não. Cores, cantos, fonte, tamanho e posição do botão e da janela ficam em Experiência na loja. Use CSS só para o que o painel não cobre.

Mudei a variável no meu CSS e nada aconteceu. Por quê?

O provador adiciona a folha de estilo dele depois da sua. Use um seletor mais específico, como html:root, para as variáveis do tema, e !important para as variáveis do botão personalizado.

Veja também

• Botão na página do produto
• Janela do provador
• Estilo da loja, kits e ajustes globais
• Modos de instalação do código da Provei