¿Cómo limpiar la caché avanzada de PrestaShop para solucionar problemas de diseño?

Hay pocas escenas tan absurdas, y tan frecuentes, como esta: cambias el CSS de tu tienda PrestaShop, actualizas una plantilla, corriges un margen rebelde, guardas con solemnidad casi litúrgica… y el sitio sigue igual. Inmutable. Sereno. Burlón. Como si el servidor hubiera decidido conservar el pasado por razones sentimentales.

La caché, esa gran aliada del rendimiento web, puede convertirse en una pequeña tirana cuando trabajamos con diseño, plantillas Smarty, temas, módulos, archivos CSS o JavaScript. Acelera la tienda, sí; pero también puede ocultar cambios, servir estilos antiguos, romper el layout, duplicar recursos, mantener versiones minificadas caducadas o provocar que el front office parezca recién salido de una mudanza mal organizada.

Limpiar la caché avanzada de PrestaShop no consiste únicamente en pulsar un botón y esperar que los dioses del comercio electrónico sean compasivos. Conviene entender qué se está limpiando, dónde se almacena, cuándo hacerlo, qué no tocar y cómo diagnosticar si el problema está en PrestaShop, en el navegador, en el servidor, en una CDN o en ese plugin de optimización instalado “solo para probar” hace tres años. Porque ahí siguen todos, como muebles heredados.

Contenido de la guía

• Qué es realmente la caché en PrestaShop
• Síntomas típicos de problemas de diseño por caché
• Limpieza desde el panel de administración
• Limpieza manual por FTP, SSH o administrador de archivos
• CCC: combinación, compresión y caché de CSS y JavaScript
• Caché del servidor, OPcache, LiteSpeed, Varnish y CDN
• Método profesional de diagnóstico paso a paso
• Errores frecuentes que conviene evitar
• Preguntas frecuentes

Qué es la caché en PrestaShop y por qué afecta al diseño ⚙️

PrestaShop utiliza distintos mecanismos de caché para reducir consultas, evitar recompilar plantillas en cada visita y servir archivos estáticos de forma más eficiente. Es una arquitectura razonable: el visitante no tiene por qué pagar con segundos de espera cada vez que el servidor recompone una página como quien arma un rompecabezas en medio de una tormenta.

Pero el problema aparece cuando hacemos cambios. El diseño de una tienda PrestaShop depende de varias capas: archivos .tpl de Smarty, hojas de estilo CSS, scripts JavaScript, módulos, overrides del tema, recursos minificados, configuraciones de rendimiento y, en versiones modernas, partes gestionadas por Symfony. Si una de esas capas conserva una versión antigua, el resultado puede ser desconcertante.

La paradoja es preciosa, si uno la mira desde lejos: la caché existe para que todo sea más rápido, pero cuando se atasca nos hace perder horas. El progreso convertido en obstáculo. La velocidad vestida de demora.

Principales tipos de caché implicados

Síntomas típicos de problemas de diseño causados por caché 🛒

No todo fallo visual se debe a la caché. A veces hay un selector CSS mal escrito, un módulo que carga Bootstrap como quien trae una orquesta a una biblioteca, o un override antiguo que ya no encaja con la versión actual de PrestaShop. Sin embargo, hay señales bastante claras.

• Has modificado un archivo CSS, pero el cambio no aparece en la tienda.
• El diseño se ve bien en modo incógnito, pero mal en tu navegador habitual.
• El front office muestra una estructura antigua después de cambiar archivos .tpl.
• El tema se ve roto tras activar CCC, minificación o combinación de archivos.
• Los cambios aparecen en modo depuración, pero desaparecen al volver a producción.
• Un módulo actualizado conserva estilos o plantillas de la versión anterior.
• El botón, menú, carrusel o checkout se rompe solo cuando se combina JavaScript.
• La tienda cambia correctamente en local, pero no en el servidor.
• Cloudflare u otra CDN sigue sirviendo una versión antigua del CSS.

Una anécdota mínima: una vez pinté una pared de la cocina de un color que en la tienda parecía “arena mediterránea” y en casa resultó ser “tristeza administrativa”. Durante días, cada vez que entraba, mi cerebro seguía viendo el color anterior. Con la caché pasa algo parecido, salvo que aquí no es la memoria humana, sino una cadena de sistemas empeñados en enseñarte lo que ya no existe.

