Diseño de la página de inicio de un ecommerce: guía por secciones

Guía para diseñar la página de inicio de tu tienda online: qué va en el primer pantallazo, orden de las secciones, lista de verificación y consejos móviles.

Preguntas frecuentes

¿Qué debe incluir la página de inicio de un ecommerce?

Como mínimo: un encabezado con buscador, carrito y navegación por categorías; un hero que diga qué vendes y ofrezca un único paso siguiente claro; una vía de acceso a tus categorías principales; unos pocos productos más vendidos o novedades; señales de confianza como envíos, devoluciones y reseñas reales; y un pie de página con políticas y datos de contacto. Todo lo demás (bloques editoriales, suscripción por email, prueba social) es opcional y debe ganarse su lugar.

¿Qué debe ir en la primera pantalla (above the fold) de la página de inicio de un ecommerce?

Cuatro cosas: una navegación que incluya buscador y carrito, un titular que diga qué vendes, una llamada a la acción principal que lleve a los productos y un motivo visible para confiar en la tienda, como una línea sobre envíos o devoluciones. Una buena imagen de producto en el hero ayuda a los visitantes a entender el catálogo sin necesidad de leer nada.

¿Cuántos productos debo mostrar en la página de inicio?

No hay un número universal. Muestra los suficientes para representar tu gama, normalmente una fila o cuadrícula de más vendidos sin carrusel, junto con tarjetas de categorías, y enlaza después a la colección completa. Si vendes unos pocos productos, puedes mostrarlos todos. Si vendes miles, la página de inicio debe llevar a la gente a las categorías, no intentar exhibir el catálogo entero.

¿Debe una página de inicio de ecommerce tener un slider o carrusel?

Un único hero estático suele comunicar con más claridad que uno rotatorio. Las diapositivas que cambian solas esconden el contenido detrás de un temporizador, son más difíciles de hacer accesibles y a menudo aumentan el peso de la página. Si necesitas promocionar varias cosas, dale a cada una su propia tarjeta debajo del hero.

¿Cómo hago que la página de inicio de mi ecommerce cargue más rápido?

Comprime las imágenes y ajusta su tamaño correctamente, usa formatos modernos como WebP o AVIF, carga con prioridad la imagen del hero y aplica lazy loading a todo lo que quede debajo, limita los scripts de terceros (chats, popups, seguimiento) y reserva el espacio de las imágenes para que el diseño no salte mientras se carga la página. PageSpeed Insights de Google y el informe de Core Web Vitals de Search Console te mostrarán qué es realmente lo que va lento en tu página.

¿Qué es más importante: la página de inicio o la página de producto?

Las páginas de producto y de colección son donde se toman la mayoría de las decisiones de compra, pero la página de inicio suele ser la primera impresión para los visitantes directos, los que llegan por tu marca y los que regresan. Su función es orientar: llevar a cada visitante a la categoría o el producto adecuado con rapidez. Revisa tus propias analíticas para ver cuántas sesiones empiezan en la página de inicio antes de decidir dónde invertir.

Respuesta corta: Una buena página de inicio de ecommerce tiene un solo trabajo: llevar a cada visitante a los productos adecuados con rapidez. Coloca, en este orden, un encabezado claro (buscador, carrito, categorías), un hero que diga qué vendes con un solo botón principal, tarjetas de categorías, una fila breve de más vendidos, señales de confianza (envíos, devoluciones, reseñas) y un pie de página útil. Todo lo que aparezca en la primera pantalla debe responder a: «¿qué tienda es esta y dónde hago clic?».

La guía de un vistazo

Úsala como orden de partida. Elimina las secciones que no puedas llenar con contenido real; un bloque de «testimonios» vacío hace más daño que no tener ninguno.

#	Sección	Función	Límite
1	Barra de anuncios	Un mensaje oportuno: umbral de envío, fin de rebajas, fecha límite de entrega	Una línea
2	Encabezado y navegación	Buscador, carrito, cuenta, categorías principales	5-7 enlaces de primer nivel
3	Hero	Decir qué vendes y dar un paso siguiente	Un titular, un botón
4	Franja de confianza	Envíos, devoluciones, pago, atención al cliente	3-4 elementos cortos
5	Tarjetas de categorías	Orientar a los compradores según lo que buscan	4-8 tarjetas
6	Más vendidos / novedades	Demostrar que el catálogo es real	Una fila o cuadrícula
7	Bloque de valor o historia	Por qué elegirte a ti y no a otra tienda	Un bloque corto
8	Prueba social	Reseñas reales, prensa, fotos de clientes	Solo si es auténtica
9	Suscripción por email	Captar a quienes aún no están listos para comprar	Un solo campo
10	Pie de página	Políticas, contacto, enlaces secundarios	Columnas bien organizadas

