Cambiar el color de un botón en PrestaShop: usa custom.css en vez de editar theme.css

Dónde añadir el color para que no desaparezca

En el custom.css del tema activo y, con un tema comprado, a ser posible en un tema hijo. Antes de abrir ningún archivo, mira los ajustes del tema en el panel. Muchos temas comprados tienen su propio módulo de configuración con una selección de colores para botones y encabezados. En ese caso el cambio lleva unos clics y no necesita CSS. El tema Classic no tiene esos ajustes. Cada sitio donde puedes hacer el cambio tiene consecuencias distintas.

El orden en que se cargan las hojas de estilos se describe en la documentación sobre la gestión de recursos del tema. Si ya te han desaparecido cambios del tema después de una actualización, lee qué hacer cuando una actualización del tema ha borrado tus cambios.

Cómo cambiar el color de un botón paso a paso

Necesitas acceso a los archivos del tema por FTP o con el gestor de archivos de tu hosting.

1. Abre una página de producto y mira la clase del botón con las herramientas del navegador (clic derecho, Inspeccionar).
2. Abre el archivo assets/css/custom.css en la carpeta del tema activo.
3. Añade una regla para el botón y otra aparte para el estado al pasar el ratón.
4. Guarda el archivo, haciendo antes una copia.
5. Vacía la caché en Parámetros avanzados > Rendimiento.
6. Revisa la página de producto en una ventana privada y en el móvil.

En el tema Classic, el botón de añadir al carrito tiene la clase add-to-cart. La regla puede ser así:

.product-add-to-cart .add-to-cart {
  background-color: #2e7d32;
  color: #ffffff;
}
.product-add-to-cart .add-to-cart:hover {
  background-color: #1b5e20;
}

El estado al pasar el ratón lo describe MDN en el selector :hover. Los móviles no lo tienen, así que el color base tiene que funcionar por sí solo.

Cómo cambiar los colores de otros elementos de la tienda

Igual, con una regla en custom.css, pero con otra clase. Abajo tienes clases del tema Classic. En un tema comprado los nombres pueden ser distintos, así que compruébalos siempre con las herramientas del navegador.

Cambia un elemento cada vez y revisa la página después de cada cambio. Varios cambios a la vez hacen difícil encontrar el que ha roto algo. Añade también un comentario breve en el archivo diciendo qué cambiaste y cuándo. Dentro de seis meses será más fácil encontrar la regla que hay que arreglar.

Un cambio completo de la paleta del tema, por ejemplo todos los tonos de verde a la vez, suele ser un trabajo en los archivos fuente del tema y una recompilación. Normalmente lo hace un desarrollador o el autor del tema.

Cómo elegir un color que se lea bien

Comprueba el contraste entre el texto del botón y su fondo antes de guardar el cambio. Para texto normal, las pautas de accesibilidad recomiendan un contraste de al menos 4,5 a 1, como explica el W3C sobre el criterio de contraste. Puedes comprobar un color en WebAIM Contrast Checker introduciendo los códigos del fondo y del texto.

Domingo, 20:30, y estás cambiando el verde en el archivo por tercera vez, vaciando la caché y recargando la página. El color vivo de la marca queda bien en el logotipo, pero el texto blanco encima se pierde. Normalmente ayuda un tono más oscuro del mismo color.

¿Por qué no se ve el color nuevo?

Casi siempre por la caché o por una regla demasiado débil. Comprueba por orden:

• ¿Has vaciado la caché en el panel y recargado la página saltándote la caché del navegador?
• ¿Has editado el custom.css del tema activo, y no el del tema padre?
• ¿La regla del tema es más específica que la tuya? Entonces añade una clase padre a tu selector.

Hablamos más de las capas de caché en el artículo los cambios no se ven en PrestaShop.

Cómo cambiar el color del botón con el chat

Le das el color y el botón. Tu chat (Claude o ChatGPT) encuentra la hoja de estilos, te muestra la regla que va a añadir y la guarda después de tu aprobación, con una copia del archivo.