Versión móvil de PrestaShop: cómo arreglar u ocultar un elemento en el móvil
Cuando un elemento rompe la versión móvil de PrestaShop, el culpable habitual es un ancho fijo, un texto demasiado largo o los estilos de un módulo no pensados para pantallas estrechas. El arreglo va en el custom.css del child theme (tema hijo), en una regla solo para móviles. Oculta un elemento solo cuando los clientes en el móvil de verdad no lo necesitan.
Autor: El equipo de TellMyShop. Una guía para dueños de tiendas PrestaShop: la causa, el arreglo manual y el mismo trabajo en una conversación con el chat.
Última actualización: · 6 min de lectura
¿Por qué un elemento se ve mal en el móvil?
Una tienda PrestaShop no tiene una versión móvil aparte. El mismo código se coloca de otra forma cuando la pantalla es estrecha. Los problemas empiezan cuando un elemento no puede encogerse.
| Lo que ves en el móvil | Causa más habitual | Lo que suele ayudar |
|---|---|---|
| la página se desplaza hacia los lados | un elemento con ancho fijo en píxeles, una tabla ancha en una descripción | ancho del 100 %, o desplazar solo la tabla |
| el texto se sale de su caja | una palabra, dirección o código largo que no se corta | cortar las palabras largas en ese elemento |
| los iconos de garantía ocupan media pantalla | el módulo tiene iconos grandes y tres columnas sin regla para móvil | iconos más pequeños, una columna, u ocultarlos en el móvil |
| un botón queda tapado | una ventana de chat, un banner de cookies o una barra fija | mover la ventana o bajar la barra |
| el título del producto ocupa cuatro líneas | una fuente de encabezado grande de la versión de ordenador | un tamaño de encabezado menor por debajo de un ancho elegido |
| una imagen sale recortada o estirada | una altura de imagen fija en el CSS | altura automática |
Los elementos que más se rompen son los que se añadieron después: módulos de terceros, bloques de texto pegados desde un editor, tablas de tallas en las descripciones de producto y barras de mensajes. El tema en sí suele estar bien.
Cómo revisar la versión móvil sin un móvil
Tu navegador te da una vista previa rápida. En Chrome, abre las herramientas para desarrolladores y activa la barra de dispositivos, como explica la guía del modo de dispositivo de Chrome. Eliges el ancho de un móvil popular y ves al momento dónde se descompone la página.
El modo de dispositivo es una aproximación. Revisa siempre también en un móvil de verdad, mejor en una ventana privada, para no ver una versión antigua de la caché del navegador.
Revisa en orden:
- La página de inicio.
- Una categoría con filtros.
- Una página de producto con un nombre largo y varias variantes.
- El carrito y el primer paso del pedido.
- Una página con una tabla, como una tabla de tallas.
Apunta en qué página y con qué ancho aparece el problema. Es la mitad del arreglo.
¿Arreglar u ocultar el elemento en el móvil?
Intenta primero arreglarlo. Ocultarlo es rápido, pero el cliente en el móvil pierde información que el cliente en el ordenador sí ve.
Ocultarlo tiene sentido cuando el elemento:
- repite información que ya está más arriba en la página,
- es una decoración sin contenido,
- tapa el botón o el precio y no se puede mover fácilmente.
No ocultes la descripción del producto, el precio, la disponibilidad, el plazo de envío ni la información de devoluciones. Es lo que más buscan los clientes en el móvil.
Dónde añadir el arreglo CSS para el móvil
En el archivo custom.css de tu child theme. Las reglas para el móvil las metes en una media query, un bloque que solo se aplica por debajo de un ancho de pantalla elegido. La guía de MDN sobre media queries explica cómo funciona.
El child theme importa por un motivo: una actualización del tema principal no sobrescribirá tu archivo. La documentación de PrestaShop sobre child themes explica cómo crear uno y conectarle tu propia hoja de estilos. Por qué desaparecen los cambios tras una actualización lo contamos en el artículo sobre cómo una actualización del tema borró mis cambios.
¿Cuáles son los arreglos para móvil más habituales?
La mayoría de los problemas de la versión móvil se resuelven con unos pocos arreglos que se repiten. Cada uno lo pones en el bloque para pantallas estrechas, así la versión de ordenador no cambia.
- Una tabla ancha en una descripción de producto. Una tabla de tallas con muchas columnas ensancha la página. En lugar de apretarla, deja que solo la tabla se desplace hacia los lados, no toda la página.
- Palabras y direcciones largas. Un código descuento, una dirección de correo o un nombre de material largo sin espacios se sale de su caja. Basta con una regla para cortar las palabras largas en ese elemento.
- Una ventana de chat encima del botón Añadir al carrito. Los módulos de chat suelen tener su propio ajuste de posición en el móvil. Revísalo antes de ponerte a escribir CSS.
- Encabezados demasiado grandes. Un nombre de producto en cuatro líneas saca el precio de la primera pantalla. Normalmente basta con un tamaño de encabezado menor en el móvil.
- Tres columnas de iconos. Los bloques de garantía, envío y devoluciones quedan mejor en el móvil en una columna y con iconos más pequeños.
Arregla una cosa cada vez y revisa la página después de cada cambio. Cuando cambias varias reglas a la vez, es difícil saber cuál rompió algo.
Qué revisar después del arreglo
Después de guardar, vacía la caché en Parámetros avanzados → Rendimiento. Si sigues sin ver el cambio, recorre la lista del artículo sobre cambios que no se ven en PrestaShop.
Cómo arreglar la versión móvil con el chat
Describes qué está mal y en qué página. Puedes pegar en la conversación una captura de tu móvil. Tu chat (Claude o ChatGPT) lee los archivos del tema y el código de la página, averigua qué clase controla el elemento y te enseña la regla antes de guardar.
Tú: En el móvil, los iconos de garantía de debajo del botón Añadir al carrito ocupan media pantalla. Ocúltalos por debajo de 768 px y haz más pequeño el título del producto. Solo en custom.css.
Tu chat: Los iconos salen del módulo del bloque de confianza, clase .blockreassurance_product. El child theme tiene un custom.css vacío. Añadiré:
En el ordenador no cambia nada. Antes de guardar haré una copia del archivo y después vaciaré la caché.
Tú: Sí.
Tu chat: Guardado. En la página de producto la regla solo se aplica por debajo de 768 px. Compruébalo también en tu propio móvil en una ventana privada.
Estado de la tarjeta: esperando tu «sí»versión anterior: (archivo vacío)
versión nueva: @media (max-width: 767px) {
versión nueva: .blockreassurance_product { display: none; }
versión nueva: .product-container h1 { font-size: 1.25rem; }
versión nueva: }
Los tamaños y los nombres de clase de este ejemplo son ilustrativos; en tu tema pueden ser otros. Tienes una petición de ejemplo en el caso de uso ocultar o arreglar un elemento en el móvil.
TellMyShop Pro hace cambios en los archivos del tema cuando activas el interruptor Tema en el panel del módulo. El interruptor dura 24 horas y necesita una copia de seguridad de la base de datos hecha el mismo día. Antes de cada guardado de un archivo se hace una copia, y el cambio queda en el historial de cambios, así que puedes deshacer cualquier cambio con una petición. La versión gratuita TellMyShop Free no lee ni cambia archivos del tema; ayuda con los informes de la tienda. Las versiones se comparan en la página de precios.
Preguntas y respuestas
¿PrestaShop tiene una versión móvil aparte de la tienda?
No. El tema Classic y la mayoría de los temas más nuevos son responsive: la misma tienda se coloca de otra forma en una pantalla estrecha. Por eso los arreglos para el móvil los haces en la misma hoja de estilos, solo que dentro de una regla que se aplica por debajo de un ancho de pantalla elegido.
¿Ocultar un elemento en el móvil perjudica en Google?
Ocultar una decoración pequeña o una información repetida no suele ser un problema. Ten cuidado con el contenido que importa a los clientes y a Google, como la descripción del producto o el precio. Google juzga una tienda sobre todo por su versión móvil, así que el contenido importante debe seguir ahí.
¿Cómo reviso la versión móvil sin un móvil?
Abre la tienda en Chrome, abre las herramientas para desarrolladores y activa el modo de dispositivo. Verás la página con el ancho de un móvil y podrás cambiar el tamaño de la pantalla. Es una buena aproximación, pero haz la prueba final en un móvil de verdad.
¿Por qué desaparecieron mis arreglos para el móvil tras actualizar el tema?
Porque estaban escritos en un archivo del tema que la actualización sobrescribió, como theme.css. Guarda tus propios estilos en el custom.css del child theme (tema hijo). Ese archivo no se sobrescribe al actualizar el tema principal.
¿El chat ve cómo queda mi tienda en el móvil?
No mira la pantalla de un móvil. Lee los archivos del tema y el código de la página, y tú describes el problema o pegas una captura en la conversación. Con eso, el chat averigua qué regla cambiar y te la enseña antes de guardar.
PrestaShop es una marca registrada de PrestaShop SA. Claude es una marca de Anthropic PBC. ChatGPT y OpenAI son marcas de OpenAI. TellMyShop no está afiliado a estas empresas.