# Banner de loja Shopify: tamanhos, imagens de produto e saldos

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

Uma loja inspira confiança quando o banner, a grelha de produtos, os gráficos de saldos e os emails parecem vir do mesmo sítio. Eis como lá chegar 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 a 1920×1080 píxeis.
- As imagens de produto da Shopify carregam-se melhor como quadrados de 2048×2048 píxeis, para a grelha ficar uniforme e o zoom nítido.
- A maioria dos temas Shopify corta o hero de forma diferente nos telemóveis, por isso títulos e botões pertencem a uma coluna central com cerca de 1080 píxeis de largura.
- As fotografias de produto parecem de uma só loja quando partilham um fundo, uma direção de luz e a mesma quantidade de espaço à volta do produto.
- Banners de saldos, emails e publicações sociais devem reutilizar 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 píxeis, leva um título curto e um botão, e mantém ambos no meio do enquadramento, porque a maioria dos temas corta os lados num telemóvel. Combina-o com imagens de produto carregadas como quadrados de 2048×2048 sobre o mesmo fundo, e a loja começa a parecer uma marca em vez de um catálogo. O resto desta página trata dos tamanhos, dos esquemas que sobrevivem a todos os ecrãs e de como fazer banners de saldos que ainda pareçam teus.

## Tamanhos de banners e imagens na Shopify

A Shopify não te impõe um tamanho único de banner: cada tema decide a altura do hero e como o corta. Trabalhar a partir de uma matriz 16:9 é o hábito mais seguro, porque preenche o ecrã de um portátil e deixa altura suficiente para cortar para um telemóvel.

| Onde aparece | Tamanho a desenhar | Proporção |
| --- | --- | --- |
| Banner hero da página inicial | 1920×1080 px | 16:9 |
| Imagem de produto | 2048×2048 px | 1:1 |
| Banner de artigo de blogue | 1200×600 px | 2:1 |
| Cabeçalho de email | 1200×600 px | 2:1 |
| Pré-visualização do link quando a loja é partilhada | 1200×630 px | 1,91:1 |
| Publicação no feed do Instagram | 1080×1350 px | 4:5 |
| Story do Instagram | 1080×1920 px | 9:16 |

O conjunto essencial para uma loja pequena. Desenha cada tamanho de propósito em vez de esticares uma só imagem para servir a todos.

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

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

