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 predeterminados:
/* 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 filtros */
.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ías - 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 TANTO el color de fondo como el 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 "carrito" de corazón 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;}
Cambia el color de las relaciones en un producto.
gspro-item-detail .gspro-o-card__title {color: red !important;}
CSS de la integración web
La integración tiene dos estados diferentes. Inicialmente, está colapsada y aparece como un botón flotante en la parte inferior derecha de la pantalla. Al hacer clic, pasará 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 querrás cambiar el fondo “hotpink” por uno que combine con la imagen de tu marca.
Cambia SOLO el color del ícono en el carrito de la lista de deseos activo:
gspro-wishlist[data-mode="collapse"] use {
fill: red;
}
Cambiar el color de fondo en la parte superior del carrito de la lista de deseos:
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 un carrito de lista de deseos activo:
gspro-wishlist[data-mode="collapse"] .gspro-c-wishlist__count {background: black;color: white}
gspro-wishlist[data-mode="collapse"] {
background: white;
}
CSS de botones
El CSS de botón 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 igual 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 la lista de deseos":
button.gspro-o-button {
background: pink;
}Cambiar SOLO el color de fondo del botón "Agregar a la lista de deseos" al pasar el mouse sobre él:
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 sobre él:
button.gspro-o-button--primary {
background: #1F1F1F;
}Cambiar el color del botón "Contacto e información del lugar" SOLO al pasar el mouse sobre él:
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 sobre él:
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 sobre él:
button.gspro-o-button--icon:hover {
background: rgba(255, 255, 255, 0.2);
}
¿Viste lo fácil que fue hacer esos cambios? Si tienes alguna otra pregunta sobre tu Integración de sitio web, no dudes en contactarnos.
¿Necesitas ayuda adicional?
Haz clic en la burbuja azul de chat en la esquina inferior de tu pantalla para enviar un mensaje a nuestro equipo de soporte. ¡Estamos para ayudarte!
Aviso: Este artículo fue traducido usando IA. Si tienes preguntas o necesitas aclaraciones, contáctanos usando la burbuja de chat en la esquina inferior de tu pantalla.