Error CSS/JS PrestaShop no carga | Solución rápida

¿Por qué tu PrestaShop se ve sin estilos y qué significa este error?

Si estás leyendo esto, probablemente te ha pasado: entras a tu tienda online y de repente todo se ve en blanco y negro, sin imágenes, sin colores y con un formato extraño. Es como si la página hubiera perdido su "maquillaje". Este problema es más común de lo que parece y tiene un nombre técnico: PrestaShop no carga CSS/JS.

No te preocupes, no eres el único. Miles de comercios han pasado por esto, y la buena noticia es que tiene solución en la mayoría de los casos, incluso si no eres un experto en programación.

En este artículo, te voy a explicar paso a paso, y con un lenguaje muy sencillo, cómo arreglar el error PrestaShop JS error y recuperar los estilos de tu tienda. Vamos a ir desde lo más básico hasta lo más técnico, para que puedas diagnosticar y solucionar el problema por ti mismo.

Primero, entendamos qué son el CSS y el JS. El CSS (Hojas de Estilo en Cascada) es el encargado de darle color, forma y diseño a tu web. El JS (JavaScript) es el que permite las funciones interactivas, como los carritos de compra desplegables o los sliders de imágenes. Si estos dos elementos no se cargan, tu tienda se convierte en una página "plana" y sin vida.

Causas comunes del problema "PrestaShop no carga CSS/JS"

Antes de lanzarnos a arreglar nada, es importante saber por qué ocurre este fallo. Las causas pueden ser varias, y casi todas tienen que ver con la configuración del servidor o de la propia tienda.

1. Permisos de archivos incorrectos

Cada archivo en tu servidor tiene unos "permisos" que indican quién puede leerlos, escribirlos o ejecutarlos. Si los permisos de las carpetas de tu PrestaShop se cambian por error (por ejemplo, a 644 cuando deberían ser 755), el servidor no podrá acceder a los archivos CSS y JS para mostrarlos.

2. Errores en la configuración de la tienda

PrestaShop tiene una opción para "combinar" y "minificar" los archivos CSS y JS. Esto sirve para que la web cargue más rápido, pero a veces esta función falla y genera un PrestaShop JS error o rompe los estilos. Si has activado esta opción recientemente, es muy probable que el problema venga de ahí.

3. Problemas con la caché

La caché es como una "memoria temporal" que guarda versiones de tu web para que cargue más rápido. Si la caché de PrestaShop (o la del navegador) está corrupta o desactualizada, puede mostrar una versión rota de tu tienda.

4. Conflictos con módulos o el tema

A veces, un módulo que has instalado o una actualización del tema pueden entrar en conflicto con los archivos CSS/JS. Esto es especialmente común si el módulo no es compatible con tu versión de PrestaShop.

5. Problemas con el servidor (mod_rewrite, CDN, etc.)

Si tu servidor no tiene activado el módulo mod_rewrite de Apache, las URLs de los archivos CSS/JS pueden no funcionar correctamente. También puede pasar si tienes un CDN (Red de Distribución de Contenidos) mal configurado que está bloqueando la entrega de estos archivos.

Soluciones paso a paso para arreglar los estilos de PrestaShop

Ahora sí, vamos a la acción. Te presento una serie de soluciones ordenadas de la más sencilla a la más compleja. Te recomiendo que las pruebes en este orden, ya que las primeras suelen resolver el problema en el 80% de los casos.

Paso 1: Fuerza la regeneración de la caché de PrestaShop

Este es el primer paso y el más sencillo. A veces, simplemente forzar a PrestaShop a "olvidar" la caché antigua y generar una nueva soluciona el problema.

Accede al Panel de Administración de tu PrestaShop.
Ve al menú Parámetros avanzados > Rendimiento.
En la sección Caché, verás un selector. Si está en "Sí", cámbialo a "No" y guarda los cambios. Si está en "No", actívalo temporalmente y luego vuelve a desactivarlo. Esto fuerzas a que se regenere.
Un poco más abajo, en la sección Combinar archivos JavaScript y Combinar archivos CSS, desactiva ambas opciones (ponlas en "No"). Guarda los cambios.
Ahora, ve al menú Parámetros avanzados > Información y haz clic en el botón Vaciar la caché (suele estar en la parte superior derecha).

