Central de Atendimento Nuvem Configure sua loja Layout Personalização básica Banners e logo

Quais os tamanhos recomendados para os banners?

Neste tutorial, trouxemos as recomendações de tamanhos dos banners de cada layout e suas seções, para personalizar a sua Nuvemshop.

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

Os layouts na Nuvemshop oferecem a possibilidade de adicionar banners de diversos tamanhos e em diversas páginas de sua loja. 

Por esse motivo, não existe um único tamanho recomendado de banner, ou seja, as dimensões variam de layout para layout, de acordo com a seção da loja onde a imagem é adicionada (categorias, rodapé, página de contato, página inicial, etc).

Primeiro, vamos te mostrar como descobrir as dimensões recomendadas para os banners pelo painel de edição do layout. Depois, traremos as medidas recomendadas para cada seção dos layouts da Nuvemshop.

Delete

Warning

Algumas seções não estão disponíveis em todos os layouts, como os banners de marca, banner informativo, imagem de fundo e outras. Se o tema que você está personalizando não aparecer em alguma das opções, significa que o mesmo não possui o recurso.

Como consultar as dimensões recomendadas no editor de layout?

Clique para ver os passos

1. No painel administrador Nuvemshop, seguir pelo caminho "Minha Nuvemshop > Layout" e depois clicar em "Personalizar seu layout atual".

Botão para personalizar o layout atual na Nuvemshop
2. Dentro desse menu, você encontrará diversas opções de banners. Basta selecionar o tipo de banner que você deseja de adicionar na sua loja e clicar em "Carregar imagem".

Botão para selecionar e carregar imagem do banner
3. Na próxima etapa,  logo abaixo da opção Selecionar Imagem, você verá as medidas recomendadas para o banner escolhido, como mostramos no exemplo abaixo, em que a imagem deverá ter 980px de largura por 90px de altura.

Quadro de recomendações de tamanho do banner no editor de layout Nuvemshop, com uma seta vermelha indicando o mesmo

Delete

Success

Esses valores variam conforme o Layout e o tipo de banner escolhidos.

4. Após confirmar as medidas corretas do banner, informar ao designer de sua loja para poder criar a arte e carregar o banner depois. 

Se você não possui um designer, recomendamos usar a ferramenta 🌐 Canva para criar um banner 100% gratuito. No tutorial 👉 Como criar banners gratuitos para usar em meu layout? ensinamos como utilizar essa ferramenta.

E caso queria saber como personalizar a página inicial da sua loja, consulte o tutorial 👉 Como personalizar a página inicial da minha loja?


Delete

Success

Se você usa o Idea, Bahia, Amazonas ou Cubo, recomendamos consultar 📝 Como configurar banners rotativos nos layouts Idea, Bahia, Amazonas e Cubo?.

Isso porque esses Layouts são otimizados para navegação em smartphones (celulares).

Delete

Recomendações de tamanho dos banners

Delete

Success

Para todos os layouts, a recomendação de tamanho para o logo é de 575px x 230px e para o favicon é de 130px x 130px.

Clique nos botões para visualizar os detalhes de cada seção. 👇

Alguns layouts oferecem a possibilidade de enviar imagens diferentes para desktop e mobile. Confira as recomendações de cada versão:

Desktop

Layout Medidas
 Amazonas 1580px x 450px
 Atlántico 1580px x 740px
 Bahia e Idea 1580px x 850px
 Cubo  1580px x 600px
 Focus  1130px x 500px
 Lifestyle, Silent e Trend 1920px x 900px
 Material 1400px x 520px
 Simple 1400px x 620px
Rio 1580px x 600px
Lima e Cali 1580px x 600px
Toluca e Uyuni 1580px x 700px
Delete

Mobile

❗ Esse recurso não está disponível nos temas: Cubo, Focus, Lifestyle, Material e Silent.

Layout Medidas
 Bahia e Idea 820px x 1460px
 Simple 500px x 550px
Rio e Atlántico 820px x 1200px
Amazonas, Simple, Lima, Uyuni, Trend, Toluca e Cali 820px x 1000px

O que fazer se a imagem aparecer cortada?

Se as imagens no banner rotativo são exibidas cortadas, recomendamos desmarcar a seguinte opção, dentro da seção de configuração dos banners rotativos no seu painel administrador:

  • "Usar uma altura máxima para imagens";
  • "Usar a mesma altura para todas as imagens";
  • Ou "Aumentar à largura da tela".

