LOJA VIRTUAL
Editor Visual
Lista de variáveis para o CSS customizado
Publicado em: 4/13/2021, 11:54:18 AM
Quando você configura cores e fontes no editor visual, algumas informações ficam armazenadas em variáveis. Você pode utilizar essas informações no CSS para definir que o tamanho da fonte de subtítulos seja o mesmo da fonte de destaque.
Confira a lista de variáveis disponíveis:
  • Cores padrões:
  • Cor primária: var(--color-primary);
  • Cor secundária: var(--color-secondary);
  • Cor de borda: var(--color-border);
  • Cor de destaque: var(--color-highlight);
  • Cor do botão de compra: var(--color-buy-button);
  • Cor do texto do botão de compra: var(--color-buy-button-text);
  • Cor de textos: var(--color-text);
  • Fontes:
  • Fontes de Menu
  • Família de fonte: var(--m-ff);
  • Tamanho da fonte: var(--m-fs);
  • Peso da fonte: var(--m-fw);
  • Espaçamento entre letras: var(--m-ls);
  • Estilo da fonte: var(--m-tt);
  • Fontes de Títulos:
  • Família de fonte: var(--h1-ff);
  • Tamanho da fonte: var(--h1-fs);
  • Peso da fonte: var(--h1-fw);
  • Espaçamento entre letras: var(--h1-ls);
  • Estilo da fonte: var(--h1-tt);
  • Fontes de Subtítulos:
  • Família de fonte: var(--h2-ff);
  • Tamanho da fonte: var(--h2-fs);
  • Peso da fonte: var(--h2-fw);
  • Espaçamento entre letras: var(--h2-ls);
  • Estilo da fonte: var(--h2-tt);
  • Fontes de Destaques:
  • Família de fonte: var(--h3-ff);
  • Tamanho da fonte: var(--h3-fs);
  • Peso da fonte: var(--h3-fw);
  • Espaçamento entre letras: var(--h3-ls);
  • Estilo da fonte: var(--h3-tt);
  • Fontes de Textos:
  • Família de fonte: var(--tx-ff);
  • Tamanho da fonte: var(--tx-fs);
  • Peso da fonte: var(--tx-fw);
  • Espaçamento entre letras: var(--tx-ls);
  • Estilo da fonte: var(--tx-tt);
  • Checkout:
  • Cor Primária: var(--secondary);
  • Cor secundária: var(--primary);
  • Cor de textos: var(--highlight);

Exemplo de uso

Você pode utilizar um código para que todos os títulos das seções de vitrine de produtos (.section--products-showcase) tenham a cor de destaque padrão do tema. Estamos usando a variável de cor de destaque para isto.
Exemplo de código:
.section--products-showcase .h1{
color: var(--color-highlight);
}

Dica da Dooca :)

LOCALIZANDO O ELEMENTO QUE VOCÊ DESEJA ALTERAR:
Os navegadores possuem uma funcionalidade de inspeção, em que é possível analisar a estrutura do CSS, para que você consiga criar seu código e inserir no editor visual. Na grande maioria dos navegadores o atalho para abrir o modo de inspeção é a tecla F12. Você também pode acessar clicando com o botão direito do mouse na tela na opção Inspecionar.
CUSTOMIZAÇÃO DE CÓDIGO:
Antes de iniciar a customizações de código, analise as opções disponíveis no editor visual e nos aplicativos da sua loja virtual, para não editar funcionalidades que prejudiquem a atualização de tema.
Para uma guia deste tópico, valide os itens ao lado direito.
Export as PDF
Copy link