Como personalizar a página de produto com o layout Ipanema na Nuvemshop?
Aprenda a configurar as informações, a descrição, os produtos complementares e alternativos, e a adicionar novas seções à página de produto.
Última atualização: 13/10/2026
A página de Produto é onde seu cliente decide se compra ou não: é ali que ele vê as fotos, o preço e a descrição. Personalizá-la serve, por exemplo, para mostrar melhor as variações do produto, oferecer uma descrição mais completa com imagens ou vídeos, ou sugerir produtos relacionados que aumentem o ticket médio da compra.
O layout Ipanema permite configurar como seu produto aparece na loja. A página de Produto traz 4 seções padrão que você pode configurar e reordenar, mas não excluir: Informação do produto, Descrição do produto, Produtos complementares e Produtos alternativos. Você também pode adicionar seções novas.
Neste tutorial, explicamos como configurar cada uma dessas seções e como adicionar outras novas à página.
Vamos aos passos!
1. Acessar o administrador da sua Nuvemshop.
2. Acessar “Loja online > Layout” e clicar em “Editar layout”.
3. Clicar no botão do menu superior central e selecionar a página “Produto”.
4. Dentro da página de “Produto”, você pode configurar as seções padrão: Informação do produto, Descrição do produto, Produtos complementares e Produtos alternativos.
5. Clicar em cada uma para abrir as configurações.
É a área principal de compra da loja: reúne a galeria de fotos e todas as informações de compra, organizadas em cabeçalho, preços e descontos, formulário de compra e detalhes do produto.
5.1. Clicar em cada um dos blocos abaixo para abrir as configurações.
Clicar em “Informação do produto” para configurar design, cores e CSS personalizado de toda a seção.
Design
Largura: define a largura da seção. Selecione “Página” para alinhá-la ao conteúdo principal ou “Completo” para que ela ocupe toda a tela.
Separação entre elementos: controla o espaçamento entre Multimídia e Informações sobre a compra, em pixels (px). Por padrão, 24 px.
Espaçamento superior e inferior: ajusta o espaçamento vertical interno da seção, em pixels (px). Por padrão, 24 px.
Espaçamento esquerdo e direito: ajusta o espaçamento horizontal interno da seção, em pixels (px). Por padrão, 24 px.
Cores
Cor de fundo: define a cor de fundo da seção. A opção “Sem preenchimento” mantém o fundo transparente, sem aplicar nenhuma cor.
CSS personalizado
CSS personalizado: permite adicionar regras de CSS próprias para personalizar visualmente a seção além das opções padrão do editor.
Aqui você configura a galeria de fotos do produto. Este bloco não pode ser ocultado nem excluído.
Galeria
Formato em computadores: escolha entre “Grade” ou “Carrossel” para mostrar as fotos e defina a disposição (quantidade de colunas) na versão para computadores.
Miniaturas
Mostrar miniaturas: quando ativado, mostra pequenas miniaturas das imagens do produto ao lado ou abaixo da imagem principal, permitindo que seu cliente navegue entre as fotos rapidamente.
Posição em computadores: define onde as miniaturas aparecem na versão desktop. Escolha entre “Esquerda” (miniaturas em coluna ao lado da imagem principal) ou “Inferior” (miniaturas em linha abaixo da imagem principal).
5.2. Clicar em “Informações sobre a compra” para ver os quatro grupos que a compõem: Cabeçalho, Preços e descontos, Formulário de compra e Detalhes do produto. Este bloco não pode ser ocultado nem excluído.
Reúne a quantidade de vendas, o código SKU e o nome do produto. Este grupo não pode ser excluído, reordenado nem ocultado, mas você pode reordenar e ocultar cada bloco dentro dele.
Design
Separação entre elementos: controla o espaçamento entre os blocos do cabeçalho, em pixels (px). Por padrão, 8 px.
Espaçamento superior e inferior: ajusta o espaçamento vertical interno do grupo, em pixels (px). Por padrão, 0 px.
Ao clicar em “Cabeçalho”, você pode configurar separadamente os seguintes blocos:
Quantidade de vendas
Mostra abaixo do nome do produto quantas unidades foram vendidas, para gerar confiança no seu cliente. Você pode ocultar este bloco ou reordená-lo dentro do Cabeçalho, mas não excluí-lo.
Mostrar quantidade de vendas a partir de: defina o número mínimo de vendas que o produto precisa ter para que essa informação apareça. Por padrão, 10.
Código SKU
Mostra o código SKU do produto. Você pode ocultar este bloco ou reordená-lo dentro do Cabeçalho, mas não excluí-lo. Não tem opções de personalização.
Nome
Mostra o nome do produto. Você pode ocultar este bloco ou reordená-lo dentro do Cabeçalho, mas não excluí-lo.
Estilo: define o estilo de título do nome do produto (Título 1 a Título 6, ou Personalizado). Por padrão, Título 4.
Tamanho diferente para celulares: quando ativado, permite escolher um estilo diferente para a versão mobile.
Reúne o preço, os meios de pagamento e os descontos do produto. Este grupo não pode ser excluído, reordenado nem ocultado, mas você pode reordenar e ocultar cada bloco dentro dele.
Design
Separação entre elementos: controla o espaçamento entre os blocos do grupo, em pixels (px). Por padrão, 24 px.
Espaçamento superior e inferior: ajusta o espaçamento vertical interno do grupo, em pixels (px). Por padrão, 0 px.
Ao clicar em “Preços e descontos”, você pode configurar separadamente os seguintes blocos:
Preços
Mostra o preço do produto, com os valores que mudam de acordo com as promoções ativas. Você pode ocultar este bloco ou reordená-lo dentro de Preços e descontos, mas não excluí-lo. Cada elemento do preço tem estilo e cor próprios:
Preço: o preço principal do produto. Estilo padrão: Título 3.
Preço riscado: aparece quando o produto tem preço promocional. Estilo padrão: Parágrafo.
Desconto sobre o preço: aparece quando o produto tem preço promocional. Estilo padrão: Parágrafo grande.
Mostrar valor economizado: mostra quanto seu cliente economiza com o preço promocional. Fica oculto se “Preço por meio de pagamento” estiver visível. Estilo padrão: Título 5.
Preço por meio de pagamento: mostra o preço final considerando o desconto de algum meio de pagamento. Estilo padrão: Título 5.
Meios de pagamento
Mostra as informações de parcelas e descontos de acordo com o meio de pagamento escolhido, além do link para adicionar novos meios de pagamento à loja. Você pode ocultar este bloco ou reordená-lo dentro de Preços e descontos, mas não excluí-lo.
Mostrar informações de parcelas: mostra as parcelas disponíveis para o produto.
Mostrar porcentagem de desconto: mostra a porcentagem de desconto por meio de pagamento.
Descontos
Mostra as promoções e os descontos aplicados ao produto. Você pode ocultar este bloco ou reordená-lo dentro de Preços e descontos, mas não excluí-lo. Não tem opções de conteúdo, já que você configura as promoções na seção correspondente do administrador.
Separação entre elementos: controla o espaçamento entre as promoções aplicadas ao produto, em pixels (px). Por padrão, 24 px.
Reúne as variações, o alerta de estoque, o botão de compra e a calculadora de frete. Este grupo não pode ser excluído, reordenado nem ocultado, mas você pode reordenar e ocultar (ou excluir, dependendo do bloco) cada elemento dentro dele.
Design
Separação entre elementos: controla o espaçamento entre os blocos do grupo, em pixels (px). Por padrão, 36 px.
Espaçamento superior e inferior: ajusta o espaçamento vertical interno do grupo, em pixels (px). Por padrão, 8 px.
Ao clicar em “Formulário de compra”, você pode configurar separadamente os seguintes blocos:
Variações
Mostra os tamanhos, cores ou outras variações do produto para que seu cliente escolha qual comprar. Só aparece se o produto tiver variações. Você pode ocultar este bloco ou reordená-lo dentro do Formulário de compra, mas não excluí-lo.
Formato: escolha entre “Lista suspensa” ou “Botões” para mostrar as variações.
Mostrar foto da variação de cor como botão: substitui o botão padrão pela imagem da cor correspondente.
Guia de tamanhos: adicione o link da página com o guia de tamanhos correspondente.
Alerta de estoque
Mostra um aviso quando resta pouco estoque do produto, para gerar urgência de compra. Você pode ocultar, reordenar ou excluir este bloco dentro do Formulário de compra.
Mostrar alerta quando restarem menos de: defina a quantidade de unidades a partir da qual o aviso de estoque baixo aparece.
Mensagem de últimas unidades: o texto que aparece junto ao alerta (por exemplo, “Última unidade!”).
Cor do texto do alerta.
Botão de compra
É o botão principal para que seu cliente adicione o produto ao carrinho. Você pode ocultar este bloco ou reordená-lo dentro do Formulário de compra, mas não excluí-lo. Se o produto tiver assinaturas habilitadas, o seletor de compra única ou recorrente aparece junto a este botão, sem configurações adicionais.
Texto do botão de compra: por padrão, “Adicionar ao carrinho”.
Estilo: Principal, Secundário ou Terciário.
Cor de fundo e Cor do texto do botão.
Mostrar campo de quantidade: permite que seu cliente escolha quantas unidades comprar direto na página do produto.
Mostrar estoque disponível: mostra a quantidade exata de unidades disponíveis.
Calculadora de frete
Permite que seu cliente calcule o custo do frete informando o CEP direto na página do produto. Você pode ocultar este bloco ou reordená-lo dentro do Formulário de compra, mas não excluí-lo. Não tem opções de personalização.
Reúne a descrição do produto e os ícones informativos. Este grupo não pode ser excluído, reordenado nem ocultado, mas você pode reordenar e ocultar (ou excluir, dependendo do bloco) cada elemento dentro dele.
Design
Separação entre elementos: controla o espaçamento entre os blocos do grupo, em pixels (px). Por padrão, 32 px.
Espaçamento superior e inferior: ajusta o espaçamento vertical interno do grupo, em pixels (px). Por padrão, 0 px.
Ao clicar em “Detalhes do produto”, você pode configurar separadamente os seguintes blocos:
Descrição do produto
Mostra o texto descritivo do produto dentro da seção Informação do produto. Você pode ocultar este bloco ou reordená-lo dentro de Detalhes do produto, mas não excluí-lo.
Título: mostra um título acima da descrição. Ao ativar, você pode definir o texto (por padrão, “Descrição”) e o estilo (Título 1 a Título 6, ou Personalizado; por padrão, Título 6).
Mostrar redes sociais: mostra os ícones para compartilhar o produto nas redes sociais junto à descrição.
Ícones informativos
Mostra ícones com benefícios ou informações em destaque do produto (por exemplo, frete grátis ou troca sem custo). Você pode ocultar, reordenar ou excluir este bloco dentro de Detalhes do produto.
Tamanho do ícone, em pixels (px).
Estilo do título de cada ícone.
Tamanho da descrição de cada ícone.
Separação entre elementos: espaçamento entre os ícones, em pixels (px).
Cor dos textos e Cor do ícone.
Para detalhar especificações, cuidados, guia de tamanhos e a história do produto, com opção de mostrá-la em formato acordeão.
5.1. Clicar em “Descrição do produto” para configurar exibição, design, cores e CSS personalizado.
Exibição
Mostrar título: quando ativado, mostra o título da seção “Descrição” acima do texto descritivo do produto, ajudando seu cliente a identificar o conteúdo rapidamente.
Mostrar redes sociais: quando ativado, mostra os ícones de compartilhamento em redes sociais junto à descrição, para que seu cliente possa compartilhar o produto.
Design
Largura: define a largura da seção. Selecione “Página” para alinhá-la ao conteúdo principal ou “Completo” para que ela ocupe toda a tela.
Espaçamento superior e inferior: ajusta o espaçamento vertical interno da seção, em pixels (px).
Espaçamento esquerdo e direito: ajusta o espaçamento horizontal interno da seção, em pixels (px).
Cores
Cor de fundo: define a cor de fundo da seção de descrição. A opção “Sem preenchimento” mantém o fundo transparente, sem aplicar nenhuma cor.
Cor dos textos: define a cor dos textos da descrição. A opção “Padrão” mantém a cor definida nas configurações gerais do tema.
CSS personalizado
CSS personalizado: permite adicionar regras de CSS próprias para personalizar visualmente a seção de descrição além das opções padrão do editor.
Para estratégias de venda cruzada (“Você também pode gostar”), com o objetivo de aumentar o ticket médio do pedido.
5.1. Clicar em “Produtos complementares” para configurar design, cores e CSS personalizado.
Design
Largura: define a largura da seção. Selecione “Página” para alinhá-la ao conteúdo principal ou “Completo” para que ela ocupe toda a tela.
Separação entre elementos: controla o espaçamento entre os blocos ou elementos internos da seção, em pixels (px).
Espaçamento superior e inferior: ajusta o espaçamento vertical interno da seção, em pixels (px).
Espaçamento esquerdo e direito: ajusta o espaçamento horizontal interno da seção, em pixels (px).
Cores
Cor de fundo: define a cor de fundo da seção. A opção “Sem preenchimento” mantém o fundo transparente, sem aplicar nenhuma cor.
CSS personalizado
CSS personalizado: permite adicionar regras de CSS próprias para personalizar visualmente a seção além das opções padrão do editor.
5.2. Você também pode configurar os outros elementos, como definir e formatar o Título e a disposição dos Produtos. Para isso, clicar em cada elemento.
Para oferecer opções parecidas com o produto que seu cliente está vendo, útil quando você quer mostrar variedade dentro da mesma categoria.
5.1. Clicar em “Produtos alternativos” para configurar design, cores e CSS personalizado.
Design
Largura: define a largura da seção. Selecione “Página” para alinhá-la ao conteúdo principal ou “Completo” para que ela ocupe toda a tela.
Separação entre elementos: controla o espaçamento entre os blocos ou elementos internos da seção, em pixels (px).
Espaçamento superior e inferior: ajusta o espaçamento vertical interno da seção, em pixels (px).
Espaçamento esquerdo e direito: ajusta o espaçamento horizontal interno da seção, em pixels (px).
Cores
Cor de fundo: define a cor de fundo da seção. A opção “Sem preenchimento” mantém o fundo transparente, sem aplicar nenhuma cor.
CSS personalizado
CSS personalizado: permite adicionar regras de CSS próprias para personalizar visualmente a seção além das opções padrão do editor.
5.2. Você também pode configurar os outros elementos, como definir e formatar o Título e a disposição dos Produtos. Para isso, clicar em cada elemento.
6. Para adicionar novas seções à página de Produto, clicar em “+ Adicionar seção”, selecionar as seções que deseja incluir e clicar em “Adicionar” para incluí-las na sua loja.
7. Clicar em “Salvar” para publicar as alterações.
Observação
Na página de Produto, você pode selecionar um produto específico da sua loja para ver como ficam as alterações. Para isso, clicar no botão “Visualizar” no menu superior e selecionar o produto.
Pronto!
Agora você já sabe como adicionar e configurar seções na página de Produto da sua loja usando o editor do layout Ipanema. Você também pode personalizar as outras páginas da sua loja, Início, Categoria, Busca e Erro 404, seguindo a mesma lógica de seções e blocos.
