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

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.

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.

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. 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. 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. 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. 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. 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.

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.

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.

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.

• 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 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 e design de publicações de saldos 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 quer dizer, na prática, para uma loja.

É 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 mostra o fluxo de trabalho.