Qué va en la primera pantalla (above the fold)

«Above the fold» es todo lo que el visitante ve antes de hacer scroll, y cambia según el dispositivo. Diseña por separado para un portátil y para un móvil, en lugar de dibujar una única línea en una maqueta. Sea cual sea el dispositivo, estas cuatro cosas deben verse sin desplazarse:

Navegación con buscador y carrito. Quien sabe lo que quiere usará primero el buscador. No lo escondas detrás de un icono en escritorio.
Un titular que nombre el producto. «Tazas de cerámica hechas a mano, enviadas desde Portland» funciona mejor que «Bienvenido a nuestra tienda». Nombra la categoría con palabras sencillas.
Una llamada a la acción principal. «Comprar tazas» o «Ver novedades». Un segundo enlace más discreto está bien; tres botones del mismo peso, no.
Un motivo para confiar en ti. Un umbral de envío gratis, un plazo de devolución o un número de reseñas que puedas respaldar de verdad. Usa solo afirmaciones que puedas demostrar.

Usa en el hero una foto real de producto o de estilo de vida, no una imagen de stock que le serviría a cualquier tienda. La imagen es la forma más rápida de que el visitante confirme que está en el lugar correcto.

Notas sección por sección

Encabezado y navegación

Limita las categorías de primer nivel a lo que buscaría alguien que te visita por primera vez, con las palabras que esa persona usa. Pon el buscador en un campo visible, mantén actualizado el contador del carrito y haz que el logotipo enlace a la página de inicio. Si tienes un catálogo grande, un megamenú puede funcionar, pero comprueba que se pueda usar con un trackpad y con el teclado. Para profundizar en el resto de la tienda, consulta nuestras mejores prácticas de diseño de sitios ecommerce.

Hero

El hero debe transmitir un solo mensaje. Si lanzas una promoción de temporada, conviértela en el hero mientras dure y después vuelve a tu mensaje permanente. Evita las diapositivas que cambian solas: esconden el contenido detrás de un temporizador y son más difíciles de hacer accesibles. Si tienes varias campañas, dale a cada una su propia tarjeta más abajo en la página.

Tarjetas de categorías

Es la sección que más trabajo hace. Cada tarjeta necesita una foto clara y una etiqueta sencilla («Zapatillas de running para mujer», no «Colección Stride»). Ordénalas según lo que más quieras vender o lo que más piden tus visitantes, no alfabéticamente.

Más vendidos y novedades

Muestra productos reales con precios reales, no una cuadrícula genérica. Cada tarjeta necesita imagen, nombre, precio y enlace; añade valoraciones solo si tienes reseñas auténticas. Mantén las proporciones de las imágenes uniformes para que la cuadrícula se vea ordenada. Cierra la fila con un enlace «Ver todo» que lleve a la página de la colección.

Confianza y prueba social

Los compradores dudan por el coste del envío, las devoluciones y la legitimidad de la tienda. Respóndeles en la página de inicio con líneas cortas y concretas: plazos de envío, periodo de devolución, métodos de pago aceptados y una vía de contacto. En cuanto a las reseñas, muestra las reales, con nombre o con etiqueta de compra verificada si tu plataforma lo permite. Nunca inventes testimonios ni valoraciones; además de poco ético, en muchos lugares va contra las normas de protección del consumidor.

Pie de página

El pie de página es donde miran los compradores más cuidadosos para encontrar las políticas. Incluye envíos, devoluciones, privacidad, términos, contacto y un enlace a tu guía de tallas o a las preguntas frecuentes si las tienes. Tratamos estos diseños en ejemplos de diseño de pie de página.

Notas para móvil

La mayoría de las tiendas reciben una gran parte de sus visitas desde el móvil, así que revisa tus propias analíticas para conocer la proporción. Diseña la página de inicio móvil como un diseño independiente, no como una página de escritorio comprimida.

