Esta función está disponible en todos los planes de Goodshuffle Pro.
Cambiar los colores en la Integración Web es fácil y te ayuda a que tu sitio combine con el resto de tu página y tu marca.
Ve 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 usa 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 artículos a continuación:
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:
/* search button */
.gspro-o-search > .gspro-o-button {
/* this property changes the background color of the targetted element */
background: red !important;
/* this property changes the text color of the targetted element */
color: black !important;
}
Cambia el color de fondo del botón "Filtros":
/* filter button */
.gspro-c-item-gallery__toggle-filters {
background: green !important;
}
Cambia el color de fondo del botón "Categorías" (solo en vista móvil):
/* category button - mobile only */
.gspro-c-item-gallery__toggle-category {
background: orange !important;
}
Cambia SOLO el color de fondo del botón "Agregar a la lista de deseos":
/* card add button color */
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":
/* card add icon color */
.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":
/* card add button color */
gspro-item-card .gspro-o-card__add button {
background: blue !important;
}
/* card add icon color */
.gspro-c-item-card__add use {
fill: green !important;
}
Cambia el color de fuente de las categorías y subcategorías:
/* category text color */
.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:
/* category count badge text color */
.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:
/* wishlist 'cart' count badge*/
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":
/* wishlist heart icon color */
gspro-wishlist[data-mode="collapse"] use {
fill: orange;
}
/* wishlist heart 'cart' background */
.gspro-c-wishlist__trigger {
background: darkred !important;
}
Cambia la fuente en tu integración web:
/* fonts */
: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;
}
Cambia la fuente en las tarjetas de artículos para que coincida con tu sitio web:
Reemplaza your-font-name con el nombre de la fuente que ya usa tu sitio web. La fuente debe estar cargada previamente en tu sitio para que funcione. Agrega el primer fragmento para cambiar la fuente en la tarjeta de artículo, y el segundo si también quieres definir la fuente usada para los títulos de los artículos mediante la variable de fuente de Goodshuffle Pro.
/* font on the item card */
gspro-item-card,
gspro-item-card * {
font-family: "your-font-name", serif !important;
}
/* font control for item titles */
gspro-item-card {
--gspro-font-family-primary: "your-font-name", serif;
}
Cambia el color de texto de todo en la tarjeta de artículo:
Esto es útil si cambias el fondo de la tarjeta de artículo y necesitas que el texto siga siendo legible.
gspro-item-card,
gspro-item-card * {
color: #2c2c2c !important;
}
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 al pasar el mouse:
gspro-item-card:hover {
background: rgb(255, 255, 255);
}Cambia el color de fondo del área alrededor de la imagen del artículo (el margen detrás de la foto):
.gspro-c-item-card .gspro-c-item-card__preview {
background: #2b3a67 !important;
}Quita la línea entre la imagen del artículo y los detalles del artículo:
.gspro-c-item-card .gspro-c-item-card__detail {
border-top: none;
}Quita el borde y la sombra alrededor de cada tarjeta de artículo:
.gspro-c-item-card {
border: none;
box-shadow: none;
}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" al pasar el mouse:
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 Cantidad, Tarifa, Seleccionar fechas y opciones de Hora de inicio dentro de la tarjeta de artículo:
gspro-item-detail .gspro-o-form .gspro-o-form__horiz {color: red !important;}Ocultar la hora de inicio en el detalle del artículo:
Esto oculta la opción de Hora de inicio en la vista previa expandida del artículo (el Detalle del artículo que se abre cuando un visitante hace clic en una Tarjeta de artículo). La Hora de inicio seguirá mostrándose en el carrito y en el proceso de pago. Agrega este fragmento en el mismo lugar donde tienes tus otras personalizaciones de color.
gspro-item-detail .gspro-c-item-choices__start-time {
display: none !important;
}Cambiar 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 deseos activo:
gspro-wishlist[data-mode="collapse"] use {
fill: red;
}Cambiar el color de fondo en la parte superior del carrito 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 el carrito de deseos 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 de botones que aparece a continuación solo debe usarse si notas que tu sitio web, en algún navegador o dispositivo en particular, no está 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:
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);
} ¿Ves qué fácil 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 de chat azul en la esquina inferior de tu pantalla para enviar un mensaje a nuestro equipo de soporte. ¡Estamos felices de 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.