[TIP] Después de este paso, recarga tu tienda en una ventana de incógnito. A veces la caché de tu navegador también juega en contra. Para abrir una ventana de incógnito en Chrome, usa Ctrl + Shift + N (Windows) o Cmd + Shift + N (Mac).

Paso 2: Comprueba los permisos de archivos y carpetas

Si el paso anterior no funcionó, es hora de revisar los permisos. Necesitarás acceder a tu servidor a través de un Panel de Control (como cPanel) o un Administrador de Archivos.

Entra al administrador de archivos de tu hosting.
Navega hasta la carpeta raíz donde está instalado PrestaShop (normalmente public_html o www).
Busca las carpetas /themes, /modules y /img. Haz clic derecho sobre la carpeta /themes y selecciona "Cambiar permisos" o "Permisos".
Establece el valor en 755 para las carpetas y 644 para los archivos. Asegúrate de marcar la casilla "Recursivo" o "Aplicar a subcarpetas y archivos" para que se aplique a todo el contenido.
Haz lo mismo con las carpetas /modules e /img.

[WARNING] Cambiar los permisos a 777 (todos los permisos) es una mala práctica de seguridad. Solo usa 755 para carpetas y 644 para archivos. Si usas Syspanel (el panel de control que tiene el puerto de acceso 2106), el proceso es muy similar: busca el gestor de archivos y sigue los mismos pasos.

Paso 3: Desactiva temporalmente el SEO y las URLs amigables

Las URLs amigables son geniales para el SEO, pero pueden ser la causa del problema si el servidor no está bien configurado.

Ve a Parámetros avanzados > SEO y URLs.
En la opción URLs amigables, desactívala (ponla en "No").
Guarda los cambios y recarga tu tienda.
Si esto funciona, significa que el problema está en la configuración de mod_rewrite. Puedes intentar reactivar las URLs amigables, pero primero asegúrate de que el archivo .htaccess esté correctamente generado.

Para regenerar el .htaccess:

Ve a Parámetros avanzados > SEO y URLs.
Haz clic en el botón Guardar (sin cambiar nada). Esto fuerza a PrestaShop a regenerar el archivo .htaccess.

Paso 4: Revisa el archivo .htaccess

El archivo .htaccess es un archivo de configuración oculto que controla el comportamiento del servidor. Si está dañado, puede bloquear la carga de CSS/JS.

Con el Administrador de Archivos de tu hosting, asegúrate de mostrar los archivos ocultos (suele haber una opción llamada "Mostrar archivos ocultos").
Busca el archivo .htaccess en la raíz de tu PrestaShop.
Descarga una copia de seguridad a tu ordenador.
Ahora, elimina el archivo .htaccess del servidor.
Ve a tu Panel de Administración de PrestaShop y entra en Parámetros avanzados > SEO y URLs. Haz clic en Guardar para que PrestaShop genere un nuevo .htaccess desde cero.

[INFO] Si el archivo .htaccess está bien, este paso no hará nada. Pero si estaba corrupto, tu tienda volverá a la vida inmediatamente.

Paso 5: Desactiva todos los módulos no esenciales

Un módulo conflictivo es una causa muy común del error PrestaShop no carga CSS. Para probar esto:

Ve a Módulos > Gestor de módulos.
En la parte superior, verás un botón que dice "Desinstalar" o un menú desplegable. Busca la opción para desactivar todos los módulos de una vez. Si no la encuentras, tendrás que hacerlo uno por uno.
Desactiva todos los módulos que no sean de pago o que no sean esenciales (como los de pago, envío, etc.).
Recarga tu tienda.

Si el problema se soluciona, sabrás que uno de los módulos desactivados es el culpable. Actívalos de uno en uno hasta encontrar al "malo".

Paso 6: Cambia temporalmente el tema

A veces, el problema está en el tema que usas. Para descartarlo:

Ve a Diseño > Tema y logotipo.
En la lista de temas, busca el tema por defecto (suele llamarse "classic" o "default").
Cámbialo temporalmente a ese tema y guarda los cambios.
Recarga tu tienda.

[TIP] Si con el tema por defecto funciona, el problema es de tu tema. Contacta con el desarrollador del tema para que te ayude a arreglarlo. No te olvides de volver a cambiar a tu tema original después de la prueba.

Paso 7: Aumenta los límites de memoria de PHP

Si los archivos CSS/JS son muy grandes, el servidor puede quedarse sin memoria para procesarlos. Esto es especialmente común en tiendas con muchos productos o módulos.

