Solucionar problemas de CSS y JS en PrestaShop: Guía rápida

¿Por qué tu PrestaShop se ve “en blanco” o sin estilos?

Es una de las situaciones más frustrantes: entras a tu tienda online y, en lugar de ver tu logotipo, los colores de tu marca y un diseño cuidado, ves una página con texto plano, enlaces sin formato y cajas descolocadas. O peor aún, una pantalla completamente en blanco.

Este problema es más común de lo que parece y suele estar relacionado con que PrestaShop no carga CSS/JS. El CSS (Hojas de Estilo en Cascada) es lo que da color, tamaño y posición a los elementos. El JS (JavaScript) es lo que hace que los menús se desplieguen, los sliders funcionen y los carritos se actualicen sin recargar la página.

Si ambos fallan, tu tienda pierde toda su funcionalidad visual. Pero no te preocupes: en esta guía extensa y paso a paso, vamos a arreglar los errores CSS PrestaShop y los problemas de JavaScript, trabajando directamente desde tu panel de control cPanel. No necesitas ser un experto en programación, solo seguir las instrucciones con calma.

Entendiendo el problema: ¿Qué significa que “no carga” CSS o JS?

Antes de lanzarnos a la solución, es vital entender qué está pasando. Cuando tu navegador pide la página de tu tienda, el servidor le envía el código HTML. Dentro de ese código, hay instrucciones que dicen: “oye, ve a buscar este archivo CSS a esta ruta” o “ejecuta este JavaScript desde esta URL”.

Si el servidor no encuentra esos archivos, o si los encuentra pero con errores, el navegador no puede aplicarlos. El resultado es una página “fea” o rota. Las causas más comunes son:

Permisos de archivos incorrectos: El servidor no tiene permiso para leer los archivos.
Rutas absolutas rotas: PrestaShop guarda la URL de tu tienda en la base de datos. Si la cambiaste (de dominio o de carpeta) y no actualizaste todo, las rutas apuntan a lugares inexistentes.
Caché corrupta: PrestaShop guarda versiones “comprimidas” de tus archivos. Si esa caché se daña, se generan errores.
Errores en archivos .htaccess: Este archivo de configuración es crucial para las URLs amigables y la compresión. Si tiene una línea incorrecta, puede bloquear la carga de recursos.
Problemas de SSL/HTTPS: Si tienes un certificado SSL y tu tienda intenta cargar recursos desde la versión http:// (no segura), el navegador los bloquea.

Vamos a atacar cada uno de estos frentes de forma metódica.

Requisitos previos antes de tocar nada

Para realizar este tutorial necesitas acceso a tu cPanel. Este es el panel de control que te da tu empresa de hosting para gestionar archivos, bases de datos y dominios.

[WARNING]
Antes de hacer cualquier cambio, realiza una copia de seguridad completa de tu tienda. Puedes hacerlo desde el propio cPanel (Zip de la carpeta public_html) y exportando tu base de datos desde phpMyAdmin. Si algo sale mal, podrás restaurar todo en minutos. No lo omitas.

Paso 1: La solución rápida – Regenerar la caché desde el Back Office

A veces, la solución es más simple de lo que crees. PrestaShop tiene su propio sistema de caché que, en ocasiones, se queda “atascado”.

1.1. Accede a tu administración

Entra a tu panel de administración de PrestaShop (normalmente en tudominio.com/admin).

1.2. Limpia los parámetros avanzados

Ve a Parámetros avanzados → Rendimiento.

Aquí verás varias opciones. Busca el botón que dice “Vaciar la caché” o “Limpiar la caché de archivos”. Haz clic en él.

1.3. Desactiva la caché (temporalmente)

En esa misma pantalla, en la sección “Caché”, selecciona “No” para desactivarla. Guarda los cambios.

1.4. Fuerza la compilación de plantillas

En la sección “Plantillas”, busca la opción “Forzar la compilación” y actívala (ponla en Sí). Guarda los cambios.

Ahora vuelve a tu tienda y recarga con Ctrl + F5 (o Cmd + Shift + R en Mac) para forzar la recarga del navegador sin usar caché local.

[TIP]
Si esto funcionó, genial. Pero si el problema persiste, deja la compilación forzada activada por ahora y continúa con los siguientes pasos, que son más técnicos.