Mantén el hero corto. El titular, la imagen y el botón deben verse en la pantalla de un móvil típico sin pasar del encabezado.
Haz que los elementos tocables sean generosos. Botones, filtros y opciones de menú necesitan tamaño y separación suficientes para los dedos. Pruébalo en un dispositivo real.
Colapsa la navegación con criterio. Un icono de menú está bien, pero deja el buscador y el carrito visibles en la barra del encabezado.
Usa el desplazamiento horizontal con moderación. Una fila de productos que se desliza hacia los lados es aceptable si deja claro que hay más contenido; una cuadrícula apilada es más segura.
Evita los popups a pantalla completa al llegar. Bloquean la página y pueden perjudicar tanto la usabilidad como la visibilidad en buscadores. Retrásalos o sustitúyelos por un bloque de suscripción integrado en la página.
Ojo con el teclado. Asegúrate de que el campo de suscripción por email no quede oculto cuando se abre el teclado en pantalla.

Fundamentos de velocidad y accesibilidad

Una página de inicio preciosa que carga despacio pierde visitantes antes de que la vean. Las palancas más importantes casi siempre son las imágenes y los scripts de terceros.

Comprime las imágenes y usa formatos modernos como WebP o AVIF.
Asigna ancho y alto explícitos a las imágenes para que el diseño no se desplace mientras cargan.
Carga primero la imagen del hero; aplica lazy loading a las que estén debajo.
Revisa cada script de terceros (chat, popups, rastreadores) y elimina los que no uses.
Escribe un texto alternativo (alt) real para las imágenes de productos y categorías.
Comprueba que el texto tenga contraste suficiente con el fondo y que todos los elementos interactivos funcionen con el teclado.

Usa PageSpeed Insights de Google sobre tu URL en producción para ver qué archivos concretos te ralentizan.

Lista de verificación de la página de inicio

Cópiala en tus notas de lanzamiento:

[ ] El encabezado tiene buscador y carrito visibles, y de 5 a 7 enlaces de categorías claros
[ ] El titular del hero dice qué vendemos con palabras sencillas
[ ] Un solo botón principal; lleva a productos, no a una página «Acerca de»
[ ] La imagen del hero muestra un producto real o un uso real
[ ] Envíos y devoluciones resumidos en la primera pantalla o justo debajo
[ ] Las tarjetas de categorías usan el lenguaje del cliente y cubren las gamas principales
[ ] Los más vendidos muestran precios reales y enlazan a las páginas de producto
[ ] Reseñas y menciones de prensa solo si son auténticas
[ ] La suscripción por email es un único campo con un beneficio claro
[ ] El pie de página incluye políticas, datos de contacto y métodos de pago
[ ] Ningún carrusel automático esconde contenido clave
[ ] Diseño móvil comprobado en un teléfono real
[ ] Imágenes comprimidas, con el tamaño correcto y con texto alternativo
[ ] Título de página y meta descripción escritos específicamente para la página de inicio

Errores comunes

Querer mostrarlo todo. La página de inicio es un enrutador, no un catálogo.
Texto del hero vago. Si un desconocido no sabe qué vendes en cinco segundos, reescribe el titular.
Promocionar cinco cosas por igual. Cuando todo está destacado, nada lo está.
Urgencia falsa. Los temporizadores de cuenta atrás que se reinician en cada visita erosionan la confianza.
Ignorar a los visitantes recurrentes. Valora incluir un bloque de «seguir comprando» o de «vistos recientemente» si tu plataforma lo admite.

Para principios más generales sobre páginas de inicio más allá del ecommerce, nuestras guías sobre cómo diseñar una página de inicio y diseñar la página de inicio de un sitio web profundizan más, y si todavía estás eligiendo plataforma, consulta los mejores creadores de sitios web para ecommerce.

Cómo ponerlo en práctica

Empieza por escribir el contenido antes de diseñar: tu titular, los nombres de tus categorías, tus líneas sobre envíos y devoluciones, y tus seis mejores productos. Después colócalos en el orden indicado arriba. Si quieres adelantar trabajo con el diseño, el plan gratuito de We.Inc te permite publicar hasta tres sitios a partir de plantillas listas para usar; el creador con IA que redacta un sitio a partir de un prompt está disponible desde el plan Starter, a $20 al mes. Puedes registrarte aquí. Uses la herramienta que uses, revisa cada sección con la lista de verificación antes de lanzar.

Empieza gratis · Sin tarjeta de crédito

Umair Ali Sadaqat

Fundador de We.Inc

Umair es el fundador de We.Inc. Escribe sobre la creación de sitios web con IA, las agencias y el negocio de gestionar un estudio web.

¿Listo para crear algo grande?

Únete a los 15,000+ negocios que usan We.Inc para lanzar, crecer y automatizar, todo desde una plataforma.