¿Qué es un banner principal o hero image?
Es el bloque visual destacado que aparece en la parte superior de una página, normalmente debajo del encabezado y la navegación. Puede combinar una fotografía, ilustración o video con un título, una breve explicación y un botón.
En la página de inicio ayuda a presentar la marca o una prioridad comercial. En una página de colección o una landing page puede anunciar una selección, temporada u oferta concreta. Una hero image no necesita ser una imagen decorativa a todo lo ancho: su contenido debe ayudar a que el visitante entienda qué encontrará y qué puede hacer a continuación.
1. Elige la ubicación según el objetivo
El banner de inicio suele recibir mucha atención, pero no todos los mensajes tienen que vivir ahí. Si una campaña se dirige a una colección específica, una página de colección o una landing page puede ofrecer un contexto más directo y reducir pasos antes de la compra.
Antes de diseñar, define:
- Dónde aparecerá: inicio, colección, producto o landing page.
- A quién se dirige: visitantes nuevos, clientes recurrentes o personas que llegan de una campaña.
- Qué acción buscas: conocer la marca, explorar una colección, revisar un producto o comprar.
La ubicación debe corresponder con la intención de la persona. Si alguien llega desde un anuncio de una promoción, el banner y la página de destino deben continuar con la misma oferta, productos y condiciones.
2. Decide qué debe comunicar
Un banner puede cumplir distintas funciones. Escoge una principal para que el mensaje no compita consigo mismo:
- Presentar la marca: explica en pocas palabras qué ofrece y para quién.
- Destacar una propuesta de valor: muestra un beneficio relevante, como materiales, especialización o servicio.
- Resolver una duda frecuente: aclara una condición útil para comprar, como cobertura de entrega o disponibilidad, siempre que la información sea precisa.
- Promover una colección o producto: dirige a una selección específica.
- Anunciar una campaña: comunica temporada, lanzamiento, descuento o evento con sus condiciones esenciales.
Una pregunta útil es: “Si el visitante solo mira este bloque unos segundos, ¿qué idea debería recordar y qué acción debería poder tomar?”. Si el diseño intenta anunciar demasiadas cosas, conviene crear mensajes separados en distintas secciones o páginas.
3. Selecciona un formato que sirva al mensaje
El formato debe facilitar la comprensión, no añadir movimiento por sí mismo.
- Imagen estática con texto: funciona para una propuesta o promoción clara y sencilla.
- Composición dividida: separa visualmente la imagen del mensaje y puede adaptarse bien a escritorio y móvil.
- Carrusel: permite presentar varias campañas o categorías, pero cada diapositiva debe entenderse por sí sola. Permite que el usuario alcance a leer antes de la rotación automática; incluye controles y permite pausar el movimiento cuando aplique.
- Video: puede aportar contexto y atmósfera a una marca o producto. Mantenlo breve, sin audio automático y con una imagen fija alternativa. Considera controles de pausa y las preferencias de movimiento reducido del dispositivo.
En muchos casos, una sola imagen y un mensaje enfocado son suficientes. Si eliges un carrusel o video, verifica que no dificulte encontrar productos ni vuelva más pesada o distractora la primera pantalla.
4. Usa una imagen relevante y de buena calidad
La imagen debe reforzar lo que promete el texto. Puede mostrar el producto en uso, sus detalles, a las personas que lo utilizan o el contexto que ayuda a entenderlo. La fotografía propia y las ilustraciones originales suelen distinguir mejor una tienda; si utilizas fotografía de stock, comprueba su licencia y evita imágenes genéricas que podrían pertenecer a cualquier marca.
Cuida también estos aspectos:
- Mantén el producto o elemento principal dentro de la zona que seguirá visible al recortar.
- Revisa si el fondo permite leer el texto y distinguir el botón.
- Utiliza una composición que tenga sentido en formato horizontal y vertical.
- Conserva consistencia con la identidad visual, sin sacrificar legibilidad.
En los temas compatibles, Shopify permite definir un punto focal para indicar qué parte de una imagen debe permanecer visible cuando el tema la recorta. La disponibilidad depende del tema y de su versión.
Cómo preparar tu tienda online para El Buen Fin 2026
Leer más
5. Prepara las proporciones y revisa el recorte
Las medidas del banner dependen de la sección, el tema y la forma en que esa sección se adapta a distintas pantallas. Antes de exportar una sola imagen como “tamaño estándar”, revisa la configuración del editor de temas y las recomendaciones del desarrollador del tema.
Como flujo de trabajo:
- Agrega una imagen provisional a la sección que usarás.
- Revisa su relación de aspecto y el comportamiento de recorte en el editor de temas.
- Prueba la vista de escritorio y móvil.
- Si la composición pierde el producto, el texto o un elemento importante, prepara una versión alternativa para móvil cuando el tema lo permita.
- Comprueba el resultado en dispositivos reales antes de publicar.
Te recomendamos usar la relación de aspecto adecuada para el espacio donde se mostrará la imagen, si el banner se recorta, puede deberse a que la proporción de la imagen no coincide con la forma del área del tema. Por eso, las medidas como 2400 × 800 px para escritorio y 800 × 1200 px para móvil pueden servir como punto de partida de diseño.
6. Escribe un mensaje breve y un CTA concreto
El título debe explicar rápidamente el valor o la oferta. La línea secundaria, si se necesita, añade contexto. El botón debe describir qué pasará al hacer clic.
Ejemplos de CTA:
- “Compra colección”
- “Explora novedades”
- “Conoce el producto”
- “Ver condiciones”
Evita botones genéricos cuando puedes nombrar la acción con precisión. Asegúrate también de que el destino corresponda con el mensaje: un botón que anuncia una colección debe llevar a esa colección y no a una página general.
Si el texto está colocado sobre la imagen, revisa el contraste en distintos tamaños de pantalla. Una capa de color, un fondo semitransparente o ubicar el texto en un panel independiente puede hacerlo más legible. No conviertas toda la información importante en parte de una imagen: el contenido HTML del tema suele ser más fácil de adaptar, leer y utilizar con tecnologías de asistencia.
7. Mantén consistencia con la campaña
Cuando un banner forma parte de una campaña pagada, conserva la continuidad entre anuncio, página de destino y oferta. El visitante debe reconocer el producto o promoción que motivó su clic y poder encontrar las condiciones relevantes sin buscar demasiado.
Revisa que coincidan:
- el producto o colección anunciada;
- el precio, descuento y vigencia;
- los mensajes sobre envío, disponibilidad y restricciones;
- el destino del botón;
- los creativos de otros canales que forman parte de la misma campaña.
Si la campaña termina, actualiza o retira el banner para evitar mostrar mensajes vencidos.
8. Cuida la accesibilidad y el rendimiento
El formato, el peso y las dimensiones influyen en la calidad visual y en el tiempo que tarda el banner en mostrarse. Para los banners estáticos te recomendamos:
- Formato preferido: WebP. Suele conservar una buena calidad visual con un archivo más ligero.
- Alternativa: JPG/JPEG. Ambos nombres se refieren al mismo formato; es una opción ampliamente compatible para fotografías y banners sin transparencia.
- PNG: resérvalo para logotipos, gráficos o elementos que necesiten fondo transparente. Para una fotografía o un fondo de banner, normalmente genera archivos más pesados.
- Peso objetivo: procura que el archivo final esté entre 200 y 300 KB, manteniendo una calidad visual adecuada.
- Tamaño de banner: 2400 x 800 px en una proporción de 3:1 para escritorio y 800 × 1200 px en una proporción de 2:3 para móvil. Prepara versiones separadas cuando la composición horizontal no se adapte bien a la pantalla vertical.
Shopify optimiza las imágenes que se muestran a través del tema y puede servir formatos modernos compatibles con el navegador, como WebP o AVIF. Esta optimización ayuda, pero no elimina la conveniencia de subir archivos bien dimensionados: imágenes demasiado grandes, demasiadas secciones o un video pesado todavía pueden afectar la experiencia. Las medidas y el recorte también dependen de la sección y del tema, así que comprueba el resultado en el editor y en dispositivos reales.
Antes de publicar:
- Añade texto alternativo breve y descriptivo cuando la imagen aporte información. Si es puramente decorativa y el tema lo permite, evita describirla como si fuera contenido esencial.
- Comprueba que el texto tenga contraste suficiente y que el botón sea fácil de identificar.
- Verifica que se pueda navegar y activar el CTA con teclado.
- Evita texto pequeño dentro de la imagen y elementos importantes pegados a los bordes.
- Prueba la carga en una conexión móvil y confirma que el banner no desplace inesperadamente el contenido.
9. Mide, prueba y actualiza
No juzgues un banner solo por si se ve atractivo. Revisa si ayuda a la persona a continuar su recorrido. Según el objetivo, mide clics en el CTA, visitas a la colección o producto, tasa de conversión y ventas atribuidas a la campaña.
Puedes comparar versiones cambiando una variable a la vez, por ejemplo, la imagen, el título o el CTA. Asegúrate de que la prueba tenga suficiente tráfico y duración para interpretar el resultado; una diferencia pequeña con pocos datos no demuestra por sí sola que una versión sea mejor.
Actualiza los banners cuando cambien las prioridades, los productos, la temporada o las promociones. Revisa también que la información siga vigente y que las imágenes continúen representando lo que el cliente encontrará al avanzar.
Diseña banners que conecten la campaña con la compra
Un banner eficaz ayuda a comprender qué ofrece la tienda y cuál es el siguiente paso. Define su objetivo, presenta una imagen relevante, adapta el diseño a cada pantalla y verifica que la campaña continúe de forma coherente después del clic.
En eCohete ayudamos a marcas a mejorar sus tiendas Shopify y a conectar diseño, contenido y operación. Si estás preparando una nueva campaña o quieres revisar la experiencia de tu tienda, conoce nuestros servicios Shopify o solicita un diagnóstico.