Paso 2: Revisión de permisos de archivos y carpetas (La causa #1)

Si los archivos no tienen los permisos adecuados, el servidor no puede “leerlos” y enviarlos al navegador. En cPanel, podemos corregir esto fácilmente.

2.1. Accede al Administrador de Archivos

En tu cPanel, busca el icono “Administrador de Archivos” (File Manager). Entra y navega hasta la carpeta donde está instalada tu tienda. Normalmente es public_html o una subcarpeta dentro de esta.

2.2. Corrige los permisos de las carpetas

Selecciona la carpeta raíz de tu PrestaShop (por ejemplo, public_html). Haz clic derecho sobre ella y selecciona “Permisos”.

En la ventana que aparece, introduce el valor 755 en el campo numérico. Asegúrate de que la casilla “Cambiar archivos y subcarpetas” esté marcada. Haz clic en “Cambiar permisos”.

2.3. Corrige los permisos de los archivos

Ahora, selecciona todos los archivos dentro de esa carpeta (Ctrl + A). Haz clic derecho y selecciona “Permisos”.

Esta vez, introduce el valor 644 y asegúrate de marcar “Cambiar archivos y subcarpetas”. Aplica los cambios.

[INFO]
¿Qué significan estos números? El 644 permite al propietario escribir (modificar) y a todos leer. El 755 permite al propietario escribir y ejecutar, y a todos leer y ejecutar. Son los permisos estándar y seguros para PrestaShop.

Paso 3: Verificar y corregir las URLs en la Base de Datos

Este es un clásico. Si tu tienda solía estar en tudominio.com/tienda y ahora está en tudominio.com, o si cambiaste de dominio, las rutas a los archivos CSS y JS están rotas.

3.1. Entra a phpMyAdmin

Desde cPanel, busca el icono de phpMyAdmin. Selecciona la base de datos de tu PrestaShop (la encontrarás en el archivo parameters.php dentro de la carpeta app/config, pero si no sabes cuál es, mira el nombre en el panel de la izquierda de phpMyAdmin).

3.2. Busca en la tabla de configuración

En la lista de tablas (todas empiezan con ps_ o el prefijo que hayas usado), busca la tabla llamada ps_shop_url. Haz clic en ella.

3.3. Corrige los campos

Verás una fila con campos como domain, domain_ssl, physical_uri. Asegúrate de que:

domain sea tudominio.com (sin http:// ni www).
domain_ssl sea tudominio.com.
physical_uri sea / (si está en la raíz) o /carpeta/ (si está en una subcarpeta).

Si estos no coinciden con tu dominio actual, edítalos y guarda.

3.4. Actualiza la tabla de configuración general

Ahora ve a la tabla ps_configuration. Usa el buscador de la parte superior (SQL) y ejecuta esta consulta:

SELECT * FROM ps_configuration WHERE name LIKE '%PS_SHOP_DOMAIN%' OR name LIKE '%PS_SHOP_URI%';

Esto te mostrará las entradas que guardan las URLs. Actualiza los valores de PS_SHOP_DOMAIN y PS_SHOP_DOMAIN_SSL a tu dominio sin http://, y PS_SHOP_URI a /.

[WARNING]
Ten mucho cuidado al editar la base de datos. Si no te sientes seguro, contacta con tu soporte de hosting. Un error aquí puede romper la tienda por completo.

Paso 4: Regenerar el archivo .htaccess

El archivo .htaccess es el “policía” de tu servidor Apache. Si está corrupto, puede bloquear la entrega de archivos estáticos como CSS y JS.

4.1. Accede al archivo

En el Administrador de Archivos, ve a la raíz de tu PrestaShop. Busca el archivo .htaccess. Es posible que esté oculto. Si no lo ves, en la esquina superior derecha del Administrador de Archivos, activa la opción “Mostrar archivos ocultos” (puede aparecer como un engranaje o un icono de configuración).

4.2. Renómbralo (No lo borres aún)

Haz clic derecho sobre .htaccess y selecciona “Renombrar”. Cámbiale el nombre a .htaccess_old. Esto lo desactiva, pero lo conserva como respaldo.

4.3. Regenera desde el Back Office

Vuelve a tu administración de PrestaShop. Ve a Parámetros avanzados → Herramientas → Generador de .htaccess.

Haz clic en el botón “Generar” (o similar). Esto creará un archivo .htaccess nuevo y limpio.

Vuelve a tu tienda y prueba. Si ahora funciona, el problema era el .htaccess. Puedes borrar el archivo .htaccess_old si todo va bien.

Paso 5: Comprobar la configuración de SSL (HTTPS)

Si tienes un certificado SSL instalado, pero tu tienda intenta cargar recursos por http://, el navegador bloqueará esas peticiones por seguridad.

5.1. Verifica en el Back Office

Ve a Parámetros avanzados → Rendimiento, y en la sección “Configuración de la URL” (o en Parámetros avanzados → General), asegúrate de que la opción “Activar SSL” esté en Sí.

5.2. Fuerza la carga de recursos por HTTPS

En el mismo lugar, activa la opción “Activar SSL en todas las páginas”. Guarda los cambios.

5.3. Revisa el código fuente

Abre tu tienda en el navegador, haz clic derecho y selecciona “Ver código fuente”. Busca una URL de un archivo CSS (termina en .css). Si ves que empieza con http:// en lugar de https://, tienes un problema de “contenido mixto”. La solución es la que hemos hecho en el Paso 3, asegurando que las URLs estén correctas.

Paso 6: Aumentar el límite de memoria de PHP (Para errores de JS)

A veces, el JS no carga porque el servidor se queda sin memoria para procesar la página. Esto es común en tiendas con muchos módulos.

6.1. Edita el archivo php.ini

En el Administrador de Archivos, busca un archivo llamado php.ini en la raíz. Si no existe, créalo.

6.2. Añade o modifica el límite

Dentro del archivo, añade o modifica esta línea:

memory_limit = 256M

Guarda el archivo.

6.3. Alternativa desde cPanel

Si no encuentras php.ini, en cPanel busca la sección “Select PHP Version” o “Configuración de PHP”. Dentro, puedes cambiar el memory_limit desde una interfaz gráfica. Busca la opción y cámbiala a 256M o más.

Paso 7: Desactivar el modo de mantenedor (CCleaner de PrestaShop)

En versiones antiguas de PrestaShop, existe una función llamada “Modo mantenedor” que, si se activa por error, bloquea la carga de recursos. Asegúrate de que tu tienda no esté en modo de mantenimiento.

Ve a Preferencias → Mantenimiento y asegúrate de que el interruptor de “Activar modo mantenimiento” esté en No.

Preguntas Frecuentes (FAQ) sobre errores de CSS/JS en PrestaShop

Para terminar, resolvamos las dudas más comunes que recibimos en soporte.

¿Por qué PrestaShop no carga CSS/JS solo en una página concreta?

Esto suele deberse a un módulo o a un contenido específico de esa página que genera un error de PHP. Revisa los logs de errores en cPanel (carpeta logs o en Métricas de errores). Desactiva los módulos recientemente instalados uno a uno para identificar al culpable.

He seguido todos los pasos y el problema persiste, ¿qué más puedo hacer?

Si has llegado hasta aquí, el problema puede ser más profundo, como un archivo corrupto en la instalación. La solución definitiva es reemplazar los archivos del tema (plantilla) o incluso los archivos del núcleo de PrestaShop. Descarga una copia limpia de la misma versión de PrestaShop desde tu área de cliente y sube los archivos de las carpetas themes y js por FTP, sobrescribiendo los existentes.

¿Puede el hosting ser el culpable de que mi PrestaShop no cargue CSS/JS?

Sí, absolutamente. Un servidor con una configuración de Apache incorrecta, o con módulos como mod_pagespeed mal configurados, puede causar estos errores. Si has probado todo, contacta con tu proveedor de hosting y describe el problema. Pregúntales si hay algún bloqueo en la entrega de archivos estáticos.

¿Qué hago si mi hosting usa Syspanel en lugar de cPanel?

Si tu proveedor usa Syspanel (el antiguo HestiaCP), el proceso es muy similar, pero accederás a los archivos a través del Administrador de Archivos de Syspanel. Recuerda que el puerto de acceso a este panel es el 2106 (por ejemplo, tudominio.com:2106). Los pasos para editar permisos, ver archivos ocultos y acceder a phpMyAdmin son análogos a los de cPanel. La lógica de solución es exactamente la misma.

[INFO]
Resumen rápido: El error de CSS/JS en PrestaShop se soluciona en el 90% de los casos limpiando la caché, comprobando los permisos de archivos (755/644) y regenerando el .htaccess. No te saltes estos pasos.

Con paciencia y siguiendo esta guía, tu tienda volverá a lucir perfecta. Si te has sentido abrumado, respira: es cuestión de ir paso a paso. ¡Mucho ánimo y a por ello!