Cette fonctionnalité est disponible sur tous les forfaits Goodshuffle Pro.
Sur certains sites Squarespace, l’icône de cœur de la liste de souhaits (celle à l’intérieur des fiches articles et le bouton flottant dans le coin de la page) peut s’afficher correctement sur ordinateur mais être invisible sur mobile. En général, vous verrez le bouton coloré et le badge de compteur, mais sans le cœur à l’intérieur.
Avant d’appliquer du CSS, vérifiez D’ABORD la version de l’intégration Website dans l’en-tête du site du client. Les anciennes versions (comme 0.5.2 ou 0.5.3) sont connues pour causer des problèmes d’affichage de l’icône cœur sur mobile, et la mise à jour vers la dernière version règle souvent le problème sans avoir à modifier le CSS.
Comment vérifier et mettre à jour la version :
Dans Squarespace, allez dans Site Web > Pages > Outils du site Web > Injection de code.
Regardez les balises
<script>dans la section En-tête. Le numéro de version apparaît dans l’URL après@goodshuffle/wc@(par exemple,@goodshuffle/[email protected]).Si la version est ancienne (ex : 0.5.2, 0.5.3), remplacez les balises script par la dernière version disponible dans notre documentation développeur d’installation Squarespace.
Cliquez sur Enregistrer, puis demandez au client d’actualiser son site sur mobile (rafraîchissement forcé) pour voir si le problème est résolu.
Si la mise à jour règle le problème, c’est terminé. Si l’icône cœur est toujours absente ou mal centrée après la mise à jour, poursuivez avec la correction CSS ci-dessous.
Pourquoi cela arrive
Si la mise à jour de la version ne règle pas le souci, il s’agit probablement d’une règle CSS quelque part sur le site (souvent issue d’une ancienne personnalisation, comme un extrait « Remplacer le cœur par un bouton texte Ajouter à la liste de souhaits », ou appliquée par le thème) qui masque ou réduit la taille de l’icône spécifiquement sur mobile. Le bouton reste visible, mais le cœur à l’intérieur est caché.
⚠️ Important : Personnalisez la couleur du cœur avant d’utiliser cet extrait
L’extrait ci-dessous utilise fill: #ffffff (blanc) comme couleur du cœur à deux endroits. Cela ne correspondra probablement PAS à la charte graphique de votre client. Un cœur blanc ressort bien sur un bouton foncé ou coloré, mais s’il est sur un bouton clair, il sera invisible.
Avant de partager cet extrait avec un client :
Vérifiez la couleur de fond du bouton de liste de souhaits
Remplacez les DEUX occurrences de
#ffffffdans l’extrait ci-dessous par une couleur hexadécimale qui contraste bien avec ce boutonEn cas de doute, demandez au client quelle couleur il souhaite pour le cœur
Exemples courants : #ffffff (blanc) pour les boutons foncés, #000000 (noir) pour les boutons clairs, ou toute couleur hexadécimale correspondant à leur couleur d’accent de marque.
La solution : Forcer l’affichage et le centrage du cœur
Modifiez le CSS personnalisé de votre site Squarespace en allant dans Design > CSS personnalisé. Collez l’extrait suivant tout en bas du CSS existant :
Pensez à remplacer #ffffff par la couleur de cœur adaptée au design du client (voir l’encadré ci-dessus).
/* Cœur flottant de la liste de souhaits (coin inférieur droit) */
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; /* ← Remplacez par la couleur de cœur souhaitée par le client */
}
/* Icône cœur sur la fiche article — corrige l’affichage, la couleur ET le centrage */
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; /* ← Remplacez par la couleur de cœur souhaitée par le client */
}
/* Surcharge spécifique mobile pour contrer toute règle de breakpoint */
@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;
}
}
Cliquez sur Enregistrer, puis rafraîchissez votre navigateur mobile (ou testez en navigation privée) pour voir le changement.
Ce que fait cet extrait
Force l’affichage du SVG cœur sur le bouton flottant de la liste de souhaits et sur les fiches articles, en annulant toute règle qui masque ou réduit l’icône.
Remplit le cœur avec la couleur choisie pour qu’il soit bien visible sur le fond du bouton. Pensez à remplacer
#ffffffpar une couleur qui contraste avec le fond du bouton du client.Centre le cœur dans le bouton de la fiche article grâce au flexbox. C’est important car le style par défaut peut coller l’icône en bas ou sur le côté du bouton.
Répète les règles dans une media query mobile pour s’assurer qu’elles prennent le dessus sur tout CSS mobile spécifique déjà présent sur le site du client.
Besoin d’aide supplémentaire ?
Cliquez sur la bulle de chat bleue en bas à droite de votre écran pour contacter notre équipe support — nous sommes là pour vous aider !
Clause de non-responsabilité : Cet article a été traduit à l’aide de l’IA. Pour toute question ou clarification, contactez-nous via la bulle de chat en bas de votre écran.