Mejores prácticas para la imagen hero de Shopify (Guía 2026)
El hero de la página de inicio de Shopify es la primera impresión de tu tienda: consigue las dimensiones, el recorte en móvil, los textos superpuestos y la velocidad de carga correctos para que convierta.
Lo primero que ve un comprador en tu tienda Shopify no es la página de producto, sino el hero de la página de inicio. Ese banner define el tono, la percepción de precio y si alguien sigue desplazándose, lo que convierte la imagen hero de Shopify en el elemento visual de mayor impacto de todo tu sitio. Si lo haces mal, perderás a la gente en los primeros dos segundos; si lo haces bien, todas las páginas que vienen después trabajan más duro.
Esta guía cubre los aspectos del hero que realmente marcan la diferencia: dimensiones y relaciones de aspecto ideales, cómo se recorta la imagen en móvil, hero único frente a carrusel, cómo mantener el texto legible y las decisiones de tamaño de archivo que mantienen tu página de inicio veloz.
Dimensiones y relaciones de aspecto del hero
Un hero es diferente a una foto de producto. Las imágenes de producto son cuadradas o 4:5 y viven en una cuadrícula ordenada; el hero es a ancho completo y panorámico, que se extiende de borde a borde por todo el viewport. Esa anchura es precisamente lo que lo hace complicado: un navegador de escritorio puede tener 1440 px de ancho mientras que un teléfono mide 390 px, de modo que una sola imagen tiene que sobrevivir a formas muy distintas.
Esto es lo que debes subir para un hero a ancho completo en la página de inicio:
| Caso de uso | Tamaño de subida recomendado | Relación de aspecto |
|---|---|---|
| Hero de escritorio a ancho completo | 1920 x 1080 px | 16:9 |
| Hero grande / retina | 2560 x 1440 px | 16:9 |
| Banner alto e inmersivo | 2000 x 1000 px | 2:1 |
| Vista recortada en móvil (tenlo en cuenta) | se muestra aprox. 4:5 o 1:1 | varía según el tema |
| Formato de archivo | JPG o PNG de origen | Shopify sirve WebP |
Algunas reglas que evitan retrabajos:
- Sube entre 1920 y 2560 px de ancho. Lo suficientemente amplio para verse nítido en monitores grandes, lo suficientemente pequeño para cargar rápido. Un original de 8000 px solo desperdicia ancho de banda.
- Diseña para 16:9, pero nunca te fíes de ello en móvil. La mayoría de los temas recortan el hero a algo cercano a 4:5 o cuadrado en teléfonos, por lo que los bordes izquierdo y derecho de tu imagen de escritorio suelen desaparecer.
- Deja que Shopify gestione el formato. Sube un JPG o PNG nítido y Shopify lo convierte a WebP para los navegadores compatibles de forma automática, que es la mayoría de tu tráfico.
Si quieres las especificaciones correspondientes para el resto de tu tienda, nuestra referencia de tamaño y dimensiones de imágenes de producto en Shopify cubre el tamaño de galerías y colecciones con todo detalle.
Recorte en móvil y el punto focal
Más de la mitad del tráfico de Shopify es móvil, pero la mayoría de los heroes se diseñan en escritorio y solo se comprueban en escritorio. Ahí es donde los heroes fallan. Cuando el tema recorta tu amplio banner 16:9 hasta una forma alta para móvil, suele recortar desde el centro, de modo que todo lo que sea importante cerca del borde izquierdo o derecho queda fuera.
Mantén el sujeto en la zona segura
Trata el 60% central del hero como la única área verdaderamente segura. Coloca tu producto, tu modelo y especialmente tu titular dentro de esa banda central. Los bordes exteriores son respiro decorativo que el móvil se comerá.
Usa el ajuste de punto focal de tu tema
La mayoría de los temas modernos de Shopify (Dawn y sus derivados) te permiten establecer un punto focal de la imagen en el editor del tema: un pequeño objetivo que arrastras hasta la parte de la imagen que siempre debe permanecer en cuadro. Colócalo sobre tu producto o rostro, no en el cielo vacío. Este único ajuste resuelve la mayoría de los problemas de "mi hero se ve roto en móvil".
Hero único frente a carrusel
El carrusel es la función de página de inicio más sobreutilizada y casi siempre la decisión equivocada. Da la sensación de que estás mostrando más, pero tanto los datos como la mecánica argumentan en su contra.
Por qué un hero único suele ganar
- La atención se divide. Un banner giratorio pide a los compradores que lean dos o tres mensajes en competencia; la mayoría no lee ninguno y pasa de largo.
- La mayoría de las diapositivas nunca se ven. La gran mayoría de los visitantes nunca espera a ver la segunda diapositiva, así que la oferta que enterraste ahí podría no existir.
- Los carruseles pesan. Cada diapositiva es otra imagen grande que cargar, lo que arrastra tu LCP y tu puntuación de velocidad en móvil.
- La rotación automática perjudica. Un banner que se mueve mientras alguien lo lee es un problema de usabilidad, no una funcionalidad.
Elige tu mensaje único más potente —tu producto más vendido, tu lanzamiento o tu propuesta de valor central— y dale todo el protagonismo. Una imagen, un titular, un botón.
Cuándo un carrusel es defendible
Hay excepciones puntuales: un momento genuinamente multicampaña (una oferta que necesita tres propuestas distintas) o una marca que es verdaderamente visual ante todo. Incluso en ese caso, limítalo a dos o tres diapositivas de avance manual, nunca con rotación automática, y asume el coste en velocidad de forma consciente.
Cómo mantener legibles los textos superpuestos
Un hero casi siempre lleva un titular y un botón, y el texto ilegible sobre una foto recargada es el error más habitual. La imagen y las palabras tienen que diseñarse juntas, no apilarse y esperar lo mejor.
Crea espacio negativo
La solución más limpia es una imagen que ya tenga espacio vacío donde va el texto: una pared lisa, un degradado suave o un fondo abierto en un lateral. Si planificas la foto alrededor del copy, raramente necesitas tratamientos agresivos para que sea legible.
Añade una capa o degradado sutil
Cuando la imagen es recargada, coloca una capa semitransparente (alrededor del 20-40% de negro, o un degradado direccional) detrás del texto. Es la diferencia entre un titular que destaca y uno que desaparece en la imagen. Mantenla sutil: un negro opaco hace que toda la tienda se sienta oscura.
Mantén el copy corto y con alto contraste
Un titular de hero tiene de cinco a ocho palabras, no un párrafo. Combínalo con un botón orientado a la acción ("Ver la colección", no "Enviar"), y comprueba el contraste en un teléfono con luz del día, donde el resplandor y el recorte más ajustado exponen antes el texto débil.
Tamaño de archivo, formato y velocidad de carga
El hero es, por definición, el elemento visible más grande cuando carga tu página de inicio, lo que lo convierte en tu Largest Contentful Paint (LCP) en la mayoría de los casos. Google mide el LCP directamente, y un hero lento perjudica tanto la conversión como el posicionamiento en buscadores. La velocidad aquí no es opcional.
| Objetivo | Recomendación |
|---|---|
| Tamaño del archivo hero (servido) | Por debajo de ~200 KB tras la compresión WebP |
| Ancho de subida | 1920-2560 px (no 8000 px) |
| Formato | Sube JPG/PNG; Shopify sirve WebP |
| Carga | Eager: nunca uses carga diferida para el hero |
Tres hábitos mantienen el hero veloz:
- Ajusta el tamaño del origen. Una subida de 2560 px es más que suficiente; los originales sobredimensionados son la causa número uno de una página de inicio lenta.
- Nunca apliques carga diferida al hero. Las imágenes por debajo del pliegue deben cargarse de forma diferida, pero el hero está por encima del pliegue y debe pintarse de inmediato. Aplicarle carga diferida daña directamente el LCP.
- Apóyate en WebP. La conversión automática a WebP de Shopify suele reducir el peso del hero entre un 30 y un 70% respecto al JPEG, sin pérdida de calidad visible. No necesitas convertir nada tú mismo: simplemente sube archivos de origen nítidos.
Elegir una imagen fiel a tu marca que convierta
Las especificaciones hacen que un hero cargue y se recorte correctamente; la imagen real es lo que hace que alguien quiera comprar. Un hero que convierte hace tres cosas: muestra el producto (o el resultado de usarlo), deja espacio para el mensaje y parece inconfundiblemente tu marca. Una foto de stock genérica de un desconocido sonriendo no hace ninguna de esas cosas.
Para la mayoría de las tiendas, el hero más potente es uno de estos tres tipos: una escena lifestyle limpia que muestra el producto en uso real, una foto centrada en el producto con respiro para el titular, o un banner de propuesta de valor simple con un solo producto sobre un fondo del color de la marca. Sea cual sea el que elijas, debe reflejar los colores, la iluminación y el ambiente de tus páginas de producto: un hero que se siente desconectado del catálogo erosiona la confianza silenciosamente.
Producir imágenes hero rápidamente con IA
El cuello de botella rara vez es saber cómo es un buen hero: es producir uno que sea fiel a la marca sin una sesión fotográfica. Aquí es donde la IA encaja perfectamente en un flujo de trabajo de Shopify. Con una herramienta como HedaAI, subes una foto real de tu producto (cuantos más ángulos, mejores resultados) y obtienes un conjunto completo de 12 imágenes para comercio electrónico —8 imágenes principales y de galería más 4 imágenes de banner estilo A+— generadas en minutos. Esas imágenes de banner A+ anchas y las escenas lifestyle son exactamente el tipo de visuales limpios y fieles a la marca que puedes recortar como hero de página de inicio, y como todas vienen del mismo pipeline comparten el color, la iluminación y el encuadre reales de tu producto.
Para ser claros sobre lo que hace: HedaAI genera las imágenes —fotos principales con fondo blanco puro, escenas lifestyle, infografías y banners anchos—, no el tema de Shopify ni el diseño del hero en sí. Tú insertas el visual en la sección hero de tu tema, estableces el punto focal y añades tu titular. Una ejecución gratuita te da una vista previa con marca de agua para juzgar la calidad, y tu primer pago elimina las marcas de agua y desbloquea las descargas en HD a 2K por $1.00 por producto (las cuentas nuevas reciben $2 en créditos gratuitos, equivalente a unos dos productos gratis). Puedes ver ejemplos reales de antes y después o consultar los detalles de precios antes de comprometerte.
Para conocer los fundamentos de iluminación y encuadre de cualquier buena imagen de origen, nuestras guías de fotografía de producto para Shopify complementan bien esta guía, y la guía de imágenes de producto de Shopify cubre las imágenes de galería que los compradores ven después de que el hero haya hecho su trabajo.
Conclusión
Tu hero de Shopify tiene dos segundos de primera impresión para hacer el trabajo más pesado de tu sitio. Sube una imagen nítida de 1920-2560 px, diseña para 16:9 pero establece un punto focal para móvil, elige un hero único en lugar de un carrusel, crea espacio para un texto legible y mantenlo por debajo de ~200 KB para que cargue primero. Si cumples esos cinco puntos, tu página de inicio se gana el scroll, ya sea que la imagen venga de un estudio, de tu teléfono o de la IA.