Códigos HTML/JS — Scripts e Estilos Personalizados
Integre ferramentas de terceiros (como pixels e chats) ou aplique estilos CSS específicos sem precisar alterar os arquivos do tema.
Para que serve este módulo?
Muitas vezes é necessário inserir um "trecho de código" (script de analytics, pixel de conversão ou regra CSS) que não existe nativamente no tema. Ao centralizar esses trechos aqui, você mantém o controle sobre o que é injetado no site, onde é exibido (cabeçalho ou rodapé) e em quais páginas.
Nota: Isso não altera o funcionamento de pedidos ou preços. As alterações são aplicadas imediatamente ao salvar (sujeito a cache do navegador).
1 Atenção e Segurança
- • Estabilidade: Scripts JavaScript mal escritos podem quebrar o layout ou travar o carregamento do site. Revise a origem do código antes de ativar.
- • Dados Sensíveis: Evite inserir senhas ou credenciais de API diretamente no código HTML/JS, pois eles ficarão visíveis no código-fonte da página.
- • Emergência: Se algo falhar no site (tela branca, botão que não clica) após uma alteração, use o botão de "Desativar" neste módulo para desligar o código suspeito imediatamente.
2 Passo a Passo Rápido
-
01Identificação: No campo de descrição, coloque um nome claro (ex: "Google Analytics 4", "Pixel Facebook", "Correção CSS Menu").
-
02Conteúdo: Cole o código no editor. Lembre-se de incluir as tags
<script>para JS ou<style>para CSS, se necessário. -
03Configuração: Escolha o Tipo (HTML, CSS, JS) e o Local de injeção.
Dica: Use "Cabeçalho" para tracking que precisa carregar cedo e "Rodapé" para scripts que podem aguardar. -
04Escopo: Defina onde o código vai rodar: Todas as páginas, apenas Home, ou apenas no fluxo de Checkout/Finalização.
-
05Ativar e Testar: Salve como inativo primeiro se quiser apenas guardar. Para usar, marque como "Ativo", salve e teste em uma janela anônima.
3 Seções de Configuração
Editor de Código
Área principal com destaque de sintaxe para colar e revisar o script ou estilo.
Tipo e Local
Define tecnicamente como o navegador deve ler o código (JS/CSS) e em que momento do carregamento (Topo/Fim).
Página (Escopo)
Permite otimizar o site carregando scripts pesados apenas onde são necessários (ex: Pixel de Compra apenas no Checkout).
Situação
Controle lateral (toggle) para ativar ou desativar o código rapidamente, útil para diagnósticos.
Dica: Mantenha um registro local dos códigos inseridos. Em caso de dúvidas sobre segurança ou performance, consulte sua equipe técnica antes de habilitar scripts de terceiros em produção.