Esta función está disponible en todos los planes de Goodshuffle Pro.
Cambiar los colores en la Integración de tu sitio web es fácil y te asegura que tu página combine con el resto de tu sitio y tu marca.
Dirígete a la sección de CSS personalizado de tu sitio web (Artículo).
¿Usas Wix? ¡Haz clic aquí!
A continuación encontrarás los fragmentos de código necesarios para cambiar varios colores en tu sitio web. Se recomienda copiar y pegar todo el bloque de código en tu editor de CSS, y luego cambiar los colores como prefieras. No es necesario cambiar todos los colores.
Nota: Si tu sitio web utiliza un tema de color específico, puede que necesites agregar el siguiente fragmento para sobrescribir la configuración de colores de tu tema:
!important;
Este artículo contiene todos los fragmentos de CSS necesarios. Si buscas cambiar algo específico, como los colores generales, el botón de agregar o los colores del carrito, revisa los siguientes artículos:
Fragmentos de color CSS generales
Cambia el color de fondo y el color de fuente del botón "Buscar" del fondo negro y fuente blanca estándar:
/* botón de búsqueda */
.gspro-o-search > .gspro-o-button {
/* esta propiedad cambia el color de fondo del elemento seleccionado */
background: red !important;
/* esta propiedad cambia el color del texto del elemento seleccionado */
color: black !important;
}
Cambia el color de fondo del botón "Filtros":
/* botón de filtro */
.gspro-c-item-gallery__toggle-filters {
background: green !important;
}
Cambia el color de fondo del botón "Categorías" (solo en vista móvil):
/* botón de categoría - solo móvil */
.gspro-c-item-gallery__toggle-category {
background: orange !important;
}
Cambia SOLO el color de fondo del botón "Agregar a la lista de deseos":
/* color del botón agregar en la tarjeta */
gspro-item-card .gspro-o-card__add button {
background: blue !important;
}
Cambia SOLO el color del ícono del botón "Agregar a la lista de deseos":
/* color del ícono agregar en la tarjeta */
.gspro-c-item-card__add use {
fill: green !important;
}
Cambia el color de fondo Y el color del ícono del botón "Agregar a la lista de deseos":
/* color del botón agregar en la tarjeta */
gspro-item-card .gspro-o-card__add button {
background: blue !important;
}
/* color del ícono agregar en la tarjeta */
.gspro-c-item-card__add use {
fill: green !important;
}
Cambia el color de fuente de las categorías y subcategorías:
/* color del texto de la categoría */
.gspro-o-category {
color: purple !important;
}
Cambia el color de fuente del número de artículos disponibles en cada categoría y subcategoría:
/* color del texto de la insignia de cantidad de la categoría */
.gspro-u-badge {
color: orange !important;
}
Cambia el color de fuente y de fondo del número de artículos agregados al carrito de la lista de deseos:
/* insignia de cantidad del "carrito" de la lista de deseos*/
gspro-wishlist .gspro-c-wishlist__count {
background: yellow !important;
color: purple !important;
}
Cambia el color del ícono y el fondo del botón "Carrito de la lista de deseos":
/* color del ícono de corazón de la lista de deseos */
gspro-wishlist[data-mode="collapse"] use {
fill: orange;
}
/* fondo del ícono de corazón del "carrito" de la lista de deseos */
.gspro-c-wishlist__trigger {
background: darkred !important;
}
/* fuentes */
:root {
--gspro-font-family-secondary: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif !important;
--gspro-font-family-secondary: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif !important;
--gspro-custom-font-size: 16px;
}
CSS de la tarjeta de artículo
Cambia el color de fondo de la tarjeta de artículo:
gspro-item-card {
background: rgb(250, 250, 250);
}
Cambia el color de fondo de la tarjeta de artículo solo cuando pases el cursor sobre ella:
gspro-item-card:hover {
background: rgb(255, 255, 255);
}
Muestra el título completo de un artículo en la tarjeta de artículo (puede reducir el tamaño de la imagen):
gspro-item-card .gspro-o-card__title {
color: #0;
white-space: wrap;
overflow: hidden;
text-overflow: ellipsis
}
Cambia el color del título del artículo en la tarjeta de artículo:
gspro-item-card .gspro-o-card__title {
color: red;
}
Cambia SOLO el color de fondo del botón "Agregar a la lista de deseos":
gspro-item-card .gspro-o-card__add button {
background: #2A2A2A;
}Cambia el color del botón "Agregar a la lista de deseos" cuando pases el cursor sobre él:
gspro-item-card .gspro-o-card__add:hover button {
background: #1A1A1A;
}
CSS de detalle de artículo
Cambia el color del título del artículo dentro de la tarjeta de artículo:
gspro-item-detail .gspro-c-item-detail__title {
color: red;
}
Cambia el color del precio, así como el ancho y color del borde alrededor del precio dentro de la tarjeta de artículo:
gspro-item-detail .gspro-c-item-detail__price {
border: 1px solid black;
color: black;
}
Cambia el color de las opciones de Cantidad, Tarifa, Seleccionar fechas y Hora de inicio dentro de la tarjeta de artículo:
gspro-item-detail .gspro-o-form .gspro-o-form__horiz {color: red !important;}
Cambia el color de la Descripción, Detalles y Precios
gspro-item-detail .gspro-o-list-item__title {color: orange !important;}
Cambiar el color de las Relaciones en un producto
gspro-item-detail .gspro-o-card__title {color: red !important;}
CSS para la integración en el sitio web
La integración tiene dos estados diferentes. Inicialmente, está colapsada y aparece como un botón flotante en la esquina inferior derecha de la pantalla. Al hacer clic, pasa al estado expandido.
Este CSS te muestra cómo aplicar colores de fondo y de primer plano en ambos estados. Si usas este fragmento en tu sitio, probablemente quieras cambiar el fondo “hotpink” por un color que combine con la imagen de tu marca.
Cambiar SOLO el color del ícono en el carrito de Wishlist activo:
gspro-wishlist[data-mode="collapse"] use {
fill: red;
}
Cambiar el color de fondo en la parte superior del carrito de Wishlist:
gspro-wishlist[data-mode="expand"] {
background: hotpink;
}
Cambiar el color de fondo y el color del número en el círculo que muestra la cantidad de artículos en el carrito de Wishlist activo:
gspro-wishlist[data-mode="collapse"] .gspro-c-wishlist__count {
background: black;
color: white
}
gspro-wishlist[data-mode="collapse"] {
background: white;
}
CSS para botones
El CSS para botones que aparece a continuación solo debe usarse si notas que en tu sitio web, en algún navegador o dispositivo en particular, no se están cambiando los colores.
Algunos componentes web tienen elementos de botón. Para que estos se vean consistentes en diferentes navegadores, dispositivos y sistemas operativos, definimos una propiedad que los hace fáciles de reconocer y seleccionar.
Cambiar SOLO el color de fondo del botón "Agregar a Wishlist":
button.gspro-o-button {
background: pink;
}Cambiar SOLO el color de fondo del botón "Agregar a Wishlist" al pasar el mouse:
button.gspro-o-button:hover {
background: rgba(255, 255, 255, 0.2);
}
Cambiar el color del botón "Contacto e información del lugar" solo cuando NO se pasa el mouse:
button.gspro-o-button--primary {
background: #1F1F1F;
}Cambiar el color del botón "Contacto e información del lugar" SOLO al pasar el mouse:
button.gspro-o-button--primary:hover {
background: #3F3F3F;
}button.gspro-o-button--warning {
background: darkorange;
color: white;
}
button.gspro-o-button--warning:hover {
background: darkred;
color: white;
}
Cambiar el color de la fuente en el botón "Guardar" bajo "Seleccionar fechas":
button.gspro-o-button--reverse {
background: white;
color: hotpink;
}
Cambiar el color de la fuente en el botón "Guardar" bajo "Seleccionar fechas" solo al pasar el mouse:
button.gspro-o-button--reverse:hover {
background: rgba(255, 255, 255, 0.8);
color: hotpink;
}
Cambiar el color del botón de cerrar bajo "Seleccionar fechas":
button.gspro-o-button--icon {
background: inherit;
}
Cambiar el color del botón de cerrar bajo "Seleccionar fechas" solo al pasar el mouse:
button.gspro-o-button--icon:hover {
background: rgba(255, 255, 255, 0.2);
}
¿Viste lo fácil que fue hacer esos cambios? No dudes en contactar al equipo si tienes alguna pregunta sobre tu Integración en el sitio web que aún no haya sido resuelta.
Aviso: Este artículo fue traducido usando IA. Si tienes preguntas o necesitas aclaraciones, contáctanos usando el chat en la esquina inferior de tu pantalla.