Banner para tienda Shopify: tamaños, imágenes de producto y rebajas

Un buen banner para tienda Shopify mide 1920×1080 píxeles, lleva un titular corto y un botón, y mantiene ambos en el centro del formato, porque la mayoría de los temas recortan los laterales en el móvil. Combínalo con imágenes de producto subidas como cuadrados de 2048×2048 sobre el mismo fondo, y la tienda empezará a parecer una marca en lugar de un catálogo. El resto de esta página trata los tamaños, los diseños que aguantan en cualquier pantalla y cómo hacer banners de rebajas que sigan pareciéndose a ti.

Tamaños de banners e imágenes de Shopify

Shopify no te impone un tamaño de banner: cada tema decide qué altura tiene la imagen principal y cómo se recorta. Trabajar con un original 16:9 es la costumbre más segura, porque llena la pantalla de un portátil y deja altura suficiente para recortar para el móvil.

Las imágenes de producto cuadradas importan más de lo que parece. Cuando todas las fotos de una colección tienen la misma forma, la cuadrícula se alinea y el ojo compara productos en lugar de fijarse en bordes irregulares. Los 2048 píxeles también dan al zoom de la página de producto detalle suficiente para que merezca la pena tocarlo. El tamaño de la vista previa de enlace se explica en tamaño de imagen Open Graph.

Cómo diseñar un banner principal que aguante en el móvil

En un portátil, la imagen principal es ancha y baja. En un móvil, la misma imagen a menudo se recorta casi en cuadrado, o el tema coloca el texto debajo. En cualquier caso los bordes desaparecen, y con ellos todo lo importante que estuviera en los bordes.

1. 1

   Empieza en 1920×1080

   Diseña a todo el ancho y luego marca una columna central de unos 1080 píxeles. Esa columna es lo que más probablemente conservará un móvil.

2. 2

   Escribe una línea, no tres

   “Ya está aquí la colección de otoño.” gana a un titular, un subtítulo y un código de descuento peleándose por el espacio. El detalle va en la página de la colección.

3. 3

   Usa un solo botón con un verbo

   Compra la colección, Ver velas, Descubre las novedades. La mayoría de los temas añaden el botón por ti, así que deja una zona tranquila donde vaya a ir.

4. 4

   Deja que el fondo lleve la marca

   Una foto de producto con una habitación recargada detrás compite con el texto. Un campo de color o un material constante detrás de un producto recortado se lee con cualquier recorte.

5. 5

   Compruébalo en tu propio móvil

   Las vistas previas del tema ayudan, pero abre la tienda en vivo en un móvil de verdad antes de darla por terminada.

Imágenes de producto que parecen de una misma tienda

Los clientes juzgan una tienda por su cuadrícula mucho antes de leer una descripción. Si un producto está sobre un fondo blanco, el siguiente en la encimera de una cocina y el tercero sobre una sábana, la tienda parece improvisada aunque los productos sean excelentes. Elige un fondo y una forma de iluminar, y repítelos.

Un degradado suave detrás de un producto recortado funciona bien porque da profundidad sin necesidad de un decorado real. Mantenlo con poco contraste para que el producto siga siendo lo más luminoso del encuadre. Hay más montajes en fondos para fotos de producto.

Banners de rebajas en Shopify que siguen pareciéndose a ti

Las rebajas son el momento en que casi todas las tiendas pierden su look. El reflejo habitual es rojo, una explosión de estrella y la palabra REBAJAS en mayúsculas, que se parece a todas las demás tiendas ese mismo fin de semana. Conserva tu propio fondo y tu tipografía, y cambia solo las palabras y quizá la intensidad del color.

• Di la oferta en menos de seis palabras: “Rebajas de invierno. 30 % menos.”
• Pon la fecha de fin en la línea superior para que la urgencia sea honesta.
• Usa las mismas palabras en la imagen principal, la cabecera del email y la story, y mantén el texto de la story dentro de la zona segura central.
• Quita el banner cuando terminen las rebajas. Una imagen de rebajas caducada dice a los visitantes que nadie cuida la tienda.

Para los fines de semana fuertes, publicaciones de Black Friday para redes sociales y diseño de publicaciones de rebajas tienen diseños y textos que puedes tomar prestados.

Un solo look en la tienda, el email y las redes

La imagen principal, la cuadrícula de productos, la cabecera del email y la publicación de Instagram las ve el mismo cliente con pocos días de diferencia. Cuando comparten fondo, fuente de titulares y una paleta pequeña, cada una le recuerda a la anterior. Eso es lo que significa en la práctica la coherencia de marca para una tienda.

Aquí es donde Gradiently ayuda a una tienda pequeña. Diseña la imagen principal una vez sobre un Mark, un fondo degradado vivo con el que solo tú puedes exportar una vez lo reservas, y Pro la adapta a la story, la cabecera del email y la vista previa de enlace en un solo paso. La creación en lote, también en Pro, rellena una plantilla de ficha de producto a partir de una hoja de cálculo de nombres y precios, para que los gráficos de una colección nueva salgan a juego. Un look, todos los tamaños muestra el método.