Início›Configure sua loja›Layout›Escolher Layout›Layout Ipanema

Como adicionar seções personalizadas na minha loja com o layout Ipanema na Nuvemshop?

Aprenda a criar seções personalizadas no layout Ipanema combinando botões, imagens, títulos, descrições, separadores e blocos de código HTML, CSS e JavaScript próprio.

Última atualização: 17/07/2026

Com as seções personalizadas, você pode montar suas próprias seções dentro do editor do layout Ipanema combinando os blocos que quiser: botão, imagem, título, descrição, separador e grupo. Você também pode adicionar um bloco de código próprio para inserir HTML, CSS e JavaScript diretamente na sua loja, sem abrir o FTP.

Essa funcionalidade te dá liberdade para criar layouts sob medida, sem depender das seções predefinidas. Se você ainda não sabe como adicionar seções na sua loja, recomendamos acessar primeiro o tutorial: Como trocar, adicionar e gerenciar páginas e seções do layout Ipanema na Nuvemshop?

Neste tutorial, te explicamos como adicionar uma seção personalizada, o que é possível configurar nela, como adicionar blocos e quais opções de personalização cada um tem.

Como adicionar uma seção personalizada?

Para adicionar uma seção personalizada à sua loja, seguir os passos abaixo:

1. Acessar o painel administrador Nuvemshop.

2. Seguir o caminho "Loja online > Layout" e clicar em “Editar layout” para abrir o editor do layout Ipanema.

3. Na página onde você quer incluir a nova seção, clicar em "Adicionar seção".

4. Escolher a seção "Personalizada" na lista de seções disponíveis e clicar no botão "Adicionar".

Pronto!

Agora a seção personalizada está criada, pronta para você configurar e adicionar os blocos que quiser.

O que é possível configurar na seção personalizada?

Clicando na seção (e não em um bloco específico), você pode ajustar os seguintes campos no painel lateral.

Em "Disposição", escolher a "Direção" em que os blocos se organizam (vertical ou horizontal). Ativar "Direção diferente para celulares" se você quiser que eles se organizem de outra forma nesses dispositivos e escolher essa direção em "Direção para celulares". 

Com "Alinhamento", definir a posição dos blocos dentro da seção, tanto no eixo horizontal (esquerda, centro ou direita) quanto no vertical (acima, centro ou abaixo).

Em "Design", escolher a "Largura" da seção: "Página" para respeitar a largura padrão do conteúdo ou "Completa" para ocupar toda a largura da tela. Com "Espaçamento entre elementos", definir o espaço entre os blocos e, com "Espaçamento superior e inferior" e "Espaçamento esquerdo e direito", ajustar a margem interna da seção (este último só fica habilitado se você escolheu "Completa" em "Largura").

Em "Cores", escolher a "Cor de fundo" e a "Cor do texto" da seção no seletor de cores. 

Além disso, no mesmo painel, você pode expandir "CSS personalizado" para adicionar estilos que se aplicam somente a esta seção, sem afetar o resto da loja.

Como adicionar blocos à seção personalizada?

Com a seção personalizada já criada, você pode adicionar os blocos que quiser. Para saber como, seguir os passos abaixo:

1. Dentro da seção personalizada, clicar em "+ Adicionar bloco".

2. Escolher o bloco que você quer incluir: "Botão", "Imagem", "Título", "Descrição", "Separador", "Grupo" ou "Código".

3. Repetir o passo anterior para cada bloco que você quiser adicionar à seção.

4. Clicar em cada bloco para personalizar o conteúdo e o estilo dele no painel lateral.

Pronto! 

Agora sua seção personalizada está montada com os blocos que você escolheu.

O que é possível configurar em cada bloco?

Cada bloco tem seu próprio painel de configuração. Clique no bloco correspondente abaixo para ver os detalhes:

Em "Texto do botão", escrever o texto que o botão vai mostrar e, em "Link do botão", adicionar a URL de destino.

 

Em "Design", escolher a "Largura": "Ajustar" para o botão acompanhar o tamanho do texto ou "Preencher" para ocupar toda a largura disponível.

 

Em "Estilo", escolher o "Estilo" visual ("Principal", "Secundário" ou "Terciário"), o "Tamanho" ("Pequeno", "Médio" ou "Grande") e a "Cor de fundo" e a "Cor do texto" do botão.

Em "Texto", escrever o conteúdo do título com o editor de texto avançado (negrito, itálico, sublinhado, cor, links, listas).

 

Em "Design", escolher a "Largura" do bloco ("Ajustar" ou "Preencher").

 

Em "Ajustes de texto", escolher o nível de "Estilo" no menu suspenso. Você pode selecionar até 6 níveis de estilo. Também pode usar a opção “Personalizado” para criar um estilo próprio, definindo a fonte e o tamanho em pixels. Ativar "Tamanho diferente para celulares" se você quiser definir um tamanho diferente para essa visualização.

Em "Imagem", carregar ou selecionar a imagem que você quer mostrar. Ativar "Usar outra imagem para celulares" se quiser mostrar uma imagem diferente nesses dispositivos e adicionar um "Link" se quiser que a imagem funcione como acesso a outra página.

 

Em "Design", escolher a "Largura" do bloco ("Ajustar" ou "Preencher").

Em "Texto", escrever o conteúdo com o editor de texto avançado.

 

Em "Design", escolher a "Largura" do bloco ("Ajustar" ou "Preencher").

 

Em "Ajustes de texto", escolher o "Tamanho" ("Pequeno", "Médio" ou "Grande").

Em "Design", ajustar o "Espaçamento" ao redor do separador com o controle deslizante.

 

Ativar "Linha divisória" se você quiser mostrar uma linha visível e escolher a "Cor da linha" (este campo só aparece se você ativou a linha divisória).

Em "Disposição", escolher a "Direção" dos blocos que você agrupa (vertical ou horizontal), ativar "Direção diferente para celulares" se quiser uma direção diferente nessa visualização e definir o "Alinhamento" dos blocos dentro do grupo, tanto no eixo horizontal quanto no vertical.

 

Em "Design", escolher a "Largura" do grupo ("Ajustar" ou "Preencher") e ajustar o "Espaçamento entre elementos", o "Espaçamento superior e inferior" e o "esquerdo e direito".

 

Em "Cores", escolher a "Cor de fundo" e a "Cor do texto" do grupo.

Se você quiser inserir HTML, CSS ou JavaScript próprio (e não somente CSS), pode fazer isso com o bloco "Código". Cada seção admite somente um bloco de código: se você precisar de outro, criar uma nova seção personalizada.

 

Para adicioná-lo, seguir os passos abaixo:

 

1. Depois de incluir o bloco na seção Personalizada, escrever ou colar o código no campo de texto. Você pode incluir HTML, CSS dentro de tags <style> e JavaScript dentro de tags <script>.

 

2. Em "Design", escolher a largura do bloco: "Ajustar" para acompanhar o conteúdo ou "Preencher" para ocupar toda a largura do contêiner.

 

3. Salvar e publicar as alterações.

Importante

O editor avisa se houver erros de sintaxe, mas somente o CSS inválido bloqueia o salvamento. O código é publicado na sua loja exatamente como você escreveu, sem que a Nuvemshop o modifique: você é responsável pelo conteúdo dele. O campo permite até 50.000 caracteres.

 

Pronto! 

 

Agora seu código próprio está funcionando dentro da seção personalizada.

Se você quiser saber mais sobre o layout Ipanema e suas funcionalidades, consultar:

Como personalizar meu layout Ipanema?