Cómo limpiar la caché desde el panel de PrestaShop

El primer paso debe ser siempre el menos agresivo. Antes de entrar por FTP con espíritu de leñador, conviene usar las herramientas del propio back office.

Ruta habitual en el administrador

En la mayoría de instalaciones modernas:

1. Entra al panel de administración de PrestaShop.
2. Ve a Parámetros avanzados > Rendimiento.
3. Busca el botón Limpiar caché.
4. Haz clic y espera a que PrestaShop regenere los archivos necesarios.

En algunas versiones o temas del back office, también puede aparecer un acceso rápido para limpiar caché en la parte superior. El nombre exacto varía según versión, idioma y personalización, pero la lógica es la misma.

Ajustes recomendados mientras trabajas en diseño

Si estás desarrollando o corrigiendo diseño, revisa la sección de Smarty en Parámetros avanzados > Rendimiento:

• Compilación de plantillas: usa Recompilar las plantillas si los archivos han sido actualizados. Para trabajos intensivos, puedes activar temporalmente Forzar compilación.
• Caché de Smarty: desactívala temporalmente mientras haces cambios de plantillas.
• Modo depuración: úsalo solo para diagnosticar. No lo dejes activo en producción.
• CCC para CSS y JavaScript: desactívalo mientras corriges conflictos visuales o de scripts.

Consejo práctico: cuando termines los cambios, vuelve a activar una configuración optimizada. Una tienda sin caché en producción puede volverse lenta como un caracol cargando una biblioteca.

Limpieza manual avanzada por FTP, SSH o administrador de archivos 🗂️

Cuando el botón de limpiar caché no basta, toca entrar en el sistema de archivos. Aquí conviene actuar con precisión quirúrgica, no con entusiasmo destructivo. La diferencia entre limpiar caché y borrar medio PrestaShop puede ser un clic mal dirigido.

Antes de borrar nada: haz una copia de seguridad de archivos y base de datos, o al menos confirma que el hosting dispone de snapshots recientes. No trabajes directamente sobre una tienda con ventas activas sin una ventana de mantenimiento o un entorno de pruebas.

PrestaShop 1.7, 8 y 9: carpetas principales

En versiones modernas, la caché crítica suele estar en:

• var/cache/prod/
• var/cache/dev/

Para una limpieza manual, puedes vaciar el contenido de esas carpetas. PrestaShop lo regenerará al cargar de nuevo el back office o el front office.

Si tienes acceso SSH, una operación habitual sería:

