LOJA VIRTUAL
Editor Visual
Como fazer configurações customizadas de CSS
Publicado em: 3/25/2021, 3:46:18 PM
Nas configurações do Editor visual, é possível aplicar algumas configurações personalizadas de CSS.
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.
Assista o tutorial em vídeo:
Ou, se preferir, siga as instruções abaixo:
1º Acesse o menu Loja Virtual, depois vá em Meus temas, clique em Personalizar.
2º Dentro do editor visual, na aba lateral, role até a opção Configurações do tema.
3º Clique em Estilo customizado CSS.
4 º Edite o código CSS que você desejar.

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 para obter os resultados desejados no navegador.

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 Loja Virtual, clique em Meus temas e personalizar.
2º Selecione a seção desejada.
3º Dentro do campo Aparência e Classe customizada para editar o css insira seu código.
Para conhecer as classes variáveis de CSS disponíveis, acesse o artigo Lista de variáveis para o CSS customizado.

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.