❗ O nome dessa opção pode variar conforme o layout que você estiver usando.


Aparece cortado no celular

Conforme mencionamos nas etapas de configuração, os banners do carrossel de imagens são exibidos em escala reduzida nos layouts Idea, Bahia, Cubo e Amazonas.

Portanto, se você identificar que seu banner não aparece completo ao visualizá-lo pelo celular e sua loja possui um dos layouts citados acima, recomendamos consultar o tutorial abaixo para criar um banner que fique bem em todos os dispositivos:

📝 Como preparar as imagens para os banners rotativos nos layouts Idea, Bahia, Amazonas e Cubo?

Delete
Delete

Banners de categoria

Você tem a opção de adicionar banners para 1, 2, 3 ou 4 categorias. Confira as recomendações de cada opção:


Categoria 1

Layout Medidas
 Amazonas 620px x 715px
 Atlántico, Simple e Trend 600px x 600px
 Bahia 1440px x 750px
 Cubo  620px x 620px
 Focus e Silent 700px x 700px
 Idea 1400 px x 700 px
 Material 770px x 620px
 Simple 1400px x 620px
Delete

Categoria 2

Layout Medidas
 Amazonas 620px x 715px
 Atlántico, Simple e Trend 600px x 600px
 Bahia 700px x 750px
 Cubo  620px x 620px
 Focus, Idea e Silent 700px x 700px
 Material 770px x 620px
Delete

Categoria 3

Layout Medidas
 Amazonas 620px x 715px
 Atlántico, Simple e Trend 600px x 600px
 Bahia 440px x 750px
 Cubo  620px x 620px
 Focus  700px x 700px
 Idea 700px x 340px
 Material 770px x 620px
Delete

Banners ilimitados

Layout Medidas
Lima, Toluca, Uyuni, Cali e Rio  930px x 465px
Delete


Delete

Warning

O layout Idea é o único que permite incluir até 4 banners de categorias, nas dimensões 340px x 340px. 

Delete

Banners das marcas

Layout Medidas
 Amazonas, Lima, Uyuni, Cali 300px x 200 px
Toluca 200px x 200px
 Atlántico 320px x 160px
 Idea 340px x 340px
Delete

Banners promocionais

Você pode incluir até 4 banners promocionais na sua Nuvemshop:

1 banner

Layout Medidas
 Amazonas 620px x 715px
 Bahia 1440px x 750px
 Cubo  620px x 235px
 Lifestyle 1550px x 200px
 Material 1200px x 700px
 Silent 1425px x 285px
 Simple 600px x 600px
 Trend 600px x 900px
Rio 930px x 465px
Delete

2 banners

Layout Medidas
 Amazonas 620px x 715px
 Bahia 700px x 750px
 Cubo  620px x 235px
 Lifestyle 775px x 200px
 Material 600px x 700px
 Simple 600px x 600px
 Trend 600px x 900px
Rio 930px x 465px
Delete

3 banners

Layout Medidas
 Amazonas 620px x 715px
 Bahia 440px x 750px
 Cubo  620px x 235px
 Lifestyle 520px x 200px
 Simple 600px x 600px
 Trend 600px x 900px
Rio 930px x 465px
Delete

4 banners

Layout Medidas
Rio
930px x 465px
Delete
Delete

Módulos de imagem e texto

Layout Medidas
 Bahia e Simple 600px x 400px
 Cubo  1270px x 300px
 Focus  1400px x 500px
 Lifestyle 770px x 335px
 Trend 1170px x 420px
Delete
Layout Medidas
 Lifestyle 570px x 330px
 Material 1170px x 100px
 Silent 435px x 390px
Delete

Imagem de fundo

Layout Medidas
 Focus  16px x 16px
Delete
Layout Medidas
 Simple 980px x 90px
Delete
Layout Medidas
 Atlántico, Rio 600px x 600px
Delete

Banner de novidades

Layout Medidas
Lima e Cali  930px x 465px
Delete

Newsletter

Layout Medidas
 Cubo, Focus, Lifestyle, Material, Silent, Simple e  Trend 280px x 320px
Delete

Carrossel de produtos

Layout Medidas
 Idea 600px x 600px
Delete

Mensagem institucional

Layout Medidas
 Lifestyle 1400px x 320px
Delete

Categorias principais

Layout Medidas
Rio  120px x 120px
Delete

Popup promocional

Layout Medidas
Rio, Lima e Cali 345px x 190px
Delete


O artigo ajudou você?