Accede a tu administrador de archivos y busca el archivo config/config.inc.php en la raíz de PrestaShop.
Descarga una copia de seguridad de este archivo antes de editarlo.
Edita el archivo con un editor de texto (como el Bloc de notas o Sublime Text).
Busca la línea que dice ini_set('memory_limit', '128M'); y cámbiala a ini_set('memory_limit', '256M'); o incluso 512M.
Guarda el archivo y súbelo de vuelta al servidor.

[WARNING] Si no te sientes cómodo editando archivos de configuración, es mejor que contactes con tu proveedor de hosting. Ellos pueden hacer este cambio por ti de forma segura. Si usas Syspanel, recuerda que el acceso es por el puerto 2106, y desde el gestor de archivos puedes editar este archivo fácilmente.

Paso 8: Revisa la consola del navegador para errores específicos

Este paso es un poco más técnico, pero te dará información muy valiosa.

Abre tu tienda en el navegador (Chrome o Firefox).
Haz clic derecho en cualquier parte de la página y selecciona "Inspeccionar".
Se abrirá un panel. Ve a la pestaña "Consola" o "Console".
Recarga la página y observa los errores en rojo. Busca mensajes que mencionen "CSS", "JS", "404", "500" o "Failed to load resource".

Estos errores te dirán exactamente qué archivo no se está cargando y por qué. Por ejemplo, si ves un error 404 Not Found en un archivo .css, significa que la ruta al archivo es incorrecta.

Conclusión y prevención

Como has visto, el error de PrestaShop no carga CSS/JS puede tener múltiples orígenes, pero la mayoría de las veces se soluciona con los primeros pasos (regenerar caché y revisar permisos). Es importante que vayas probando las soluciones una a una y compruebes después de cada una.

Para evitar que esto vuelva a pasar, te recomiendo:

Haz copias de seguridad de tu tienda con regularidad (archivos y base de datos).
No instales módulos de fuentes no confiables.
Mantén PrestaShop y sus módulos siempre actualizados.
No cambies los permisos de los archivos a menos que sepas lo que estás haciendo.

Espero que esta guía te haya sido de gran ayuda. Recuerda que si te sientes abrumado, siempre puedes contactar con el soporte técnico de tu hosting o con un desarrollador especializado en PrestaShop. ¡Tu tienda online estará luciendo perfecta en poco tiempo!

Preguntas Frecuentes (FAQ)

¿Por qué mi PrestaShop se ve sin CSS pero el JS funciona?

Esto suele indicar un problema específico con los archivos CSS, como permisos incorrectos en la carpeta /themes o un error en el archivo .htaccess que bloquea las URLs de los estilos. Revisa los pasos 2 y 4 de esta guía.

¿Qué hago si después de todos los pasos mi PrestaShop sigue sin cargar los estilos?

Si has probado todos los pasos sin éxito, es muy probable que el problema sea a nivel de servidor (configuración de Apache, Nginx o un firewall). Contacta con tu proveedor de hosting y muéstrales este artículo. Ellos podrán revisar los logs del servidor para encontrar la causa raíz.

¿Puede un plugin de caché de terceros causar este problema?

Sí, absolutamente. Si usas un módulo de caché de terceros (como LiteSpeed Cache o un CDN), es posible que esté sirviendo una versión corrupta de tus archivos CSS/JS. Asegúrate de purgar la caché de ese módulo y, si es necesario, desactivarlo temporalmente para probar.

¿Es peligroso cambiar los permisos de archivos a 777?

Sí, es una muy mala práctica. Los permisos 777 permiten que cualquier usuario del servidor pueda leer, escribir y ejecutar esos archivos, lo que es un grave riesgo de seguridad. Siempre usa 755 para carpetas y 644 para archivos.

¿El error de CSS/JS afecta a mi posicionamiento SEO?

Sí, puede afectarlo. Si tu web tarda mucho en cargar o se ve rota, Google puede interpretarlo como una mala experiencia de usuario y penalizarte en los resultados de búsqueda. Además, si los archivos CSS/JS no se cargan, es posible que el contenido no se renderice correctamente para los bots de Google. Por eso es importante arreglar estilos PrestaShop lo antes posible.

Espero que esta guía completa te haya ayudado a resolver el problema. ¡Mucha suerte con tu tienda!