Shoupapp
Busca tamaños de banner para ecommerce y te saldrán listas interminables de medidas en píxeles que se contradicen entre sí. El motivo es sencillo: el tamaño en píxeles depende de la plantilla de tu tienda y de la pantalla, mientras que lo que realmente decide si un banner funciona es su forma. Esta guía parte de las cinco proporciones que cubren casi cualquier banner de ecommerce y después te enseña cómo convertir una proporción en píxeles, cuánto texto admite cada forma y cómo llevar una misma campaña a todas ellas.
| Forma | Proporción | Dónde se usa |
|---|---|---|
| Hero de la web | 16:9 | La parte superior de la home o de una landing |
| Apaisado | 2:1 | Cabeceras de categoría y cabeceras de email |
| Estrecho | 3:1 | Franjas promocionales y cabeceras bajas |
| Cuadrado | 1:1 | Publicaciones de feed y tarjetas promocionales en marketplaces |
| Story | 9:16 | Stories de Instagram y Facebook, anuncios verticales |
Por qué las listas de píxeles no coinciden
Cada plantilla muestra sus secciones de banner con un ancho propio y cada pantalla las representa a un tamaño distinto. Por eso una guía recomienda unas medidas para el banner hero y otra guía recomienda otras diferentes. Algunas listas incluso etiquetan un tamaño con la proporción equivocada: 2.048 × 1.024 píxeles se suele llamar 16:9, pero en realidad es 2:1. Un banner diseñado para una forma y subido en la otra acaba recortado.
Así que sigue este orden: averigua qué proporción usa la sección de tu plantilla, diseña con esa proporción y exporta al ancho que recomiende la plantilla.
Cómo convertir una proporción en píxeles
Cuando ya sabes la proporción y el ancho, la altura sale sola. Divide el ancho entre el primer número de la proporción y multiplica por el segundo.
| Proporción | Ancho de ejemplo | Altura |
|---|---|---|
| 16:9 | 1.920 px | 1.080 px |
| 2:1 | 2.048 px | 1.024 px |
| 3:1 | 1.800 px | 600 px |
| 1:1 | 1.080 px | 1.080 px |
| 9:16 | 1.080 px | 1.920 px |
La documentación de tu plantilla indica el ancho recomendado para cada sección. La propia guía de Shopify, por ejemplo, señala que las imágenes pueden llegar a 5.000 × 5.000 px y deben pesar menos de 20 MB, lo que deja margen de sobra para banners nítidos.
Diseña para la forma, no recortes hacia ella
Un hero 16:9 y una story 9:16 son la misma campaña en dos marcos completamente distintos. Diseñar uno y recortarlo para el otro casi siempre corta el titular, el producto o el botón. Los tamaños en píxeles se pueden escalar; una proporción no se puede cambiar sin perder algo por el camino. Compón cada forma por separado, colocando el producto y el texto pensando en ese marco.
Un presupuesto de texto para cada banner
Los banners fallan más por exceso de texto que por defecto. Un presupuesto útil:
| Elemento | No pases de unos |
|---|---|
| Titular | 60 caracteres |
| Subtitular | 100 caracteres |
| Texto de apoyo | 180 caracteres |
| Texto del botón | 30 caracteres |
En las formas más bajas, usa menos. Una franja 3:1 suele dar para un titular y un botón, y poco más. Un titular que encaja en un hero de escritorio puede volverse ilegible en un banner estrecho visto en el móvil.
Zonas seguras según la forma
- Hero 16:9: aleja el texto de los bordes exteriores, donde muchas plantillas colocan la navegación, las flechas o capas superpuestas, y comprueba cómo recorta la sección en móvil.
- 2:1 y 3:1: mantén el producto y el texto dentro de la banda central; estos banners se muestran a menudo con muy poca altura.
- 1:1: las composiciones centradas son las más seguras, porque los feeds y las tarjetas pueden mostrar una vista previa redondeada o recortada.
- Story 9:16: deja libres la parte superior e inferior, donde la plataforma pone el nombre del perfil, los botones y la barra de respuesta, y sitúa el producto en el tercio central.
Estilo según el objetivo
| Objetivo | Estilo que encaja | Énfasis del texto |
|---|---|---|
| Lanzar un producto | Limpio o premium | Nombre del producto y un beneficio |
| Promocionar una oferta | Llamativo | La oferta, en el titular |
| Destacar un beneficio | Lifestyle | El beneficio, mostrado en uso |
| Generar notoriedad | Premium | Poco texto, a menudo sin botón |
Por qué el texto de los banners con IA sale mal
Los banners generados íntegramente como imagen suelen fallar en el texto: letras que casi forman una palabra, un nombre de marca con un carácter cambiado. Lo fiable es generar la imagen sin nada de texto y después colocar encima el titular, el subtitular y el botón como texto real. Así, lo que escribes es exactamente lo que aparece, en todas las formas.
Una campaña en cinco formas
Un lanzamiento de producto se suele cubrir con una sola foto de producto:
- Escribe el titular una vez, respetando el presupuesto de arriba.
- Crea el hero 16:9 para la home.
- Crea la cabecera 2:1 para el email de lanzamiento.
- Crea la publicación 1:1 y la story 9:16 para redes sociales.
- Usa la franja 3:1 para la página de categoría o para una barra promocional en toda la web.
Mantén el mismo titular y el mismo color de botón en todas partes, para que la gente reconozca la campaña la vea donde la vea.
Cómo montar el pack a partir de una sola foto
El generador de banners de producto de Shoupapp parte de una foto que ya tienes en tu biblioteca. Eliges el objetivo (lanzar un producto, promocionar una oferta, destacar un beneficio, generar notoriedad), el formato y el estilo (limpio, lifestyle, premium o llamativo, o deja que lo elija él). Escribe tu propio titular o déjalo vacío y se redacta por ti en inglés, español, alemán, francés, italiano, portugués, neerlandés, turco o polaco.
Cada formato se compone con su propia forma y el texto se coloca sobre la imagen como texto real, así que siempre está bien escrito. El botón es opcional y adopta el color de tu marca; el color del texto se elige automáticamente para que siga siendo legible. Procesa la misma foto una vez por cada forma que necesites. Cada banner se guarda como archivo nuevo junto al original, listo para descargar o para rematarlo en el editor de fotos. Los banners también pueden ser un paso dentro de una automatización, de modo que cada producto nuevo tenga el suyo en cuanto llega su foto.
Tipos de banner en una tienda
| Banner | Forma habitual | Qué necesita |
|---|---|---|
| Hero de la home | 16:9 en escritorio, a menudo más alto en móvil | Producto, titular, botón |
| Cabecera de colección o categoría | 2:1 o 3:1 | Nombre de la colección, un producto o una textura |
| Cabecera de email | 2:1 | Oferta y un producto; debe leerse en el panel de vista previa |
| Tarjeta promocional | 1:1 | La oferta, bien grande |
| Story o anuncio vertical | 9:16 | Producto en el centro, texto dentro de la zona segura |
Hero de escritorio y hero de móvil
Muchas plantillas muestran el hero de la home con otra forma en el móvil, a menudo más alta que 16:9, y recortan la imagen de escritorio para que encaje. Comprueba si tu plantilla te deja subir una imagen específica para móvil. Si es así, créala: el mismo mensaje compuesto para un marco vertical. Si no, deja el producto y el titular en el centro del banner 16:9, que es donde sobreviven al recorte.
Formato de archivo y peso
Los banners suelen ser las imágenes más grandes de una página, así que son las que más influyen en la velocidad de carga. Los banners fotográficos conviene guardarlos en JPG o WebP; el mismo banner en PNG pesa mucho más. Exporta al ancho al que lo muestra tu plantilla, no más grande. Después revisa la página desde una conexión móvil: si el hero aparece claramente después del resto de la página, el archivo pesa demasiado.
Dudas frecuentes sobre banners
¿Cuál es el mejor tamaño de banner para una tienda Shopify?
Depende de la plantilla y de la sección. Consulta la documentación de la plantilla para saber el ancho y diseña con la proporción que usa esa sección.
¿Uso JPG, PNG o WebP?
En banners fotográficos, JPG o WebP mantienen los archivos ligeros. Usa PNG solo cuando necesites transparencia.
¿Puedo reutilizar el mismo banner en todos los tamaños?
Reutiliza el mensaje, no el archivo. Compón cada forma por separado.