Esquemas de Colores Phoenix

En este artículo te explicamos la tabla de colores que podrás implementar de manera automática con colores preestablecidos o bien manipulando tú mismo los colores que deseas implementar.

Cabe mencionar que esta tabla modifica no solamente en un único lugar o espacio de la tienda virtual, sino afecta varios lugares al mismo tiempo. A la hora de cambiar colores, te sugerimos que navegues en toda la tienda realizando todo el recorrido de compra, para verificar que todo sea legible a tus clientes. 

Para personalizar los CSS elegimos la opción Personalizado.

Vamos a trabajar con el  tema 1 de Phoenix, lo puedes visualizar en https://bolsosycarterasphoenix01.minidux.com/

La tabla de color se divide siempre en

1. Color base: El color base es el elemento que vemos en primer instancia

2. Sobre elemento (hover): es el color que aparece cuando el cursor pasa por encima del elemento.

3. Enfoque elemento: Es cuando enfocamos el elemento haciendo click y pasando el cursos encima del elemento.

Color Primario:

Para el color primario esto se aplica, en los botones de  ver más en los productos, al botón de agregar al carrito, y los botones de los atributos, adicionalmente también en la página de carrito.

Color Secundario:

El color secundario en este caso se aplica únicamente en los íconos de redes sociales que se muestran en la página de carrito. En otros temas phoenix, aplica al footer y/o ideales. 

Color Éxito:

Para el color éxito se aplica, en los botones de  Agregar al Carrito en los productos que se muestran en las categorías, algunos productos en la página de inicio y en la Página de Carrito propiamente en el botón de Finalizar Compra

Tambien se ve reflejado en el mensaje que aparece dentro de la caja de información de oferta del día u oferta flash.

Color Advertencia y Error:

El color advertencia se aplica a los íconos de borrar productos del carrito, a como se muestra en la imagen. Tambien están los colores Error, que en caso de un resultado fállido al cliente o usuario, estos son los css que se aplicarían. Se sugieren tonos que se vean fuertes para llamar la atención de la persona a nivel visual.  Las etiquetas de Oferta Flash y Oferta del Día también llevarán estos CSS 

 

Color Info:

El color info se aplica a los nombres de los productos y al precio.  Tanto en la página principal como en la página de categorías. y en el color del ícono que muestra  la cantidad de productos agregados en el carrito, en la esquina superior derecha.

Color Claro:

El color claro se refleja en las páginas informativas, en el fondo del contenido. 

Color Oscuro:

El color oscuro ( en este caso lo quisimos poner  morado)  se aplica principalmente a dos espacios. El primero a la hora de que un cliente vaya a registrarse o ingresar con su usuario, en el botón de ENTRAR.

En la ventana desplegable de carrito de compras, la cual se mira en el extremo derecho del monitor.  El CSS se aplica tanto al texto como al botón de finalizar compra. y ver carrito de compras. 

Adicionalmente también se ve aplicado a los íconos principales en el menú, en el extremo derecho del monitor.

Personalizar colores Menú y menú superior (header):

Al personalizar esta paleta de color,  afectamos el color de fondo y texto que se ubica en el menú ubicado en el header y parte superior de la página y adicionalmente en el menú (opciones) que muestra el botón de categorías, donde se muestran las opciones del catálogo.

Recomendación: Siempre manejar un fondo muy claro, y un texto oscuro. Para que pueda visualizarse correctamente para los usuarios.

 

Personalizar colores pie del sitio (footer):

Al personalizar esta paleta de color,  afectamos el color de fondo y texto que se ubica en el extremo inferior de nuestra tienda virtual, lo que se conoce como footer.

 

Iconografía:

Ahora es posible pesonalizar los íconos de nuestra tienda virtual como la casita de home, el perfil de usuario, el carrito de compras entre otros.