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.