Como adicionar JavaScript e códigos personalizados na loja

Use códigos personalizados para instalar um chat, inserir uma metatag ou adicionar um comportamento à vitrine. Você pode colar o código recebido de um fornecedor ou pedir uma proposta à IA. Use códigos de fontes em que você confia: um script ativo pode acessar o conteúdo da vitrine. Nunca cole senhas, tokens privados ou dados de clientes.

Onde encontrar

Abra Aparência > Personalizar e escolha Códigos personalizados nas ações rápidas ou no menu Mais opções (•••).

Os códigos ficam sempre no tema que você está editando. Eles acompanham o rascunho, o ZIP e o histórico. Confira a prévia e publique o tema para ativar as mudanças na loja.

Checkout, confirmação do pedido e conta do comprador não recebem esses códigos.

Identificar e editar os scripts do tema com IA

Ao abrir a tela, a IA analisa os scripts dos arquivos atuais do tema, incluindo o rascunho e códigos recebidos por ZIP. Ela recebe o contexto textual completo do tema e mostra nomes, explicações e onde cada script se aplica, considerando templates, components e condições Liquid. A indicação de alcance é uma análise da IA: quando não houver informação suficiente, aparece “Aplicação não identificada”. Você não precisa cadastrar previamente cada script. Se a finalidade não puder ser identificada, o item continua disponível pelo arquivo em que foi encontrado.

Aguarde a identificação dos scripts do tema. O campo Script mostra a quantidade encontrada e já seleciona o primeiro resultado. Para incluir outro código, escolha Adicionar um script.
No campo Script, selecione um script encontrado. Para adicionar outro, escolha Adicionar um script e cole o código no pedido.
Para um script existente, escolha Editar ou Remover. O local onde ele se aplica é preservado automaticamente. A opção Onde aplicar? aparece somente ao adicionar um novo script.
Ao editar, descreva a alteração desejada. Ao remover, não é necessário escrever um pedido.
Clique em Aplicar com IA para editar ou adicionar, ou em Remover com IA para remover o script selecionado. A alteração é preparada no rascunho.
Confira a prévia e publique o tema para ativar a mudança na loja.

Scripts adicionais podem ser escritos diretamente em layout.liquid, sections ou components existentes e importados por ZIP. Use tags script literais, sem expressões Liquid dentro delas. O arquivo técnico assets/theme.js permanece protegido e precisa conservar seu conteúdo original. O formato custom-codes.json continua sendo reconhecido quando já existir, mas não é exigido para descobrir scripts.

Aplicar no site inteiro, em uma categoria ou em uma página

Ao escolher Adicionar um script, use Onde aplicar? para escolher:

Site inteiro: páginas da vitrine, exceto checkout, confirmação e conta do comprador.
Categoria específica: selecione a categoria. Inclui suas paginações e filtros, sem incluir categorias filhas automaticamente.
Página específica: selecione a página inicial, carrinho, busca, uma página institucional ou um dos produtos disponíveis no seletor do editor.

A IA prepara a condição no próprio Liquid, ao redor do script. Alterar somente um template compartilhado pode atingir várias páginas; confira o alcance na prévia antes de publicar. Quando você escolhe uma categoria ou página, o editor abre a prévia desse destino após aplicar a alteração.

Limitações e solução de problemas

Se a lista não carregar, use Identificar scripts novamente. Uma falha de conexão não significa que o tema esteja sem scripts; tentar novamente preserva o formulário.

Pedidos simples, como “adicione um alerta de boas-vindas ao entrar no site”, devem ser preparados diretamente. Neste editor, pedidos de comportamento são tratados como JavaScript. Para um alerta ao entrar, sem outro formato solicitado, a IA prepara um script com alert(). A prévia isolada bloqueia alertas nativos do navegador; o resumo da alteração informa essa limitação. A IA deve preservar o formato quando você pedir explicitamente HTML, metatag ou CSS.

Se faltar uma informação indispensável, abre o modal Esclarecer pedido, com seu pedido original e uma pergunta. Escolha uma opção ou escreva a resposta e clique em Confirmar e aplicar. Selecionar uma opção sozinho não envia a resposta. Use Voltar ao pedido para revisar o texto original.

Há no máximo uma rodada de esclarecimento por pedido. Depois da confirmação, a IA usa escolhas razoáveis para os detalhes restantes. Se ainda faltar um dado indispensável, informa o impedimento sem inventar informações nem aplicar a alteração. Em caso de erro de conexão, sua resposta continua no modal para tentar novamente.

Durante a análise ou edição, a barra mostra uma estimativa de cerca de 30 segundos. Ela aguarda em 95% se a resposta demorar mais; não representa a porcentagem real de trabalho da IA. Os botões voltam a ficar disponíveis quando o processamento e a atualização da prévia terminam.

Ao fechar com um pedido pendente, escolha Continuar editando para manter o texto ou Descartar e fechar para sair. Os detalhes e o conteúdo de um script ficam em Ver código encontrado.

A prévia é temporária e isolada do painel. Ferramentas que exigem cookies, domínio autorizado ou a origem real da loja podem não funcionar nela.
Use URLs HTTPS completas. Não são aceitos iframes, atributos como onclick, alterações de política de segurança nem módulos JavaScript. Código que depende de eval também pode ser bloqueado.
Liquid não é interpretado dentro desses códigos. Não use expressões Liquid para buscar dados do comprador ou do pedido.
A identificação e edição dos scripts do tema não consomem a cota de IA dos recursos extras. Mesmo com essa cota esgotada, você pode alterar o tema enquanto sua assinatura permitir a edição.

Para quem veio do sistema antigo

Scripts do sistema antigo não são convertidos automaticamente. Para reutilizar um código, cole o trecho no pedido da IA e confira sua compatibilidade com o tema atual antes de publicar. Esta tela altera apenas o tema em edição.