Cambiar color tipografía de botón "agregar al carrito" en página de producto tema Dawn

[Mikamika]

Hola!
me gustaría cambiar el color del botón "agregar al carrito" y el color de la tipografía pero solo en la página de producto.

pero que no sea desde ajustes del tema, necesitaría sea con código porque al hacerlo desde configuración del tema, me modifica todo el tema 😞

me gustaría el botón sea color negro y la tipografía en blanco.
muchas gracias! 🙂

[Teo · Accepted solution]

Hola de nuevo, @Mikamika:

Muchas gracias por escribirnos. Entiendo que te gustaría poder editar el color del botón de "añadir al carrito" que aparece en la página de productos de tu tienda. Sin embargo, prefieres no hacerlo desde el editor del tema, para evitar que otras secciones también cambien de color, ¿no es así?

A modo de contexto, me alegra informarte de que es posible realizar este cambio a través del código de tu tienda, como comentas. Tras llevar a cabo una búsqueda en nuestros foros de la Comunidad en inglés, he encontrado esta respuesta con la solución a implementar. Además, cabe mencionar que esta es específica para el tema Dawn de Shopify. Te comparto el código:

.product-form__submit {
    background: #000000 !important;
    color: #ffffff !important;
}

Dicho esto, para completar esta acción, tendrás que copiar y pegar este código que te comparto en tu tema. Como te comentaba en otros hilos, para acceder al mismo, puedes dirigirte a la sección Tienda online > Temas > Tema actual > Editar código. Una vez que te encuentres en este apartado del panel de control de tu tienda, dirígete a la carpeta Assets > Base.css y procede a copiar el código anterior en la última línea de esta sección. Una vez hecho esto, guarda los cambios.

También como te comentaba otras conversaciones que hemos mantenido en la Comunidad, antes de realizar cualquier cambio al código del tema de tu tienda, te recomendaría duplicar tu tema a modo de copia de seguridad. Así, podrás revertir o deshacer cualquier cambio en cualquier momento. De igual forma, si no te sientes cómodo haciendo cambios de código, siempre puedes optar por contratar a un experto de Shopify para que lleve a cabo esta personalización por ti.

Mientras tanto, ¿existe un motivo específico por el cual te gustaría poder editar el color del botón de "añadir al carrito"? ¿Has podido publicar ya tu tienda de cara a los clientes? Si es así, ¿has podido usar la herramienta de informes y estadísticas de Shopify para evaluar la información de la tienda? ¿Cómo van las estadísticas de sesiones, conversiones, ventas, etc.?

[OSCARCOV]

Hola

Ya hice esos pasos y me funciono para ver la pagina desde una computadora, pero cuando es de un celular, no sale el color del boton, como puedo hacerlo para que salga también desde el celular?

[Teo]

Hola, @OSCARCOV:

Gracias por la respuesta. Entiendo por tu mensaje que has introducido el código CSS que comparto en la respuesta anterior para aplicar cambios al color del botón de "agregar al carrito". Sin embargo, este código no está implementando los cambios en la versión móvil de tu tienda, ¿cierto? Será un placer ayudar.

A modo de contexto, el código que comparto tiene efectos generales. Sin embargo, es posible adaptarlo para aplicar cambios y personalizaciones de estilo también a la versión móvil de la tienda. En este caso, puedes pegar el código que te dejo a continuación siguiendo los pasos que comentaba en la respuesta anterior:

@media only screen and (max-width: 768px) {
 .product-form__submit {
   background: black !important;
   color: #ffffff !important; }
}

Nota: cabe tener en cuenta que, recientemente, Shopify ha creado una nueva herramienta para añadir código CSS personalizado directamente en el tema. Si lo deseas, puedes hacer uso de esta nueva función para no tener que editar el código de la plantilla de tu tienda. Puedes acceder a esta herramienta a través de la sección Tienda online > Temas > Personalizar. En la sección de la izquierda, haz clic en el Icono de engranaje. Hecho esto, localiza la sección específica de CSS personalizado para implementar los cambios.

Dime, ¿podrías confirmarme si con este nuevo código, además del anterior, el botón aparece con el color que deseas en ambas versiones de la tienda? Esto es, tanto en versión de computadora, como en versión de ordenador. Mientras revisas esta cuestión, me pregunto cómo está siendo tu experiencia con Shopify hasta el momento. ¿Cómo va el resto de cuestiones con la configuración de tu tienda online?

[OSCARCOV]

Hola Teo, con la nuev actualizacion de Dawn,  no me deja aplicar el cambio de color del boton de agregar al carrito, le puso los pasos de antes y no surte efecto con la nueva actualizacion

[10BuL10]

Y para cambiar ese mismo botón, pero en la página de la colección de este mismo tema?