Como adicionar um script na loja integrada?

Como adicionar um script na loja integrada?
Como adicionar um script na loja integrada?

Se você deseja personalizar sua loja virtual com funcionalidades exclusivas — como banners dinâmicos, widgets de atendimento, ou scripts que otimizam a experiência do usuário — saber como inserir códigos nos templates Loja Integrada é essencial. Neste guia, você vai aprender o passo a passo para adicionar HTML, CSS ou JavaScript na sua loja, de forma segura e prática, aproveitando os recursos nativos da Loja Integrada.

Por que inserir scripts?

Adicionar scripts personalizados (JavaScript, HTML, CSS) permite implementar funcionalidades como calculadoras, widgets, alertas no carrinho ou automações, sem precisar editar o código-fonte principal do tema.

1. Verifique o plano e tema da loja

  • Apenas lojas com plano pago ou temas personalizados comprados permitem inserir código via painel.
  • Lojas no plano gratuito não têm acesso à funcionalidade de incluir scripts diretamente.

2. Acesse o local correto no painel

  1. No painel administrativo, vá até: Visual → Incluir código HTML.
  2. Clique em Adicionar código ou Criar código para iniciar um novo script.

3. Escolha as configurações corretas

  • Modo: Ative o modo avançado.
  • Local de publicação: Cabeçalho (head) ou Rodapé (antes de </body>).
  • Página de publicação: Todas as páginas ou uma específica (como carrinho ou produto).
  • Tipo: HTML, CSS ou JavaScript.

4. Cole o código e salve

Insira o script, estilo ou trecho HTML no campo apropriado e clique em Criar código ou Salvar. As mudanças podem levar até 15 minutos para aparecer no site.

5. Exemplos práticos

Mensagem de aviso no carrinho

Um alerta aparece logo após a caixa sombreada:

<script>
$(".caixa-sombreada").after("<div class='greve'>…</div>");
</script>
<style>
.greve { background:#f2dede; … }
</style>
  • Local: Rodapé
  • Página: Carrinho
  • Tipo: HTML

Auto-seleção de variação no produto

Ativa automaticamente a primeira variação da página:

window.addEventListener("DOMContentLoaded", () => {
  $(".atributos > div ul li a").first().click();
});
  • Local: Rodapé
  • Página: Produto
  • Tipo: JavaScript

Widget personalizado (como calculadora)

Snippet que insere uma calculadora personalizada:

  1. Vá em Visual → Incluir código HTML → Criar Código
  2. Selecione HTML/JS e defina página como produto
  3. Cole o HTML, CSS e <script> no campo
  4. Salve e aguarde a aplicação no layout

6. Dicas importantes

  • Sempre teste em um ambiente seguro.
  • A plataforma não oferece suporte ao código inserido.
  • Considere contratar um desenvolvedor parceiro.
  • Ajustes adicionais podem ser necessários para posicionamento.

Resumo prático

Etapa Ação
1 Verifique o plano da loja (plano pago ou tema avançado)
2 Vá em Visual → Incluir código HTML
3 Clique em Adicionar código (modo avançado)
4 Configure local, página e tipo (HTML/JS/CSS)
5 Cole o script e salve
6 Aguarde aplicação e teste no site

Considerações finais

Adicionar scripts na Loja Integrada é uma forma poderosa de ampliar funcionalidades sem alterar o tema original. Com cuidado, testes e os parâmetros certos, você pode:

  • Exibir banners e avisos contextuais
  • Incluir widgets de chat, avaliações, calculadoras
  • Automatizar comportamentos em páginas de produto

Precisa de ajuda com um script específico? Envie seu código ou explique a funcionalidade desejada — posso ajudar a adaptar!