# Banner de loja Shopify: tamanhos, imagens de produto e promoções

[Canonical HTML page](https://gradiently.design/pt-br/guide/shopify-store-design)

Uma loja transmite confiança quando o banner, a grade de produtos, os gráficos de promoção e os e-mails parecem vir do mesmo lugar. Veja como chegar lá com os tamanhos que a Shopify realmente usa.

## The short version

- Um banner de loja Shopify, a imagem hero no topo da página inicial, funciona bem em 1920×1080 pixels.
- As imagens de produto da Shopify ficam melhores enviadas como quadrados de 2048×2048 pixels, para a grade ficar uniforme e o zoom continuar nítido.
- A maioria dos temas da Shopify corta o hero de modos diferentes no celular, então títulos e botões devem ficar numa coluna central de cerca de 1080 pixels de largura.
- As fotos de produto parecem de uma só loja quando compartilham fundo, direção de luz e a mesma quantidade de espaço em volta do produto.
- Banners de promoção, e-mails e posts sociais devem reaproveitar o fundo e a tipografia da loja, para o cliente reconhecer a loja antes de ler uma palavra.

Um bom **banner de loja Shopify** tem 1920×1080 pixels, traz um título curto e um botão, e mantém os dois no meio do quadro, porque a maioria dos temas corta as laterais no celular. Combine-o com imagens de produto enviadas como quadrados de 2048×2048 sobre o mesmo fundo, e a loja começa a parecer uma marca, não um catálogo. O resto desta página trata dos tamanhos, dos layouts que sobrevivem a qualquer tela e de como fazer banners de promoção que ainda se parecem com você.

## Tamanhos de banner e de imagem na Shopify

A Shopify não impõe um tamanho único de banner: cada tema decide a altura do hero e como ele é cortado. Trabalhar a partir de um original 16:9 é o hábito mais seguro, porque preenche a tela de um notebook e deixa altura suficiente para cortar no celular.

| Onde aparece | Tamanho para criar | Proporção |
| --- | --- | --- |
| Banner hero da página inicial | 1920×1080 px | 16:9 |
| Imagem de produto | 2048×2048 px | 1:1 |
| Banner de post do blog | 1200×600 px | 2:1 |
| Cabeçalho de e-mail | 1200×600 px | 2:1 |
| Prévia do link quando a loja é compartilhada | 1200×630 px | 1,91:1 |
| Post no feed do Instagram | 1080×1350 px | 4:5 |
| Story do Instagram | 1080×1920 px | 9:16 |

O conjunto básico para uma loja pequena. Crie cada tamanho de propósito, em vez de esticar uma imagem para todos.

- Hero 16:9: 1920 × 1080
- Produto 1:1: 2048 × 2048
- Banner de blog 2:1: 1200 × 600
- Story 9:16: 1080 × 1920

As quatro formas em que uma loja vive, desenhadas em escala. O hero e o story são opostos, por isso um único arquivo nunca serve para os dois.

Imagens de produto quadradas importam mais do que parecem. Quando todas as fotos de uma coleção têm a mesma forma, a grade se alinha e o olhar compara os produtos em vez de reparar em bordas irregulares. 2048 pixels também dão ao zoom da página de produto detalhe suficiente para valer o toque. O tamanho da prévia de link está em [tamanho da imagem Open Graph](https://gradiently.design/pt-br/guide/open-graph-image-size).

## Como criar um banner hero que sobrevive ao celular

No notebook, o hero é largo e baixo. No celular, a mesma imagem costuma ser cortada para um quase quadrado, ou o tema empilha o texto embaixo dela. De qualquer modo, as bordas somem, e tudo o que for importante nas bordas some junto.

1. **Comece em 1920×1080** Crie na largura total e depois marque uma coluna central com cerca de 1080 pixels. É essa coluna que o celular tem mais chance de manter.
2. **Escreva uma linha, não três** “A coleção de outono chegou.” vence um título, um subtítulo e um código de desconto disputando espaço. O detalhe fica na página da coleção.
3. **Use um botão com um verbo** Ver a coleção, Comprar velas, Ver as novidades. A maioria dos temas adiciona o botão por você, então deixe uma área tranquila onde ele ficará.
4. **Deixe o fundo carregar a marca** Uma foto de produto com um ambiente movimentado atrás disputa com o texto. Um campo de cor ou material constante atrás de um produto recortado se lê em qualquer corte.
5. **Confira no seu próprio celular** As prévias do tema ajudam, mas abra a loja no ar num celular de verdade antes de dar por terminado.

Um banner hero largo da Shopify com o texto A coleção de outono chegou, centralizado sobre um fundo de gradiente suave

Um hero com o texto na coluna central, para o corte do celular manter a mensagem inteira.

## Imagens de produto que parecem de uma só loja

Os clientes julgam uma loja pela grade muito antes de ler uma descrição. Se um produto está num fundo infinito branco, o seguinte na bancada da cozinha e o terceiro num lençol, a loja parece improvisada mesmo com produtos excelentes. Escolha um fundo e uma forma de iluminar, e repita.

### Parece improvisado

- Um fundo diferente para cada produto
- Luz da esquerda numa foto, de cima na seguinte
- Produtos que enchem o quadro em algumas fotos e minúsculos em outras
- Formatos misturados: alguns na vertical, outros quadrados
- Texto e selos embutidos na foto

### Parece uma marca

- Uma cor de fundo ou gradiente para toda a linha
- Luz do mesmo lado todas as vezes
- O produto ocupando de 70 a 80 por cento do quadro
- Toda imagem num quadrado de 2048×2048
- Selos adicionados pelo tema, para as fotos ficarem limpas

Um gradiente suave atrás de um produto recortado funciona bem porque dá profundidade sem um cenário real. Mantenha o contraste baixo para o produto continuar sendo a coisa mais clara do quadro. Há mais montagens em [fundos para fotos de produto](https://gradiently.design/pt-br/guide/product-photo-backgrounds).

Pedra quente de estúdio: `radial-gradient(circle at 50% 38%, #f7f3ee 0%, #ece4da 45%, #d9cdbf 100%)`

Um off-white quente que desce até a cor de pedra nas bordas, como uma luz pousada numa mesa. Valoriza cerâmicas, velas, skincare e têxteis.

## Banners de promoção na Shopify que ainda se parecem com você

As promoções são onde a maioria das lojas perde o visual. O reflexo comum é vermelho, uma explosão e a palavra PROMOÇÃO em maiúsculas, igual a todas as outras lojas no mesmo fim de semana. Mantenha seu fundo e sua tipografia, e mude só as palavras e, talvez, a intensidade da cor.

Um banner largo de promoção para uma loja Shopify com o texto Promoção de inverno 30% off, termina domingo

O hero da promoção mantém o fundo e a tipografia da própria loja.

Uma versão vertical, para Story do Instagram, do mesmo banner de promoção de inverno, com fundo e texto iguais

A mesma mensagem como story de 1080×1920, para a promoção ser lida como uma só campanha.

- Diga a oferta em menos de seis palavras: “Promoção de inverno. 30% off.”
- Ponha a data final no eyebrow, para a urgência ser honesta.
- Use as mesmas palavras no hero, no cabeçalho do e-mail e no story, e mantenha o texto do story dentro da [zona segura](https://gradiently.design/pt-br/guide/social-media-safe-zones) central.
- Tire o banner do ar quando a promoção acabar. Um hero de promoção vencido diz aos visitantes que ninguém está cuidando da loja.

Para fins de semana movimentados, os [posts de redes sociais para a Black Friday](https://gradiently.design/pt-br/guide/black-friday-post-ideas) e o [design de post de promoção](https://gradiently.design/pt-br/guide/sale-post-design) têm layouts e textos para aproveitar.

## Um só visual na loja, no e-mail e nas redes

O hero, a grade de produtos, o cabeçalho do e-mail e o post do Instagram são vistos pelo mesmo cliente com poucos dias de diferença. Quando compartilham fundo, fonte de título e uma paleta pequena, cada um lembra o cliente do anterior. É isso que a [consistência de marca](https://gradiently.design/pt-br/guide/brand-consistency) significa, na prática, para uma loja.

- Branco de prateleira: #f7f3ee
- Pedra: #d9cdbf
- Nogueira: #8a6f5a
- Tinta: #2f2a26
- Destaque terracota: #c8553d

Uma paleta tranquila de loja: dois fundos, um tom médio, uma tinta para o texto e um destaque reservado a botões e palavras de promoção.

É aqui que o Gradiently ajuda uma loja pequena. Crie o hero uma vez num Mark, um fundo de gradiente vivo que só você pode exportar depois de reservá-lo, e o Pro o redimensiona para o story, o cabeçalho do e-mail e a prévia do link num só passo. A criação em lote, também no Pro, preenche um template de cartão de produto a partir de uma planilha de nomes e preços, e os gráficos de uma nova coleção saem combinando. [Um visual, todos os tamanhos](https://gradiently.design/pt-br/guide/one-look-every-size) mostra o fluxo.

> **Escreva o texto alternativo ao enviar** A Shopify permite adicionar texto alternativo a cada imagem de produto e banner. Descreva o que há na imagem em palavras simples. Isso ajuda quem usa leitor de tela e dá aos buscadores algo para entender.

## FAQ

### Qual deve ser o tamanho de um banner de loja Shopify?

Crie o hero da página inicial em 1920×1080 pixels e mantenha o título e o botão numa coluna central de cerca de 1080 pixels, porque a maioria dos temas corta as laterais no celular.

### Qual é o melhor tamanho de imagem de produto na Shopify?

Um quadrado de 2048×2048 pixels. Ele mantém a grade da coleção uniforme e dá ao zoom do produto detalhe suficiente.

### Por que meu banner da Shopify aparece cortado no celular?

Os temas encaixam um banner largo numa tela de celular mais estreita cortando as laterais ou mudando a altura. Mantenha as palavras e os produtos importantes no meio da imagem.

### Devo pôr texto na imagem do banner da Shopify?

Um texto curto não tem problema se ficar no centro, mas muitos temas permitem adicionar o título e o botão como texto ao vivo sobre a imagem, que fica nítido e é mais fácil de mudar.

### Como deixo minhas fotos de produto consistentes?

Use um só fundo, luz do mesmo lado, imagens quadradas de 2048×2048 e o produto ocupando uma parte parecida de cada quadro.