Esta función está disponible en todos los planes de Goodshuffle Pro.
En ciertos sitios de Squarespace, el ícono de corazón de la lista de deseos (el que aparece dentro de las tarjetas de los artículos y el botón flotante de la lista de deseos en la esquina de la página) puede verse correctamente en escritorio pero ser invisible en dispositivos móviles. Normalmente verás el contenedor del botón de color y la insignia con el número, pero no el corazón dentro.
Antes de aplicar cualquier CSS, PRIMERO revisa la versión de la integración web en el encabezado del sitio del cliente. Las versiones antiguas (como 0.5.2 o 0.5.3) son conocidas por causar problemas al mostrar el ícono de corazón en móviles, y actualizar a la versión más reciente suele solucionar el problema sin necesidad de cambiar el CSS.
Cómo revisar y actualizar la versión:
En Squarespace, ve a Sitio web > Páginas > Herramientas del sitio web > Inyección de código.
Mira las etiquetas
<script>en la sección del encabezado. El número de versión aparece en la URL después de@goodshuffle/wc@(por ejemplo,@goodshuffle/[email protected]).Si la versión es antigua (por ejemplo, 0.5.2, 0.5.3), reemplaza las etiquetas de script con la versión más reciente de nuestra documentación para desarrolladores de configuración en Squarespace.
Haz clic en Guardar y luego pídele al cliente que actualice su sitio en el móvil (hard refresh) para ver si el problema se resolvió.
Si al actualizar la versión se soluciona, ya terminaste. Si el ícono de corazón sigue sin aparecer o no está centrado después de actualizar, continúa con la solución de CSS a continuación.
Por qué sucede esto
Si actualizar la versión no lo soluciona, probablemente el problema sea causado por una regla de CSS en el sitio (a menudo queda de una personalización anterior, como un fragmento para "Cambiar el corazón por un botón de texto 'Agregar a la lista de deseos'", o lo aplica el tema) que oculta o reduce las dimensiones del ícono específicamente en móviles. El botón sigue visible, pero el corazón dentro se oculta.
⚠️ Importante: Personaliza el color del corazón antes de usar este fragmento
El siguiente fragmento usa fill: #ffffff (blanco) como color del corazón en dos lugares. Esto probablemente NO coincida con la marca de tu cliente. Un corazón blanco se ve bien sobre un botón oscuro o de color, pero si el botón del cliente es claro, el corazón blanco será invisible.
Antes de compartir este fragmento con un cliente:
Revisa de qué color es el fondo del botón de la lista de deseos
Reemplaza AMBAS instancias de
#ffffffen el fragmento de abajo por un color hexadecimal que contraste bien con ese botónSi tienes dudas, pregúntale al cliente de qué color quiere el corazón
Opciones comunes: #ffffff (blanco) para botones oscuros, #000000 (negro) para botones claros, o cualquier color hexadecimal que combine con el acento de su marca.
La solución: Forzar que el ícono de corazón sea visible y esté centrado
Edita el CSS personalizado de tu sitio de Squarespace eligiendo Diseño > CSS personalizado. Pega el siguiente fragmento al final de cualquier CSS existente:
Recuerda reemplazar #ffffff por el color de corazón adecuado para el diseño del cliente (ver aviso arriba).
/* Corazón flotante de la lista de deseos (esquina inferior derecha) */
gspro-wishlist[data-mode="collapse"] .gspro-c-wishlist__trigger gspro-icon,
gspro-wishlist[data-mode="collapse"] .gspro-c-wishlist__trigger svg {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
width: 24px !important;
height: 24px !important;
}
gspro-wishlist[data-mode="collapse"] .gspro-c-wishlist__trigger use {
fill: #ffffff !important; /* ← Reemplaza por el color de corazón que prefiera el cliente */
}
/* Ícono de corazón en la tarjeta de artículo — corrige visualización, color y centrado */
gspro-item-card .gspro-o-card__add button.gspro-o-button,
gspro-item-card .gspro-o-card__add .gspro-o-button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
padding: 0 !important;
}
gspro-item-card .gspro-o-card__add gspro-icon,
gspro-item-card .gspro-o-card__add svg {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
width: 20px !important;
height: 20px !important;
line-height: 1 !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
}
.gspro-c-item-card__add use {
fill: #ffffff !important; /* ← Reemplaza por el color de corazón que prefiera el cliente */
}
/* Anulación específica para móviles para evitar reglas en breakpoints */
@media (max-width: 768px) {
gspro-wishlist[data-mode="collapse"] .gspro-c-wishlist__trigger gspro-icon,
gspro-wishlist[data-mode="collapse"] .gspro-c-wishlist__trigger svg {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
width: 24px !important;
height: 24px !important;
}
gspro-item-card .gspro-o-card__add button.gspro-o-button,
gspro-item-card .gspro-o-card__add .gspro-o-button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
padding: 0 !important;
}
gspro-item-card .gspro-o-card__add gspro-icon,
gspro-item-card .gspro-o-card__add svg {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
width: 20px !important;
height: 20px !important;
line-height: 1 !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
}
}
Haz clic en Guardar y luego actualiza tu navegador móvil (o prueba en una ventana de incógnito) para ver el cambio.
¿Qué hace este fragmento?
Fuerza que el SVG del corazón se muestre tanto en el botón flotante de la lista de deseos como en las tarjetas de los artículos, anulando cualquier regla que oculte o reduzca el ícono.
Rellena el corazón con el color elegido para que sea visible sobre el fondo del botón. Asegúrate de reemplazar
#ffffffpor un color que contraste con el fondo del botón del cliente.Centra el corazón dentro del botón de la tarjeta de artículo usando flexbox. Esto es importante porque el estilo predeterminado del botón puede dejar el ícono pegado al borde inferior o lateral del botón.
Repite las reglas dentro de una media query para móviles para asegurarse de que prevalezcan sobre cualquier CSS específico para móviles que pueda haber en el sitio del cliente.
¿Necesitas ayuda adicional?
Haz clic en la burbuja azul de chat en la esquina inferior derecha de tu pantalla para escribirle 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.