Como adicionar códigos personalizados no checkout da minha loja Nuvemshop?
Saiba como adicionar códigos personalizados (snippets) no checkout da sua loja Nuvemshop Next, o que é possível personalizar com o Nube SDK e quais são os limites da funcionalidade.
Última atualização: 10/08/2026
Os códigos personalizados no checkout, também chamados de snippets, permitem inserir código de desenvolvimento na página de finalização da compra e adaptar essa etapa às necessidades do seu negócio. Com eles, você pode exibir avisos, informações sobre frete ou orientações antes do pagamento, por exemplo.
Neste tutorial, te mostramos como funciona os códigos personalizados no checkout e como incluir na sua loja.
O que é possível fazer?
Os códigos personalizados funcionam dentro dos componentes e limites suportados pelo Nube SDK. Isso significa que você pode adicionar pequenos elementos em pontos definidos do checkout e também definir a aparência desses elementos.
Alguns exemplos do que você pode incluir:
- Avisos e comunicados para quem está finalizando a compra;
- Informações sobre frete e prazos de entrega;
- Orientações antes da etapa de pagamento;
- Mensagens na tela de confirmação do pedido.
Recomendamos ter conhecimento técnico em desenvolvimento para escrever e testar os códigos personalizados na loja. Se você não trabalha com isso ou não possui conhecimento técnico, indicamos contatar uma pessoa desenvolvedora ou com um parceiro especialista para essa implementação.
Para conferir a documentação completa de como utilizar os códigos personalizado no checkout, acessar a página: Nube SDK
Limitações
Não é possível alterar livremente os campos, os botões ou a estrutura original do checkout com os códigos personalizados.
Os códigos personalizados no checkout estão disponíveis apenas para lojas do plano Nuvemshop Next. Se sua loja utiliza outro plano, essa funcionalidade não está disponível.
Como adicionar um código personalizado no checkout?
Para inserir um código personalizado na página de finalização da sua loja, seguir os passos abaixo:
1. Acessar o administrador da sua loja Nuvemshop.
2. Ir em "Configurações > Opções de checkout".
3. Descer até a seção "Códigos personalizados" e, em "Desenvolvimento", clicar em "Adicionar código".
4. No painel "Desenvolvimento", preencher o campo "Scripts" com o código JSX baseado na biblioteca Nube SDK.
5. Se você quiser permitir a edição do conteúdo e do design desse código a partir de "Códigos personalizados", preencher o campo "Configuração (opcional)" com o JSON correspondente.
6. Clicar em “Salvar” para fechar a janela lateral. E depois em “Salvar” novamente para finalizar.
Pronto!
O código personalizado passa a ser aplicado no checkout da sua loja. Para conferir o resultado, faça uma compra de teste e acompanhe as etapas de finalização.
Como o código é aplicado em uma etapa crítica da compra, recomendamos testar cada alteração antes de deixá-la ativa. Em implementações mais sensíveis, você pode contar com o acompanhamento do seu gerente de contas ou parceiros desenvolvedores.
Para conhecer as outras configurações da página de finalização da sua loja, acessar o tutorial: Como personalizar o checkout na Nuvemshop?
