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

Como personalizar o layout Simple?

Saiba como personalizar as cores, a página inicial e outros elementos, além de adicionar banners no Layout Simple.

Última atualização: 04/12/2025

O Simple é um dos mais versáteis e personalizáveis Layouts Na Nuvemshop. Através desse tema, você pode adicionar banners, categorias, exibir vídeo, personalizar menu de navegação, entre outras ferramentas para deixar sua loja com um visual exclusivo e direcionado à identidade de sua marca.

modelo layout simple nuvemshop
 

A seguir, te mostramos como personalizar seu Layout Simple usando todas as funcionalidades disponíveis.
 

Logo (logotipo), cores e tipo de letra

O primeiro passo na personalização do Layout é definir o logo (logotipo), as cores e as letras. 

cores logo layout simple nuvemshop

Para configurar estes elementos, consulte os seguintes tutoriais:

Para inserir o logotipo na sua loja virtual, siga os passos do tutorial abaixo:
Como inserir um logo no meu layout?

Para inserir o logotipo na aba do navegador, siga os passos do tutorial abaixo:
Como inserir o logo na aba do navegador?

Para alterar a fonte da sua loja virtual, siga os passos do tutorial abaixo:
Como trocar a fonte do meu layout?

Para alterar as cores da sua loja virtual, siga os passos do tutorial abaixo:
Como alterar as cores do meu layout?

E para saber como definir as cores de destaque (etiquetas de promoções) da sua loja, acesse este outro tutorial:

Como definir a cor de destaque para as promoções da minha Nuvemshop?

Cabeçalho

Personalize o cabeçalho do seu Layout Simple, tornando-o mais atrativo aos seus clientes. Você pode adicionar uma imagem de fundo, barra de anúncios, definir como o logo tipo deverá se comportar durante a navegação, etc. 

cabeçalho layout simple nuvemshop
Para aprender a personalizá-lo, siga os passos do tutorial abaixo:
Como configurar o cabeçalho do layout?

Página inicial

A página inicial da sua loja será o primeiro contato dos clientes com os seus produtos. O layout Simple possui diversas formas de personalizar a página inicial, tornando a busca e a visualização de produtos mais prática.

Listamos todos os tutoriais que ensinam como personalizar a Página inicial:

Para destacar os produtos na página inicial, siga os passos do tutorial abaixo:
Como destacar produtos na página inicial?

Para adicionar e editar a mensagem de boas-vindas, siga os passos do tutorial abaixo:
Como adicionar ou alterar a mensagem institucional da página inicial?

Para habilitar e desabilitar as categorias principais, siga os passos do tutorial abaixo:
Como ocultar a seção "categorias principais" da página inicial?

Para adicionar o módulo de imagem e texto, siga os passos do tutorial abaixo:
Como adicionar módulo de imagem e texto na página inicial?

Para adicionar um vídeo do Youtube ou Vimeo na página inicial, siga os passos do tutorial abaixo:  
Como adicionar um vídeo na página inicial?

Para habilitar o pop-up Newsletter, siga os passos do tutorial abaixo:
Como habilitar o pop-up de newsletter em meu layout?

Lista de produtos

No menu Lista de produtos, você pode personalizar a forma que seus produtos serão visualizados na sua loja.

Por exemplo, é possível configurar a quantidade de produtos que aparece por linha, mostrar filtros em sua lista, variações de cores, etc.

Veja os detalhes clicando nas barras azuis a seguir:

Nessa seção, você pode enviar uma imagem para ser apresentada nas páginas das categorias da sua loja virtual. Para isso, basta clicar em "Carregar imagem" e selecionar o arquivo na pasta do seu computador.


 

Dica

Ao fazer isso, a mesma imagem será visualizada ao abrir as páginas de categorias da sua loja. Para enviar imagens diferentes para cada categoria, acessar 👉 este tutorial.

Você pode escolher quantos produtos quer deixar visível na vitrine da sua loja virtual. É um recurso bastante útil para promover as principais ofertas.

Especificações:

  • Para computador: você tem opções de 2 produtos lado a lado, 3 produtos lado a lado ou até 4 produtos lado a lado;
  • Para celular: você tem opções de um produto visível ou dois produtos lado a lado.

     
Dica

Este recurso está disponível nos layouts Silente e Simple.

Essa opção adiciona um botão "Carregar mais produtos" ao chegar ao final da página.


