El tema es «mobile friendly». PageSpeed está en verde. Alguien incluso añadió un botón fijo de Añadir al carrito. Y, sin embargo, la sesión en el teléfono sigue muriendo a mitad de camino por un muro de sobras del escritorio – barra de promociones, banner de cookies, logotipos de confianza, un párrafo de SEO, y luego una foto de producto diminuta. Eso no es una página de producto móvil. Eso es un diseño de escritorio embutido en una pantalla estrecha y vendido como optimización.
Google ya indexa y clasifica principalmente desde la versión móvil de tus páginas. Si la ruta de compra solo funciona en un monitor ancho, no estás «casi ahí» – estás midiendo la pantalla equivocada. El mapa complementario de qué debe incluir una página de producto cubre la lista completa de lo que pertenece; este artículo trata sobre el orden en que aterrizan esos bloques cuando la pantalla tiene 390 píxeles de ancho.
Una página de producto móvil es un problema de apilamiento, no de estilo.
«Optimizado para móviles» normalmente significa que la página de escritorio sigue al mando
El CSS responsivo hace que las columnas se apilen. No decide qué merece el primer desplazamiento del pulgar. Los temas mantienen el orden de los módulos de escritorio. Las aplicaciones siguen inyectando donde siempre lo hicieron. Nadie reordenó nada – el teléfono solo exprime la misma secuencia hasta que Añadir al carrito queda debajo de tres bloques que no son de compra.
La señal es aburrida y repetitiva. Abre el producto en vivo en tu propio teléfono – no en la vista previa del back office, la URL real con todos los módulos cargados. Si te desplazas más allá de los elementos de la interfaz antes de poder nombrar el producto, leer el precio que coincidía con el anuncio o tocar Añadir al carrito, el diseño sigue siendo primero para escritorio. Las puntuaciones de velocidad no arreglarán el orden.
Lo que debe hacer una página de producto móvil en la primera pantalla
Una página de producto móvil tiene un trabajo en la primera pantalla: permitir que alguien decida y actúe. No «sentir la marca». No «ver cada señal de confianza». Decidir y actuar.
En esa primera pantalla, protege solo lo que desbloquea la compra:
- Identidad. Nombre y una imagen principal clara – lo suficientemente grande como para que el artículo sea obvio sin tener que hacer zoom pellizcando.
- Precio que coincide con el clic. Si el anuncio o listado decía 47,90 €, la primera pantalla no puede ocultar un número diferente detrás de un acordeón cerrado.
- Opciones críticas para la compra. Talla, color, paquete – lo que sea que deba elegirse antes de que Añadir al carrito funcione. Etiquetas que un extraño pueda descifrar; los códigos de proveedor y «Talla1 / Talla2» queman espacio y toques escasos. Ese es el mismo problema de UX de la jerga de producto, solo que más ruidoso en un teléfono.
- Una acción de compra principal accesible. Un verdadero Añadir al carrito (o Comprar), no un botón fijo decorativo que cubre el botón que funciona y no hace nada útil.
- Una señal honesta de stock o entrega cuando cambia la decisión – se envía en 2 días, hecho a pedido, carga pesada. No una novela de políticas.
Todo lo demás espera abajo. Reseñas, descripción larga, productos relacionados, historia de la marca – útiles más tarde, fatales cuando empujan los controles de compra fuera de la primera pantalla.
El vertedero de escritorio: lo que suele robar la primera pantalla
Seguimos viendo la misma pila en teléfonos reales. En un catálogo que auditamos, cinco franjas fijas se situaban encima del nombre del producto – y dos de ellas decían lo mismo. Los sospechosos habituales:
- Interfaz antes que el producto. Barra de promoción + anuncio + aviso de cookies + «descarga nuestra app» – cuatro franjas antes de que siquiera cargue la imagen. El comprador vino por un producto, no por una valla publicitaria.
- Fondo de pantalla de confianza por encima de la comprensión. Una fila de logotipos de pago y seguridad antes del precio o la foto. Una interfaz nerviosa no reemplaza a un producto claro.
- Ensayo SEO debajo del título. Doscientas palabras de introducción rica en palabras clave copiadas de la plantilla de escritorio, para que el precio y las opciones comiencen debajo del pliegue en cada teléfono. Ese texto fue escrito para Google, no para la persona que sostiene el teléfono – y Google lo lee perfectamente desde debajo del pliegue.
- Venta cruzada antes de Añadir al carrito. Carruseles de «También te puede interesar» peleando por la zona del pulgar mientras el SKU principal aún no tiene una talla elegida.
- Galería que se come la ventana gráfica. Miniaturas enormes o un control deslizante que necesita tres deslizamientos antes de que aparezca el precio – bien en escritorio, de mala educación en un teléfono.
- Interfaz de usuario fija que miente. Una barra flotante que cubre el verdadero Añadir al carrito, o un botón fijo que está deshabilitado sin error porque una opción está vacía. La vista previa se veía limpia; la página en vivo con módulos no.
Nada de eso necesita un presupuesto de rediseño. Necesita que alguien admita que el orden del escritorio sobrevivió al «proyecto móvil».
Reordena antes de reconstruir
Elige la página de producto móvil que obtiene tráfico y poca conversión. Ábrela en un teléfono real. Haz una captura de pantalla de la primera pantalla. Luego escribe cada bloque visible de arriba a abajo – barras, imagen, título, precio, módulos, botones. Marca cada bloque como crítico para la compra o ruido.
Si el ruido se sitúa por encima de lo crítico para la compra, muévelo o elimínalo. Las posiciones del tema y los hooks de los módulos primero: en PrestaShop ese es el orden de los hooks en la página de producto, en Shopify el orden de la sección en el editor de temas, en WooCommerce lo que sea que haya apilado el constructor de páginas. No compres otra aplicación de «UX móvil» hasta que la pila existente sea honesta. Un rediseño que mantiene el mismo orden de módulos solo redibuja el vertedero.
Las páginas de categoría tienen un trabajo diferente – orientación sobre una cuadrícula – así que no robes soluciones de ahí; si la página de listado es el desastre, comienza con contenido de página de categoría ecommerce. Esta auditoría se mantiene en una URL de producto.
Después de Añadir al carrito: lo que aún gana espacio
Una vez que la ruta de compra está intacta, el resto de la página puede ganarse su sustento: especificaciones, cuidado, ajuste, preguntas frecuentes que matan una objeción real, comparación con SKU hermanos. En una página de producto móvil esos bloques deben situarse después de la ruta de decisión – no interrumpirla. La misma regla que el mapa completo de PDP del artículo complementario, cortado para una pantalla del tamaño de un pulgar.
Notas de plataforma sin un sermón de CMS
PrestaShop, Shopify, WooCommerce – mismo modo de fallo. La vista previa del back office no es el escaparate en vivo. Las aplicaciones y módulos se inyectan tarde: herramientas de cookies, ventas adicionales, chat, barras de notificación. Audita en un teléfono real después de una actualización completa, con la sesión cerrada – en el Android de gama media que tus clientes realmente llevan, no en un buque insignia con el Wi-Fi de la oficina.
Las tiendas multilingües tienen una herida adicional. Los títulos y descripciones cortas en FR/DE/PL a menudo son más largos que el borrador en inglés. En escritorio te encoges de hombros. En una página de producto móvil, la cadena más larga empuja el precio y Añadir al carrito media pantalla más abajo. Traduce el significado, luego recorta la longitud para el teléfono – no solo traduzcas.
Si faltan las respuestas, arregla eso primero
Reordenar no salvará una página que nunca responde qué es, cuánto cuesta o cuándo llega. Arregla esas respuestas de compra en la página de producto completa primero. Si existen y el teléfono aún las entierra bajo las sobras del escritorio, tu página de producto móvil no necesita otra insignia de optimización – necesita una pila más corta.