rm -rf var/cache/prod/*
rm -rf var/cache/dev/*

También puedes usar el comando de consola de Symfony/PrestaShop, si está disponible en tu instalación:

php bin/console cache:clear --env=prod --no-warmup
php bin/console cache:warmup --env=prod

En algunos entornos, el usuario del servidor web no coincide con el usuario SSH. Si limpias por consola y luego aparecen errores de permisos, revisa propietario y grupo de los archivos generados. El servidor debe poder escribir en las carpetas de caché.

PrestaShop 1.6 y tiendas antiguas

En instalaciones más antiguas, especialmente PrestaShop 1.6, la caché suele encontrarse en rutas como:

• cache/smarty/compile/
• cache/smarty/cache/
• cache/class_index.php

Puedes vaciar el contenido de las carpetas de Smarty y, si procede, eliminar cache/class_index.php para que PrestaShop lo regenere. Eso sí: evita borrar archivos protectores como index.php o .htaccess si existen en directorios públicos. Pequeños guardianes, modestos pero útiles.

Caché de assets del tema

Dependiendo de la versión y del tema, PrestaShop puede generar archivos CSS y JS combinados en rutas relacionadas con el tema, por ejemplo dentro de:

• themes/tu_tema/assets/cache/
• themes/tu_tema/cache/ en algunos temas o configuraciones antiguas

Si el problema es estrictamente visual, y en especial si afecta a CSS minificado o combinado, revisa estas rutas. No todos los temas las usan igual. Algunos themes comerciales incorporan sus propios sistemas de caché, compilación SCSS, generadores de hooks o paneles de rendimiento. La elegancia del ecosistema, ya se sabe, consiste a veces en que cada fabricante inventa su pequeña meteorología.

CCC: el sospechoso habitual cuando CSS y JavaScript se rompen 🚀

CCC significa Combine, Compress and Cache: combinar, comprimir y cachear. En PrestaShop permite optimizar recursos para reducir peticiones HTTP, minificar CSS y JavaScript, y mejorar tiempos de carga. Bien configurado, ayuda. Mal configurado, puede convertir una tienda ordenada en un collage postapocalíptico.

En Parámetros avanzados > Rendimiento, revisa opciones como:

• Smart cache para CSS
• Smart cache para JavaScript
• Minificar HTML
• Comprimir JavaScript en HTML
• Mover JavaScript al final
• Optimización Apache, si está disponible y es compatible con tu servidor

Cuándo desactivar CCC

Desactiva temporalmente CCC si:

• Los estilos no se actualizan tras modificar CSS.
• El orden de carga de archivos rompe el diseño.
• Un carrusel, menú o popup deja de funcionar.
• El checkout pierde estilos o interactividad.
• Hay errores en la consola del navegador relacionados con archivos minificados.

Después de desactivar CCC, limpia caché de PrestaShop y recarga la página con una actualización forzada del navegador. Si el problema desaparece, no era magia: era una optimización demasiado optimista.

Cómo diagnosticar conflictos con archivos combinados

1. Desactiva CCC para CSS y JavaScript.
2. Limpia la caché desde el back office.
3. Vacía manualmente var/cache/prod si el problema persiste.
4. Haz una recarga dura del navegador con Ctrl + F5 o Cmd + Shift + R.
5. Abre las herramientas de desarrollador y revisa la pestaña Network.
6. Comprueba qué archivo CSS se carga, desde qué URL y con qué fecha.
7. Activa CCC de nuevo, primero CSS y luego JavaScript, probando por separado.

Este orden evita perseguir fantasmas. En diseño web hay muchos, pero no hace falta invitarlos a todos.

No todo está en PrestaShop: caché del servidor, OPcache y CDN 🔒

Uno de los errores más comunes es limpiar la caché de PrestaShop veinte veces y olvidar que la página puede estar siendo servida por otra capa. PrestaShop jura que ya cambió. El navegador jura que no. El servidor sonríe en silencio. Qué reparto.

Caché del navegador

Empieza por lo simple:

• Abre la tienda en modo incógnito.
• Prueba desde otro navegador.
• Haz recarga forzada: Ctrl + F5 en Windows/Linux o Cmd + Shift + R en macOS.
• En DevTools, activa Disable cache mientras la ventana de herramientas esté abierta.

Si el diseño correcto aparece en incógnito, probablemente el navegador estaba guardando CSS, JS o imágenes antiguas.

Cloudflare y otras CDN

Si usas Cloudflare, BunnyCDN, Fastly, Akamai u otra CDN, purga la caché de recursos estáticos. En Cloudflare puedes usar:

• Purge Everything, si necesitas una limpieza completa.
• Custom Purge, si solo quieres purgar archivos CSS, JS o imágenes concretas.
• Development Mode, útil durante cambios intensivos de diseño.

Ten cuidado con reglas agresivas de caché para HTML. Cachear páginas completas de una tienda PrestaShop sin excepciones para carrito, cuenta, login o checkout puede ser una magnífica forma de ahorrar milisegundos y perder clientes. Ironías del rendimiento.

LiteSpeed Cache, Varnish y Nginx FastCGI cache

Muchos hostings incorporan sistemas de caché a nivel servidor. Si tu tienda usa LiteSpeed, Varnish o caché FastCGI de Nginx, limpia también esa capa desde el panel del hosting o mediante las herramientas disponibles.

PrestaShop puede convivir con estas tecnologías, pero deben configurarse con cuidado. Páginas personalizadas por usuario, carrito, checkout y sesiones no deben servirse como si fueran folletos estáticos.

OPcache de PHP

OPcache almacena bytecode PHP en memoria. Es excelente para rendimiento, pero tras actualizar módulos, overrides o clases, puede conservar versiones antiguas durante un tiempo si la configuración del servidor no valida cambios con frecuencia.

Soluciones habituales:

• Reiniciar PHP-FPM desde el panel del hosting, si existe esa opción.
• Usar una función de purga OPcache proporcionada por el proveedor.
• Solicitar al hosting que reinicie el servicio PHP.
• Verificar valores como opcache.validate_timestamps y opcache.revalidate_freq en entornos administrados por desarrolladores.

Método profesional para limpiar caché y resolver problemas de diseño 🧪

Cuando una tienda está en producción, improvisar es caro. Mejor seguir una secuencia. Fría, metódica, casi aburrida. Lo aburrido, en mantenimiento web, suele ser una virtud subestimada.

Secuencia recomendada

1. Activa modo mantenimiento si el cambio puede afectar a clientes.
2. Haz copia de seguridad o confirma un punto de restauración reciente.
3. Desactiva temporalmente CCC para CSS y JavaScript.
4. Configura Smarty para recompilar plantillas cuando los archivos cambien.
5. Limpia caché desde el back office.
6. Vacía manualmente var/cache/prod si usas PrestaShop 1.7, 8 o 9 y el problema continúa.
7. Pulsa recarga forzada en el navegador.
8. Purge CDN si usas Cloudflare u otro proxy.
9. Limpia caché del servidor si hay LiteSpeed, Varnish o FastCGI cache.
10. Revisa consola y red en DevTools para confirmar qué archivos se están cargando.
11. Reactiva optimizaciones una por una, comprobando el diseño después de cada cambio.

Matriz rápida de diagnóstico

Permisos correctos después de limpiar caché

Después de borrar caché manualmente, PrestaShop debe poder regenerar archivos. Si el servidor no tiene permisos de escritura, aparecerán errores 500, pantallas blancas o mensajes de “permission denied”. Y ahí la tienda deja de parecer una tienda para parecer un acertijo medieval.

Como regla general, evita permisos 777 salvo indicación muy controlada y temporal del hosting. Es el equivalente digital a dejar la puerta abierta con un cartel que dice “probablemente no pase nada”.

Configuraciones frecuentes:

• Directorios: 755 o 775, según usuario y grupo del servidor.
• Archivos: 644 o 664.
• Propietario: debe coincidir con el usuario que ejecuta PHP o pertenecer a un grupo con permisos adecuados.

Carpetas que suelen requerir escritura en PrestaShop:

• var/
• var/cache/
• img/
• log/ o var/logs/, según versión
• themes/tu_tema/assets/cache/, si tu tema genera assets allí
• modules/, durante instalación o actualización de módulos

Buenas prácticas para evitar que el problema vuelva

Limpiar caché resuelve el síntoma, pero no siempre la causa. Si los problemas de diseño se repiten, conviene ordenar el flujo de trabajo.

Usa versionado de assets

Cuando cambies archivos CSS o JS, usa versiones en la URL si tu tema lo permite. Por ejemplo, pasar de theme.css?v=12 a theme.css?v=13 obliga al navegador y a la CDN a pedir una versión nueva.

No edites directamente archivos del tema base

Si el tema recibe actualizaciones, tus cambios pueden perderse. Usa un tema hijo cuando sea viable o mantén un sistema claro de overrides. El orden es humilde, pero salva tardes enteras.

Documenta cada cambio

Anota qué archivo tocaste, qué módulo modificaste y qué caché limpiaste. No hace falta escribir una novela rusa; basta con un registro sobrio. Cuando algo falle dentro de dos meses, agradecerás esa migaja de memoria.

Trabaja en staging

Una copia de pruebas permite activar debug, desactivar caché y romper cosas sin que un cliente descubra que el botón de comprar ha decidido emigrar al pie de página.

Activa optimizaciones solo al final

Primero estabilidad, luego velocidad. Primero diseño correcto, luego minificación. Primero la casa en pie, después las cortinas.

Configuración razonable en producción: Smarty recompilando solo si hay cambios, caché activada, CCC probado cuidadosamente, CDN configurada con reglas seguras y purgas controladas tras despliegues.

Errores frecuentes al limpiar caché en PrestaShop

• Borrar carpetas equivocadas: elimina únicamente archivos generados o rutas de caché conocidas.
• No limpiar la CDN: PrestaShop cambia, pero Cloudflare sigue sirviendo el pasado con puntualidad suiza.
• Dejar forzar compilación activado: útil en desarrollo, innecesario y costoso en producción.
• Confundir caché con bug de CSS: si tras limpiar todo el diseño sigue roto, quizá el problema sea el código.
• No revisar DevTools: la pestaña Network dice la verdad con una frialdad admirable.
• Activar todas las optimizaciones a la vez: si algo se rompe, no sabrás cuál fue la causa.
• Ignorar permisos: después de limpiar caché por SSH, el servidor puede no poder regenerarla.

Checklist final para limpiar caché avanzada de PrestaShop ✅

1. Hacer copia de seguridad o trabajar en staging.
2. Poner la tienda en mantenimiento si el cambio es sensible.
3. Desactivar temporalmente CCC de CSS y JavaScript.
4. Configurar Smarty para recompilar plantillas modificadas.
5. Limpiar caché desde Parámetros avanzados > Rendimiento.
6. Vaciar var/cache/prod y var/cache/dev si es necesario.
7. En PrestaShop 1.6, revisar cache/smarty/compile y cache/smarty/cache.
8. Limpiar caché del tema si genera assets propios.
9. Purgar caché del navegador, servidor y CDN.
10. Revisar consola y red en DevTools.
11. Reactivar optimizaciones una a una.
12. Comprobar escritorio, móvil, carrito y checkout.

Preguntas frecuentes sobre caché avanzada en PrestaShop

¿Limpiar la caché de PrestaShop borra productos o pedidos?

No. Limpiar caché no borra productos, pedidos, clientes ni configuraciones de la base de datos. Elimina archivos temporales generados para mejorar el rendimiento. Aun así, antes de una limpieza manual avanzada conviene tener copia de seguridad.

¿Por qué mi CSS no cambia aunque haya limpiado la caché?

Puede deberse a caché del navegador, CDN, CCC, caché del servidor o a que estás editando un archivo que no es el que realmente carga el tema. Abre DevTools, revisa la pestaña Network y confirma la ruta exacta del CSS cargado.

¿Es seguro borrar var/cache/prod?

En PrestaShop 1.7, 8 y 9, el contenido de var/cache/prod es regenerable. Es una práctica habitual vaciarlo cuando hay problemas de caché. La cautela está en no borrar rutas equivocadas y en revisar permisos después.

¿Debo dejar CCC activado?

En producción, CCC puede mejorar el rendimiento, pero solo si no rompe el diseño ni los scripts. Lo recomendable es activarlo de forma controlada, probar CSS y JavaScript por separado, y comprobar páginas críticas como home, categoría, producto, carrito y checkout.

¿Qué hago si aparece un error 500 después de limpiar caché?

Revisa los logs de PrestaShop y del servidor. Activa temporalmente el modo debug si puedes acceder al back office. Las causas habituales son permisos incorrectos, incompatibilidad de módulos, overrides antiguos o errores PHP que antes estaban ocultos.

¿Cada cuánto debo limpiar la caché?

No hace falta limpiarla por rutina diaria. Debes hacerlo después de cambios en tema, módulos, plantillas, traducciones, configuración de rendimiento, actualización de PrestaShop o despliegues de CSS y JavaScript. Limpiar por limpiar es una liturgia simpática, pero no siempre útil.

Para cerrar: la caché como aliada, no como enemiga

La caché de PrestaShop no es un monstruo. Es más bien un perro guardián demasiado aplicado: protege la velocidad de la tienda, pero a veces no distingue entre un visitante y el propio dueño intentando entrar con llaves nuevas.

Limpiarla bien exige método. Primero PrestaShop, luego Smarty, después CCC, más tarde servidor, navegador y CDN. De lo cercano a lo lejano. De lo visible a lo oculto. Esa es la diferencia entre resolver un problema de diseño en quince minutos y pasar una tarde entera mirando un botón que se niega a cambiar de color.

Una tienda online rápida vende mejor, pero una tienda rota no vende nada. Ahí está la antítesis que conviene recordar: rendimiento sin control es fragilidad; diseño sin caché es lentitud. Entre ambos extremos está el oficio. Y, por fortuna, también está el botón de limpiar caché.