Para personalizar el diseño de su sitio más allá de lo que permiten los ajustes del back office, puede editar el CSS de su tema. Este artículo le guiará paso a paso.

1. acceda a los archivos de su sitio

Puede recuperar los archivos de su sitio a través de su FTP (consulte el artículo Conexión al servidor de su tienda a través de FTP ), o a través de lainterfaz de su alojamiento.

Ejemplo con el proveedor de alojamiento IONOS

Vaya a su interfaz de administración

IMG-perso-css 1.png

Haga clic en "Utilizar espacio web" en la sección "Espacio web":

IMG-perso-css 2.png

Esto le llevará a la lista de archivos del servidor

IMG-perso-css 3.png

2. identifique el archivo CSS que desea editar

En la lista de archivos de su tienda, vaya a la carpeta CSS de su tema: '/themes/your_theme_name/assets/CSS'.
En esta carpeta, puede acceder a la lista de archivos CSS de su tema.
Encontrará un archivo 'theme.css', así como un archivo 'custom.css' para la mayoría de los temas. Lo mejor es abrir el archivo 'custom.css'.
Si no existe en la carpeta CSS, abra el archivo 'theme.css' y vaya al final del archivo para añadir sus instrucciones.

3. abra el archivo con un editor de código

Le recomendamos que instale un editor de código para realizar sus cambios. Descubra cómo en el artículo Instalar un editor de código en su ordenador.

4. realice los cambios

Puede hacer sus adiciones/modificaciones CSS en el archivo abierto.

Una vez que haya guardado los cambios y los haya enviado al servidor, vuelva a su back office y borre la caché yendo a 'Ajustes avanzados/Rendimiento'.

Una vez que se haya borrado la memoria caché, podrá ir a la oficina principal y ver qué cambios se han realizado.

💡 Si desea aprender los conceptos básicos de CSS, también tenemos un artículo que le ayudará.

Preguntas más frecuentes

¿Qué debo hacer si no se visualizan mis cambios?

Asegúrese de haber borrado la caché de PrestaShop después de añadir o modificar elcustom.css.
Compruebe que elcustom.css se carga correctamente inspeccionando las fuentes a través del navegador (F12 o botón derecho del ratón > Inspeccionar > pestaña Fuentes).
Asegúrese de haber guardado los cambios en su editor de texto/código y de haberlos enviado al servidor haciendo clic en sí en la ventana de FIleZilla que se abre.