Como personalizar o tema
3 min
Criado por Rafael Pinheiro em 01/07/2020 16:24
Atualizado por Laura em 19/01/2021 09:05

Menu Aparência > Meus temas

O Tema é um conjunto de configurações inseridas dentro do editor visual, que podem ser totalmente editáveis, ele é constantemente atualizado pela Dooca com novas funcionalidades, opções visuais melhorias de performance e SEO. 

Exemplos de uso

Suponhamos que você tenha um visual de uma loja de demonstração da Dooca em sua loja virtual. Utilizando o editor visual você pode personalizar esse tema, mantendo as mesmas configurações iniciais da loja de demonstração.

Código CSS do Tema

O código CSS do tema permite que você realize edições customizadas no tema, em alguns pacotes de atualizações, são necessárias alterações em CSS, incorporação de códigos, JavaScript, ou na estrutura de HTML para inserção de novas funcionalidades ou melhorias de SEO. 

1º Acesse o menu Aparência e clique em Meus Temas

2º Clique em Personalizar e acesse a aba de Configurações.
configurações.png

3º Clique em Estilo customizado CSS e edite o código CSS que você desejar.
dc .png

Importante!

  • As edições de CSS devem ser realizadas apenas por pessoas com conhecimento técnico na área. A Dooca não se responsabiliza e não presta suporte para questões de CSS.
  • No caso de edição de código, a implantação de novas funcionalidades que necessitam de desenvolvimento do tema, são de responsabilidade sua ou do desenvolvedor. 
  • Alterações em códigos de .json, .twig ou .css através do editor podem impossibilitar as atualizações do tema padrão. 
  • Um novo código CSS sobrepõe os códigos existentes, para isso utilize o código !important para obter os resultados desejados no navegador.

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.