Cette fonctionnalité est disponible sur tous les forfaits Goodshuffle Pro.
Changer les couleurs de l’intégration de votre site web est simple et vous permet d’harmoniser votre site avec votre charte graphique.
Rendez-vous dans la section CSS personnalisé de votre site (Article).
Vous utilisez Wix ? Cliquez ici !
Vous trouverez ci-dessous les extraits de code nécessaires pour modifier différentes couleurs sur votre site. Il est recommandé de copier/coller l’ensemble du bloc de code dans votre éditeur CSS, puis de modifier les couleurs selon vos préférences. Il n’est pas obligatoire de modifier toutes les couleurs.
Remarque : Si votre site utilise un thème de couleurs spécifique, vous devrez peut-être ajouter l’extrait suivant pour forcer la prise en compte de vos réglages :
!important;
Cet article contient tous les extraits CSS nécessaires. Si vous souhaitez modifier un élément précis, comme les couleurs générales, le bouton Ajouter ou les couleurs du panier, consultez les articles ci-dessous :
Extraits CSS pour les couleurs générales
Modifiez la couleur de fond et la couleur de police du bouton « Rechercher » (par défaut fond noir et texte blanc) :
/* search button */
.gspro-o-search > .gspro-o-button {
/* cette propriété modifie la couleur de fond de l’élément ciblé */
background: red !important;
/* cette propriété modifie la couleur du texte de l’élément ciblé */
color: black !important;
}
Modifier la couleur de fond du bouton « Filtres » :
/* filter button */
.gspro-c-item-gallery__toggle-filters {
background: green !important;
}
Modifier la couleur de fond du bouton « Catégories » (uniquement sur mobile) :
/* category button - mobile only */
.gspro-c-item-gallery__toggle-category {
background: orange !important;
}
Modifier UNIQUEMENT la couleur de fond du bouton « Ajouter à la liste de souhaits » :
/* card add button color */
gspro-item-card .gspro-o-card__add button {
background: blue !important;
}
Modifier UNIQUEMENT la couleur de l’icône du bouton « Ajouter à la liste de souhaits » :
/* card add icon color */
.gspro-c-item-card__add use {
fill: green !important;
}
Modifier À LA FOIS la couleur de fond et l’icône du bouton « Ajouter à la liste de souhaits » :
/* 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;
}
Modifier la couleur du texte des catégories et sous-catégories :
/* category text color */
.gspro-o-category {
color: purple !important;
}
Modifier la couleur du texte du nombre d’articles disponibles dans chaque catégorie et sous-catégorie :
/* category count badge text color */
.gspro-u-badge {
color: orange !important;
}
Modifier la couleur du texte et du fond du nombre d’articles ajoutés au panier de la liste de souhaits :
/* wishlist 'cart' count badge*/
gspro-wishlist .gspro-c-wishlist__count {
background: yellow !important;
color: purple !important;
}
Modifier la couleur de l’icône et du fond du bouton « Panier de la liste de souhaits » :
/* wishlist heart icon color */
gspro-wishlist[data-mode="collapse"] use {
fill: orange;
}
/* wishlist heart 'cart' background */
.gspro-c-wishlist__trigger {
background: darkred !important;
}
/* 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;
}
CSS de la fiche article
Modifier la couleur de fond de la fiche article :
gspro-item-card {
background: rgb(250, 250, 250);
}
Modifier la couleur de fond de la fiche article uniquement au survol :
gspro-item-card:hover {
background: rgb(255, 255, 255);
}Afficher l’intégralité du titre d’un article sur la fiche (peut réduire la taille de l’image) :
gspro-item-card .gspro-o-card__title {
color: #0;
white-space: wrap;
overflow: hidden;
text-overflow: ellipsis
}Modifier la couleur du titre de l’article sur la fiche :
gspro-item-card .gspro-o-card__title {
color: red;
}
Modifier UNIQUEMENT la couleur de fond du bouton « Ajouter à la liste de souhaits » :
gspro-item-card .gspro-o-card__add button {
background: #2A2A2A;
}Modifier la couleur du bouton « Ajouter à la liste de souhaits » au survol :
gspro-item-card .gspro-o-card__add:hover button {
background: #1A1A1A;
}
CSS des détails de l’article
Modifier la couleur du titre de l’article dans la fiche :
gspro-item-detail .gspro-c-item-detail__title {
color: red;
}Modifier la couleur du prix ainsi que la largeur et la couleur de la bordure autour du prix dans la fiche :
gspro-item-detail .gspro-c-item-detail__price {
border: 1px solid black;
color: black;
}
Modifier la couleur des options Quantité, Tarif, Sélectionner les dates et Heure de début dans la fiche :
gspro-item-detail .gspro-o-form .gspro-o-form__horiz {color: red !important;}
Modifier la couleur de la description, des détails et des tarifs.
gspro-item-detail .gspro-o-list-item__title {color: orange !important;}
Modifier la couleur des relations sur un produit.
gspro-item-detail .gspro-o-card__title {color: red !important;}
CSS de l’intégration du site web
L’intégration possède deux états différents. Au départ, elle est réduite et apparaît comme un bouton flottant en bas à droite de l’écran. En cliquant dessus, elle passe en mode étendu.
Ce CSS vous montre comment appliquer des couleurs de fond et de premier plan dans les deux états. Si vous utilisez cet extrait sur votre site, pensez à remplacer le fond « hotpink » par une couleur adaptée à votre charte graphique.
Modifier UNIQUEMENT la couleur de l’icône sur le panier de la liste de souhaits actif :
gspro-wishlist[data-mode="collapse"] use {
fill: red;
}
Changer la couleur de fond en haut du panier de la liste de souhaits :
gspro-wishlist[data-mode="expand"] {
background: hotpink;
}Changer la couleur de fond ainsi que la couleur du chiffre dans le cercle indiquant le nombre d’articles dans un panier de liste de souhaits actif :
gspro-wishlist[data-mode="collapse"] .gspro-c-wishlist__count {background: black;color: white}
gspro-wishlist[data-mode="collapse"] {
background: white;
}
CSS des boutons
Le CSS des boutons ci-dessous ne doit être utilisé que si vous remarquez que la couleur ne change pas sur votre site, dans un navigateur ou appareil en particulier.
Certains composants web utilisent des éléments de bouton. Pour garantir une apparence cohérente sur différents navigateurs, appareils et systèmes d’exploitation, nous définissons une propriété qui les rend faciles à reconnaître et à sélectionner.
Changer UNIQUEMENT la couleur de fond du bouton « Ajouter à la liste de souhaits » :
button.gspro-o-button {
background: pink;
}Changer UNIQUEMENT la couleur de fond du bouton « Ajouter à la liste de souhaits » au survol :
button.gspro-o-button:hover {
background: rgba(255, 255, 255, 0.2);
}Changer la couleur du bouton « Infos contact & lieu » uniquement quand il n’est PAS survolé :
button.gspro-o-button--primary {
background: #1F1F1F;
}Changer la couleur du bouton « Infos contact & lieu » UNIQUEMENT au survol :
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;
}Changer la couleur de la police du bouton « Enregistrer » sous « Sélectionner les dates » :
button.gspro-o-button--reverse {
background: white;
color: hotpink;
}Changer la couleur de la police du bouton « Enregistrer » sous « Sélectionner les dates » uniquement au survol :
button.gspro-o-button--reverse:hover {
background: rgba(255, 255, 255, 0.8);
color: hotpink;
}Changer la couleur du bouton de fermeture sous « Sélectionner les dates » :
button.gspro-o-button--icon {
background: inherit;
}Changer la couleur du bouton de fermeture sous « Sélectionner les dates » uniquement au survol :
button.gspro-o-button--icon:hover {
background: rgba(255, 255, 255, 0.2);
}
Vous voyez comme il est facile de faire ces modifications ? N’hésitez pas à contacter notre équipe si vous avez encore des questions concernant votre intégration de site web !
Besoin d’aide supplémentaire ?
Cliquez sur la bulle de chat bleue en bas à droite de votre écran pour envoyer un message à notre équipe d’assistance — 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 à droite de votre écran.