Assim, os clientes podem visualizar os demais itens da lista de produtos:

Aqui você tem a possibilidade de exibir ou ocultar os filtros na lista de produtos da sua loja virtual.


Ao ativar, seus clientes conseguirão filtrar os itens conforme suas necessidades:

Caso queira mostrar as variações de cores na lista de produtos, basta ativar essa opção.


Dessa forma, as variações disponíveis serão apresentadas junto da foto do produto:

Ao ativar essa funcionalidade, a segunda foto do produto será exibida ao passar o mouse sobre o item.


Veja um exemplo no GIF abaixo:

Observação

Precisa de ajuda para reordenar as fotos dos produtos? Recomendamos acessar o tutorial 👉 Como inserir fotos nos meus produtos?

Esse recurso permite que o cliente adicione um produto rapidamente ao carrinho de compras a partir da lista de produtos


Assim, o cliente não precisa abrir a página do item para clicar em "Adicionar ao carrinho":

Caso não queira exibir a quantidade de parcelas disponíveis para pagamento na lista de produtos, você pode ocultar essa informação.


Assim, seus clientes verão apenas o valor real do produto, veja a diferença abaixo:

 

Observação

Para saber como configurar as categorias e subcategorias de produtos, consulte o nosso índice Tudo sobre Categorias.

Detalhe do produto

Nesta seção, você pode escolher se deseja ou não habilitar o cálculo de frete diretamente na página de seus produtos, adicionar tabela de medidas, etc. Dá uma olhada no exemplo abaixo:

pagina produto layout simple nuvemshop
Abaixo listamos todos os tutoriais que ensinam como personalizar a página do produto:

Para habilitar o cálculo do frete na página do produto, siga os passos do tutorial abaixo:
Como habilitar o cálculo de frete na página do produto?

Observação

Para saber como ativar meios de envio em sua loja, consulte o tutorial 👉 Como escolher a ferramenta de frete perfeita para a minha loja?.

Para adicionar uma guia de medida dos produtos, siga os passos do tutorial abaixo:
Como adicionar uma guia de medidas na minha loja?

Para configurar a mensagem para informar seus clientes sobre a última unidade em estoque, siga os passos do tutorial abaixo:
Como mostrar quando restar apenas um produto no estoque?

Para incluir informações adicionais sobre seu negócio ou como funciona a operação da loja, siga os passos do tutorial abaixo:  
Como adicionar informações sobre a compra na página de meus produtos?

Carrinho de compras

Personalize como o carrinho de compra deve mostrar as informações para seus clientes ao acessarem seu carrinho de compras.

carrinho compra layout simple nuvemshop
Para configurar o carrinho de compra do seu Layout Simple, siga os passos do tutorial abaixo:
Como configurar e personalizar meu carrinho de compras?

Rodapé da página

Nesta seção, você pode adicionar relevantes do seu negócio, incluir seus meios de pagamento e formas de envio ou adicionar selos personalizados. Abaixo, separamos os tutoriais que irão te ajudar:

rodapé layout simple nuvemshop


Abaixo listamos todos os tutoriais que ensinam como personalizar o rodapé do layout:

Para adicionar um menu exclusivo para o rodapé, siga os passos do tutorial abaixo:
Como adicionar um menu no rodapé?

Para mostrar as bandeiras de frete e cartão no rodapé da loja virtual, siga os passos do tutorial abaixo:
Como mostrar os ícones do frete e cartão no rodapé da minha loja?

Para inserir selos personalizados, siga os passos do tutorial abaixo:
Como inserir selos personalizados no layout?

Personalização Avançada

Para realizar personalizações específicas no layout, especialmente ajustes que não estão disponíveis nativamente na plataforma, você pode aplicar através de CSS ou FTP.

Para aprender como fazer essas personalizações avançadas, consultar os tutoriais abaixo:

Como obter o código CSS para usar na minha Nuvemshop? 

Como inserir um código CSS na minha Nuvemshop? 

Como editar o código do layout da minha loja?  

Observação

Recomendamos que as personalizações avançadas sejam feitas por alguém com experiência em código. Caso precise de apoio para gerar algum código, indicamos entrar em contato com nossos Especialistas Nuvemshop.

Pronto!

Seguindo esses passos, você pode aproveitar todas as funcionalidades disponíveis no layout Simple, oferecendo uma experiência incrível para seus clientes e visitantes!