Comercio móvil: tu tienda en el teléfono ya es más importante que en escritorio

Abre el back office de PrestaShop, ve a Estadísticas → Navegadores y sistemas operativos para comprobar el tráfico por dispositivo, compara después los ingresos por dispositivo en tus analíticas y fíjate en una sola proporción: el porcentaje de sesiones que llegan desde un teléfono frente al porcentaje de ingresos que generan esos teléfonos. En la mayoría de las tiendas, el primer número es la mayoría y el segundo, la minoría. Esa brecha concreta — más tráfico móvil que ingresos móviles — es todo el tema de este artículo. El móvil ya no es una versión más pequeña de tu tienda de escritorio; es donde la mayoría de tus clientes te conocen por primera vez, y tratarlo como una experiencia secundaria aplica silenciosamente un coste extra a cada pedido.

Última actualización: junio de 2026.

Esta es la pieza estratégica del clúster: por qué el móvil es ahora la superficie principal, y qué cambia eso, en concreto, en la forma de gestionar una tienda PrestaShop. El trabajo táctico en profundidad — megamenús, filtros facetados, búsqueda, diseño de categorías, ventanas emergentes, el proceso de pago — tiene su propia guía para cada tema, y enlazamos a la adecuada en cada punto de decisión en lugar de intentar repasarlo todo deprisa aquí.

Mobile-first no es un eslogan: es cómo Google lee ahora tu tienda

Dos cosas convirtieron el enfoque "mobile-first" en un hecho estructural, no en una preferencia de diseño. Primero, el tráfico: los rastreadores del sector llevan varios años situando la cuota móvil de las sesiones de comercio electrónico por encima de la mitad y, en muchas categorías B2C, es aún mayor. Toma la cifra exacta como orientación y léela en tu propio panel de Estadísticas, no en un titular. Segundo, y menos negociable: Google pasó a usar la indexación mobile-first en toda la web. La versión de tu tienda que Googlebot rastrea, evalúa y posiciona es la versión móvil. Si tus páginas móviles ocultan contenido detrás de pestañas que no se renderizan en el DOM, cargan más despacio o pierden datos estructurados que sí incluye el diseño de escritorio, esa es la versión que se está juzgando: el pulido del escritorio ya no te rescata.

¿Qué significa eso en la práctica? Tu tienda móvil es ahora, a la vez, el escaparate con más tráfico y el sistema de referencia para SEO. Una decisión que parece "solo un ajuste para teléfono" — contraer una descripción en un acordeón, cargar un bloque de forma diferida, cambiar un menú por una hamburguesa — es también una decisión de posicionamiento. Eso redefine todo el trabajo: no estás "dando soporte también a móviles", estás optimizando la versión canónica de la tienda y dejando que el escritorio herede.

Un tema adaptable es el punto de partida, no la meta

Los temas modernos por defecto de PrestaShop — Classic en 1.7/8 y Hummingbird en PrestaShop 9 — son adaptables: la cuadrícula se reorganiza, las imágenes se redimensionan y el menú se pliega en un icono de hamburguesa por debajo del punto de ruptura móvil. Eso es realmente útil y es el punto de partida correcto. Pero "cabe en la pantalla" y "se maneja bien con el pulgar" son afirmaciones distintas. Un tema adaptable garantiza que nada se desborde fuera de la pantalla; no garantiza que las áreas táctiles sean lo bastante grandes, que aparezca el teclado correcto ni que el bloque más importante quede por encima del pliegue en una vista de 390 px de ancho.

Dos palancas específicas de PrestaShop que la mayoría de propietarios nunca toca:

• Tamaños de imagen reales para pantallas pequeñas. En Diseño → Ajustes de imagen, PrestaShop define tipos de imagen con nombre (home_default, large_default, cart_default…) y regenera miniaturas para cada uno. Luego, un tema puede usar esos tamaños generados en el marcado srcset/picture, de modo que un teléfono descargue una imagen del tamaño adecuado para móvil en lugar de una imagen hero de escritorio reducida en el navegador: comprueba que tu tema realmente genera imágenes adaptables. Si has heredado un tema con dimensiones de tipos de imagen infladas, estás enviando imágenes con peso de escritorio a los teléfonos: corrige las dimensiones y haz clic en Regenerar miniaturas en lugar de culpar al "hosting lento".
• Carga diferida y recursos aplazados. Muchos temas modernos de PrestaShop 8/9 usan loading="lazy" nativo para las imágenes por debajo del pliegue (comprueba tu tema y las plantillas de tus módulos); combinado con Parámetros avanzados → Rendimiento (caché inteligente para CSS/JS, combinación/minificación al aplicar), mantiene pequeña la carga inicial en móvil. El "¿y qué?": un teléfono con una conexión móvil inestable muestra algo utilizable en los primeros segundos en lugar de una pantalla en blanco que el visitante abandona.

La prueba que detecta lo que oculta redimensionar el navegador: carga tu tienda en un teléfono real con datos móviles y después pasa la URL pública por las herramientas de compatibilidad móvil y PageSpeed de Google. Tocar, equivocarse al tocar y esperar en hardware real saca a la luz problemas que una "vista móvil" de las herramientas de desarrollo de escritorio nunca mostrará.

Los patrones de escritorio que fallan silenciosamente en un teléfono

Algunos patrones de interacción no son simplemente "más pequeños" en móvil: dejan de funcionar. Saber cuáles son te permite hacer sustituciones deliberadas en lugar de publicar un diseño de escritorio que falla en silencio bajo el pulgar.

Cada una de esas sustituciones tiene una guía completa en este clúster; este artículo es el mapa, no el párrafo apresurado:

• El menú. Un megamenú basado en pasar el cursor debe volverse fácil de usar al tacto sin enterrar tus categorías. Cómo crear uno que convierta en ambos entornos: navegación con megamenú de PrestaShop que convierte, con el enfoque de experiencia de exploración en megamenú para PrestaShop.
• Filtros. En un teléfono, un catálogo grande vive o muere por un cajón de filtros plegable. El tratamiento completo sobre cómo ayudar a los clientes a acotar resultados: revolución de filtros para catálogos grandes.
• Búsqueda. Cuando escribir cuesta esfuerzo (y siempre cuesta en el teclado de un teléfono), la búsqueda debe ser rápida y tolerante. Por qué la búsqueda por defecto se queda corta y qué hacer: búsqueda inteligente para PrestaShop.
• Páginas de categoría. Diseño, ordenación y cuántos productos por fila antes de que un teléfono se vuelva incómodo: páginas de categoría que convierten.
• Ventanas emergentes. El patrón móvil que más se rompe. Hazlas bien (y fáciles de cerrar) aquí: ventanas emergentes de PrestaShop que convierten y ventanas emergentes de bienvenida bien hechas.

La página de inicio en teléfono tiene unos tres segundos y una pantalla

En escritorio, tu página de inicio puede sostener un bloque principal, una cuadrícula de categorías, productos destacados, un bloque de boletín y una fila de garantías en el primer desplazamiento. En un teléfono, el visitante ve aproximadamente una pantalla y decide en segundos si esta tienda merece el esfuerzo. El trabajo de la página de inicio móvil es una criba dura: empezar con lo único que le dice a una persona nueva que está en el lugar correcto, ofrecer una ruta clara hacia el catálogo con un toque y aplazar todo lo demás. El principio más amplio — qué debe estar por encima del pliegue y qué se gana su sitio debajo — está en diseño de página de inicio para PrestaShop.

Una nota específica sobre encabezados en móvil, ya que estamos aquí: la pantalla de un teléfono hace que un H1 de categoría vago sea especialmente costoso, porque a menudo es el único contexto por encima del pliegue. Un encabezado que comunica mejor que el simple nombre de la categoría tiene peso real en pantallas pequeñas; el razonamiento está en H1 de categoría personalizado.

Dónde mueren realmente las sesiones móviles: fricción en la navegación y en el pago

