Como personalizar as seções da loja com CSS
4 min
Criado por: Laura em: 21/12/2020 14:03

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

aparencia personalizar.png

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. 

O que você achou deste artigo?
Últimos artigos visitados