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

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.

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.

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

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.

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.

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.

• 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 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 e o design de post de promoção 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 significa, na prática, para uma loja.

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