Dos etapas causan la mayor parte de la brecha entre tráfico móvil e ingresos, y ambas son lo bastante específicas de PrestaShop como para señalarlas.

Encontrar el producto. Un comprador de escritorio tolera hacer clic por tres niveles de categorías; un comprador móvil en el autobús no. La combinación que funciona en un teléfono es un árbol de categorías limpio, un cuadro de búsqueda rápido y tolerante, y un cajón de filtros a un toque: la capa de descubrimiento, no la capa de compra. Si el problema es la propia arquitectura de la información, empieza por la estructura: estructura de categorías de PrestaShop y navegación optimizada para SEO.

Pagar. El proceso de pago por defecto de PrestaShop (el controlador order y su secuencia por pasos CheckoutPersonalInformationStep → CheckoutAddressesStep → CheckoutDeliveryStep → CheckoutPaymentStep) no se diseñó pensando primero en el pulgar. En móvil, tres cosas son las que más mueven la aguja: el tipo de entrada correcto para cada campo (para que el teléfono muestre un teclado numérico para el código postal y el teléfono, y un teclado de correo electrónico para el correo electrónico, controlado por el atributo type del campo), el pago como invitado por defecto en lugar de obligar a crear una cuenta, y los pagos con monedero (Apple Pay / Google Pay) para que un cliente recurrente autorice con una huella en vez de teclear una tarjeta de 16 dígitos sobre cristal. El proceso de pago es un tema profundo por sí mismo y aquí no lo reducimos a medias: las tácticas específicas para móvil están en nuestro clúster sobre proceso de pago, no en este resumen de UX.

Conviene concretar el punto del tipo de entrada porque es gratis y la mayoría de temas lo hacen mal. El teclado que aparece en el teléfono lo determinan los atributos type y inputmode del campo: combínalos bien y un cliente introduce un código postal o un número de teléfono sin buscar la fila de números:

<!-- email keyboard: shows @ and . keys -->
<input type="email" name="email" autocomplete="email">

<!-- numeric pad for phone -->
<input type="tel" name="phone" autocomplete="tel">

<!-- digits for postcode without forcing type=number's spinners -->
<input type="text" name="postcode"
       inputmode="numeric" autocomplete="postal-code">

Usa inputmode="numeric" en lugar de type="number" para los códigos postales: type="number" añade flechas de incremento, rechaza ceros iniciales y también códigos no numéricos que se usan en algunos países. Los tokens de autocomplete permiten que el teléfono sugiera valores guardados, reduciendo aún más los toques del formulario.

Funciones móviles que merece la pena añadir (y las que conviene eliminar)

Algunas cosas solo tienen sentido cuando aceptas que el teléfono es lo principal:

• Clic para llamar. Un enlace tel: en la cabecera convierte a un comprador móvil indeciso en una llamada telefónica: un canal de alta intención que el escritorio sencillamente no puede ofrecer.
• Productos vistos recientemente. Las sesiones móviles se interrumpen: una notificación, una parada, una llamada. PrestaShop incluye el bloque ps_viewedproduct; mostrarlo en la página de inicio y en las páginas de producto permite que un visitante que vuelve retome la compra sin navegar otra vez por un menú que ya le resultó molesto.
• Añadir al carrito fijo. En una página de producto móvil larga, una barra que mantiene el botón de añadir al carrito en la zona del pulgar mientras el visitante se desplaza elimina por completo la fricción de "volver arriba para comprar".
• Eliminar: ayudas emergentes dependientes de pasar el cursor, medios en reproducción automática que consumen datos móviles y cualquier ventana emergente cuyo único control de cierre sea una "x" de 16 px en una esquina.

Si publicas contenido para atraer visitantes móviles desde la búsqueda, hazlo dentro de PrestaShop en lugar de acoplar una instalación separada de WordPress que fragmente tu experiencia móvil y tu dominio; el argumento está en módulo de blog para PrestaShop.

Cómo saber si la optimización móvil ha funcionado de verdad

