Menu Aparência > Meus temas

O código CSS é utilizado para realizar edições customizadas em sua loja virtual. Você pode utilizar os códigos para ajustar as seções separadamente, configurando conforme as instruções abaixo.

Personalizando o CSS das seções

Além de personalizar o tema com CSS, você pode criar classes específicas para cada seção de sua loja. Se você utilizar o CSS customizado, todas as vezes que a seção for utilizada na loja este CSS será carregado, mas se você criar uma classe para a seção específica o CSS só será carregado quando a classe for criada.

1º Acesse o menu Aparência, clique em Meus temas e personalizar. 

2º Acesse a aba de Seções e clique na seção desejada.

3º Insira as edições de código no campo Classe customizada para editar o css.

Lista de variáveis para o CSS customizado

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);
}

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