O tema pronto da Nuvemshop deixa de atender quando a marca precisa de algo que o editor de layout não oferece: uma navegação que o tema não prevê, uma informação na página de produto que nenhum bloco exibe, uma organização diferente no celular. Nem toda necessidade, porém, pede código. Muitas se resolvem no próprio editor, outras com um aplicativo, e só uma parte exige liberar o código do tema. Essa separação define o plano, o orçamento e, principalmente, como a loja vai receber atualizações depois do lançamento.
Este guia é para quem já está na Nuvemshop, ou decidiu ir para ela, e precisa explicar ao fornecedor o que quer do layout. Se a dúvida ainda é a plataforma, vale comparar Nuvemshop e Shopify antes. Se a dúvida é o valor, o guia de custos de implantação na Nuvemshop separa plano, tema e serviço.
O que se resolve no editor, no código ou com aplicativo?
A Nuvemshop oferece quatro níveis de personalização, do mais simples ao mais trabalhoso. A diferença entre eles não é só técnica: cada nível muda quem consegue mexer na loja depois e o que acontece quando o tema é atualizado.
| Nível | O que permite | Limite documentado pela Nuvemshop |
|---|---|---|
| Editor de layout | Cores, fontes, banners, cabeçalho, ordem e conteúdo das seções do tema | Só o que o tema escolhido oferece |
| Edição avançada de CSS | Pequenos ajustes visuais, como cor de uma etiqueta ou espaçamento | Não cria funcionalidades, novos elementos nem muda a estrutura; os ajustes se perdem ao trocar de layout |
| Seção personalizada com bloco de código (layout Ipanema) | Montar seções próprias com botão, imagem, título, texto e um bloco de HTML, CSS e JavaScript, sem abrir o FTP | Um bloco de código por seção |
| Código do tema (FTP no legado, fork no layout com seções) | Mudar a estrutura das páginas: menu, busca, informações extras no produto, elementos em todas as páginas | Exige plano com acesso ao código-fonte e muda a forma de atualizar o tema |
Alguns limites valem para qualquer nível. Segundo a Central de Atendimento da Nuvemshop, o checkout não pode ser alterado pelo código do tema; dá para levar as cores da marca para ele, mas não mudar a estrutura. O sitemap é gerado pela plataforma e não pode ser editado. Os formulários de contato e de cadastro de clientes também não, porque interagem com outras ferramentas; a alternativa indicada é um formulário externo vinculado a uma página.
E há necessidades que não são de layout. A Nuvemshop informa que o cliente só escolhe entre as variações cadastradas e não pode digitar um valor livre. Uma gravação de nome, por exemplo, depende de aplicativo (a Central cita o Personalize e o Campo Personalizado). Filtros por atributo, como material ou ocasião, dependem de campos personalizados configurados no painel, e a função de filtros não está disponível no plano gratuito. Antes de orçar código, confira se o pedido não é, na verdade, configuração de catálogo ou um app.
O que muda na atualização entre tema legado e tema com seções?
Esta é a parte que mais pesa depois do lançamento e a que menos aparece nas propostas. A Nuvemshop tem dois tipos de layout, e cada um libera o código de um jeito diferente.
| Situação | Como o código é liberado | O que acontece com as atualizações | Ponto de atenção |
|---|---|---|---|
| Tema com seções sem código liberado | Não se aplica | Recebe sozinho as versões menores; avisa quando há versão maior | Personalização limitada ao editor, ao CSS e às seções personalizadas |
| Tema com seções com fork (ex.: Ipanema) | Fork feito pela CLI da Nuvemshop; o layout aparece como “Forked” | Fica fixo na versão em que está; cada versão nova chega como aviso, cria um rascunho e só vai ao ar quando alguém publica | Se a atualização e a personalização alteraram o mesmo arquivo, a versão nova prevalece e a alteração naquele arquivo é substituída |
| Tema legado com FTP aberto (ex.: Amazonas, Rio) | Abertura do FTP no painel, com edição pela CLI da Nuvemshop | Deixa de receber as melhorias automaticamente e o suporte para aplicá-las, salvo erro da plataforma | Não é possível trocar de layout com o FTP aberto; ao fechar o FTP, as alterações no código são perdidas |
Em termos de gestão, isso significa três coisas.
Backup é responsabilidade de quem contrata. A Central informa que a Nuvemshop não faz backup de layout personalizado. A proposta precisa dizer onde ficam os arquivos, em nome de quem e como restaurá-los.
Atualização vira tarefa recorrente no tema com fork. O aviso de nova versão mostra quais arquivos personalizados entram em conflito antes de criar o rascunho. Alguém precisa ler esse aviso, revisar o rascunho e publicar. O conteúdo das páginas e as configurações de design são levados para o rascunho; o risco está nos arquivos alterados dos dois lados.
Tema legado com código aberto tende a congelar. Como deixa de receber melhorias sozinho, cada evolução do tema passa a depender de quem mantém o código. Para um projeto novo, isso é argumento para começar em um tema com seções, quando ele atende ao catálogo.
O plano entra antes de tudo. Pela tabela oficial consultada em 20/10/2026, o acesso ao código-fonte aparece a partir do plano Impulso; Começo e Essencial não o incluem. A quantidade de rascunhos simultâneos também varia por plano, segundo a Central: até 2 no Começo e no Essencial, até 5 no Impulso e até 20 no Escala e no Next. No Começo, é possível criar rascunhos, mas publicar exige um plano pago. Confirme o plano na página oficial antes de fechar o escopo, porque tabelas mudam.
Como transformar navegação, produto e mobile em briefing?
O pedido “quero um layout exclusivo” não permite orçar nem conferir a entrega. O que funciona é listar cada necessidade, indicar o caminho provável e escrever um critério de aceite que possa ser marcado como atendido ou não na loja pronta. O modelo de briefing da loja virtual cobre o projeto inteiro; a tabela abaixo é o recorte do layout na Nuvemshop.
| Área | Necessidade (exemplo) | Caminho provável | Critério de aceite |
|---|---|---|---|
| Navegação | Menu com categorias e subcategorias em colunas | Editor, se o tema oferecer; senão, código | No celular e no desktop, toda categoria ativa aparece no menu em até dois toques ou cliques |
| Navegação | Filtrar por cor, tamanho e material | Campos personalizados e filtros no painel (plano pago) | Na listagem, os três filtros aparecem e combinam entre si |
| Listagem | Mostrar valor à vista com desconto | Código do tema | O valor à vista aparece em todos os cards de produto com a regra de desconto definida |
| Produto | Tabela de medidas por categoria | Guia de medidas nativo; pop-up exige código | Todo produto da categoria X exibe a tabela correta, inclusive no celular |
| Produto | Personalização com nome do cliente | Aplicativo | O texto digitado chega no pedido, legível no painel |
| Produto | Bloco de cuidados e composição | Seção personalizada (tema com seções) ou código | O bloco aparece abaixo da descrição sem empurrar o botão de compra para fora da primeira tela no celular |
| Mobile | Blocos lado a lado no desktop e empilhados no celular | Opção “Direção diferente para celulares” da seção personalizada, ou código | Em um celular de referência combinado, os blocos aparecem na disposição definida no briefing |
| Manutenção | Atualizar o tema sem perder ajustes | Definição de processo | Existe cópia dos arquivos e um responsável por revisar cada aviso de versão |
Duas regras ajudam a ler essa tabela. Primeiro, peça ao fornecedor que diga, item por item, se a solução é editor, CSS, seção, código ou app. Segundo, desconfie de critério de aceite que fala de “visual moderno” ou “experiência melhor”: se não dá para conferir, não entra no aceite.
Demonstração: duas telas do mesmo catálogo
Demonstração. Catálogo fictício de uma marca de roupas com 3 categorias, produtos em cor e tamanho e tema com seções. As telas abaixo não são de uma loja real, não foram medidas e não indicam ganho de vendas. Servem para mostrar como um problema de layout vira item de escopo.
Tela 1: listagem da categoria “Vestidos” no celular
| Ponto anotado | Problema na versão só com editor | Solução proposta | Nível |
|---|---|---|---|
| 1. Filtros | Só aparece o filtro de preço | Criar campos personalizados (material, comprimento) e ativá-los em Filtros | Painel |
| 2. Cores nos cards | A cor aparece como texto | Cadastrar as cores com os nomes da lista de cores da Nuvemshop, que exibe a amostra preenchida | Catálogo |
| 3. Preço à vista | O card mostra só o preço cheio | Incluir a linha do valor à vista no card | Código |
| 4. Banner da categoria | Imagem desktop cortada no celular | Subir imagem própria para celular, se o tema permitir; senão, ajuste por CSS | Editor ou CSS |
Tela 2: página de produto “Vestido midi”
| Ponto anotado | Problema na versão só com editor | Solução proposta | Nível |
|---|---|---|---|
| 1. Medidas | Cliente pergunta o tamanho pelo WhatsApp | Guia de medidas nativo vinculado ao produto | Painel |
| 2. Composição e cuidados | Informação perdida no meio da descrição | Seção personalizada com título e texto, abaixo da descrição | Seção |
| 3. Bordado com inicial | Cliente não consegue informar a letra | Aplicativo de personalização; a variação não aceita texto livre | App |
| 4. Botão de compra no celular | Fica abaixo de três blocos de imagem | Revisar a ordem das seções no editor; se o tema não permitir, ajustar no código e conferir no aparelho de referência | Editor ou código |
Repare que, das oito anotações, só duas exigem código. É esse tipo de leitura que evita contratar um layout sob medida para resolver o que o painel já faz, ou o contrário: tentar forçar o editor quando a estrutura precisa mudar. Se a lista de itens de código for longa e central para a marca, a conversa passa a ser plataforma pronta ou sob medida.
Condições e limites
As informações sobre editor, CSS, seções, FTP, fork e rascunhos vêm da Central de Atendimento da Nuvemshop, e o plano com acesso ao código vem da página oficial de planos, todas consultadas em 20/10/2026. A Nuvemshop recomenda que a edição de código seja feita por agência ou pessoa desenvolvedora, com conhecimento de HTML, CSS e JavaScript e com a documentação de temas em mãos. Aplicativos citados pela Central têm condições e preços próprios, que não foram verificados aqui. A demonstração acima é ilustrativa.
Próximo passo
Leve a tabela de necessidades para a conversa com o fornecedor e peça que cada item volte classificado por nível, com o plano exigido e o processo de atualização descrito. Para somar esse escopo ao custo total, use o guia de custos de implantação na Nuvemshop. Se você quer uma proposta que já separe editor, código e aplicativos, com critério de aceite por item, conheça a nossa criação de loja na Nuvemshop.