No te fíes de un rediseño que "parece más rápido". Antes de cambiar nada, registra cuatro cifras de tu panel de Estadísticas y de tus analíticas, segmentadas por dispositivo: tasa de conversión móvil, tasa de rebote/salida móvil en páginas de categoría y producto, tasa de finalización del pago en móvil y tiempo de carga móvil. Después del trabajo, compara las mismas cuatro durante al menos 30 días y unos cientos de sesiones móviles: volumen suficiente para separar una tendencia real del ruido semana a semana. El objetivo honesto no es que "el móvil supere al escritorio en conversión" (rara vez lo hará, por la naturaleza del medio); es cerrar la brecha entre tu cuota de tráfico móvil y tu cuota de ingresos móviles. Ese delta es el dinero que la mentalidad centrada en escritorio ha estado dejando sobre la mesa.

Preguntas frecuentes

Mi tema ya es adaptable, ¿no basta eso para móvil? Ser adaptable es el punto de partida, no la meta. Garantiza que nada se desborde fuera de la pantalla, pero no que las áreas táctiles sean lo bastante grandes, que aparezca el teclado correcto ni que el bloque más importante quede por encima del pliegue en una vista de 390 px. Prueba en un teléfono real con datos móviles, no en la "vista móvil" de un navegador de escritorio: tocar y esperar en hardware real revela problemas que el redimensionado oculta.

¿Qué significa la "indexación mobile-first" para mi tienda? Google rastrea, evalúa y posiciona la versión móvil de tu tienda. Si tus páginas móviles ocultan contenido detrás de pestañas que no se renderizan en el DOM, cargan más despacio o pierden datos estructurados que sí incluye el diseño de escritorio, esa es la versión que se está juzgando: el pulido del escritorio ya no te rescata. Un "ajuste para teléfono", como contraer una descripción en un acordeón, también es una decisión de posicionamiento.

¿Cómo dejo de enviar imágenes con peso de escritorio a los teléfonos? En Diseño → Ajustes de imagen, comprueba que tus tipos de imagen con nombre (home_default, large_default, cart_default) no estén sobredimensionados y asegúrate de que tu tema los genera en marcado srcset/picture, para que un teléfono descargue una imagen del tamaño adecuado para móvil. Si corriges las dimensiones, haz clic en Regenerar miniaturas: no culpes al "hosting lento" por imágenes que estás enviando demasiado grandes.

¿Qué patrones de escritorio fallan realmente en un teléfono? Megamenús que se abren al pasar el cursor (las pantallas táctiles no tienen hover: el primer toque activa el enlace), barras laterales de filtros amplias (se comen la vista), páginas de producto con todo a la vez (desplazamiento interminable, tablas de especificaciones que se desbordan), ventanas emergentes diminutas y descartables (botones de cierre más pequeños que el pulgar) y navegación en la esquina superior izquierda (fuera del alcance del pulgar). Cada uno necesita una alternativa nativa para móvil, no una simple reducción.

¿Cómo sé si mi trabajo en móvil realmente dio resultado? Antes de cambiar nada, registra cuatro cifras segmentadas por dispositivo: tasa de conversión móvil, rebote/salida móvil en páginas de categoría y producto, tasa de finalización del pago en móvil y tiempo de carga móvil. Compara las mismas cuatro durante al menos 30 días y unos cientos de sesiones móviles. El objetivo honesto no es superar la conversión de escritorio: es cerrar la brecha entre tu cuota de tráfico móvil y tu cuota de ingresos móviles.

La idea central de todo el clúster: el teléfono ya no es una pantalla a la que adaptarse, es la tienda canónica que Google indexa y donde compra la mayoría de clientes. Haz que la capa de descubrimiento funcione bien bajo el pulgar — menú, búsqueda, filtros, páginas de categoría —, adapta el proceso de pago al uso con el pulgar y deja que la experiencia de escritorio herede ese pulido, no al revés. Cada guía enlazada arriba es una parte de esa superficie; este es el mapa que te dice qué pieza tiene la fuga.