As imagens de produto quadradas importam mais do que parece. Quando todas as fotografias de uma coleção têm a mesma forma, a grelha alinha e o olho compara produtos em vez de reparar em margens irregulares. Os 2048 píxeis também dão ao zoom da página de produto detalhe suficiente para valer a pena tocar. O tamanho da pré-visualização do link está explicado em [tamanho da imagem Open Graph](https://gradiently.design/pt-pt/guide/open-graph-image-size).

## Como desenhar um banner hero que sobrevive a um telemóvel

Num portátil, o hero é largo e baixo. Num telemóvel, a mesma imagem costuma ser cortada para quase um quadrado, ou o tema empilha as palavras por baixo. Seja como for, as margens desaparecem, e tudo o que for importante nas margens desaparece com elas.

1. **Começa em 1920×1080** Desenha a largura toda e marca depois uma coluna central com cerca de 1080 píxeis de largura. Essa coluna é o que um telemóvel mais provavelmente mantém.
2. **Escreve uma linha, não três** “A seleção de outono chegou.” vence um título, um subtítulo e um código de desconto a disputar espaço. O pormenor pertence à página da coleção.
3. **Usa um botão com um verbo** Ver a seleção, Ver velas, Ver as novidades. A maioria dos temas junta o botão por ti, por isso deixa uma zona calma onde ele vai ficar.
4. **Deixa o fundo levar a marca** Uma fotografia de produto com uma divisão carregada atrás compete com as palavras. Um campo de cor ou material consistente atrás de um produto recortado lê-se em qualquer corte.
5. **Confirma no teu telemóvel** As pré-visualizações do tema ajudam, mas abre a loja ao vivo num telemóvel verdadeiro antes de a dares por acabada.

Um banner hero largo de uma loja Shopify com o texto A seleção de outono chegou, com as palavras centradas sobre um fundo de gradiente suave

Um hero com as palavras na coluna central, para que o corte do telemóvel mantenha a mensagem inteira.

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

Os clientes julgam uma loja pela grelha muito antes de lerem uma descrição. Se um produto está num fundo branco contínuo, o seguinte numa bancada de cozinha e o terceiro num lençol, a loja parece improvisada mesmo quando os produtos são excelentes. Escolhe um fundo e uma forma de iluminar, e repete.

### Parece improvisada

- Um fundo diferente para cada produto
- Luz da esquerda numa fotografia, de cima na seguinte
- Produtos a encher o enquadramento em algumas imagens e minúsculos noutras
- Formas misturadas: umas verticais, outras quadradas
- Texto e selos metidos na própria fotografia

### Parece uma marca

- Uma só cor ou gradiente de fundo para toda a gama
- Luz do mesmo lado sempre
- O produto a ocupar cerca de 70 a 80 por cento do enquadramento
- Todas as imagens quadradas de 2048×2048
- Selos acrescentados pelo tema, para as fotografias ficarem limpas

Um gradiente suave atrás de um produto recortado funciona bem porque dá profundidade sem um cenário real. Mantém-no com pouco contraste para o produto continuar a ser a coisa mais brilhante do enquadramento. Há mais montagens em [fundos para fotografias de produto](https://gradiently.design/pt-pt/guide/product-photo-backgrounds).

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

Um quase branco quente que desce para pedra nas margens, como uma luz pousada numa mesa. Favorece cerâmica, velas, cuidados de pele e têxteis.

## Banners de saldos Shopify que ainda parecem teus

Os saldos são onde a maioria das lojas perde o seu visual. O reflexo habitual é vermelho, uma explosão e a palavra SALDOS em maiúsculas, o que se parece com todas as outras lojas no mesmo fim de semana. Mantém o teu fundo e a tua tipografia, e muda só as palavras e, talvez, a intensidade da cor.

Um banner largo de saldos para uma loja Shopify com o texto Saldos de inverno 30%, a terminar no domingo

O hero de saldos mantém o fundo e a tipografia da própria loja.

Uma versão vertical em story do Instagram do mesmo banner de saldos de inverno, com fundo e palavras iguais

A mesma mensagem como story de 1080×1920, para os saldos se lerem como uma só campanha.

- Diz a oferta em menos de seis palavras: “Saldos de inverno. 30%.”
- Põe a data de fim no sobretítulo para a urgência ser honesta.
- Usa as mesmas palavras no hero, no cabeçalho do email e no story, e mantém as do story dentro da [zona segura](https://gradiently.design/pt-pt/guide/social-media-safe-zones) central.
- Retira o banner quando os saldos acabarem. Um hero de saldos desatualizado diz aos visitantes que ninguém está a cuidar da loja.

Para fins de semana movimentados, [publicações de Black Friday para redes sociais](https://gradiently.design/pt-pt/guide/black-friday-post-ideas) e [design de publicações de saldos](https://gradiently.design/pt-pt/guide/sale-post-design) têm esquemas e textos para aproveitares.

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

O hero, a grelha de produtos, o cabeçalho do email e a publicação do Instagram são vistos pelo mesmo cliente com poucos dias de intervalo. Quando partilham um fundo, um tipo de letra de título e uma pequena paleta, cada um lembra o cliente do anterior. É isso que [consistência de marca](https://gradiently.design/pt-pt/guide/brand-consistency) quer dizer, na prática, para uma loja.

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

Uma paleta de loja calma: dois fundos, um tom médio, uma tinta para o texto e um destaque guardado para botões e palavras de saldos.

É aqui que o Gradiently ajuda uma loja pequena. Desenha o hero uma vez num Mark, um fundo de gradiente vivo com que só tu podes exportar depois de o reservares, e o Pro redimensiona-o para o story, o cabeçalho do email e a pré-visualização do link num só passo. A criação em massa, também no Pro, preenche um modelo de cartão de produto a partir de uma folha de cálculo de nomes e preços, e assim os gráficos de uma nova coleção saem a condizer. [Um visual, todos os tamanhos](https://gradiently.design/pt-pt/guide/one-look-every-size) mostra o fluxo de trabalho.

> **Escreve o texto alternativo ao carregar** A Shopify deixa-te juntar texto alternativo a cada imagem de produto e banner. Descreve o que está na imagem em palavras simples. Ajuda quem usa leitores de ecrã e dá aos motores de pesquisa algo que perceber.

## FAQ

### Que tamanho deve ter um banner de loja Shopify?

Desenha o hero da página inicial a 1920×1080 píxeis e mantém o título e o botão numa coluna central com cerca de 1080 píxeis de largura, porque a maioria dos temas corta os lados nos telemóveis.

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

Um quadrado de 2048×2048 píxeis. Mantém a grelha da coleção uniforme e dá ao zoom do produto detalhe suficiente.

### Porque é que o meu banner Shopify aparece cortado no telemóvel?

Os temas ajustam um banner largo a um ecrã de telemóvel mais estreito cortando os lados ou mudando a altura. Mantém as palavras e os produtos importantes no meio da imagem.

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

Texto curto serve se ficar ao centro, mas muitos temas deixam juntar o título e o botão como texto real sobre a imagem, que se mantém nítido e é mais fácil de alterar.

### Como faço as minhas fotografias de produto parecerem consistentes?

Usa um só fundo, luz do mesmo lado, imagens quadradas de 2048×2048 e o produto a ocupar uma parte semelhante de cada enquadramento.