Les exemples suivants montrent comment utiliser CSS pour modifier certains éléments visuels de Finder. Ces styles permettent d’adapter l’apparence du moteur de recherche au design de votre boutique en modifiant des aspects tels que les logos, le style des produits ou les textes de l’interface.
Ajouter un logo #
Il est possible d’ajouter un logo personnalisé dans l’en-tête de Finder en utilisant CSS. Vous pouvez appliquer une image de fond sur le conteneur correspondant.
.sbHeaderBackgroundLogo {
background-image: url(image_url);
background-repeat: no-repeat;
}
@media (max-width:950px) {
.sbHeaderBackgroundLogo {
display: block;
height: 80px; // Doit correspondre à la hauteur de l’image
grid-column: 1/span 12;
}
}
Remplacez image_url par l’URL du logo que vous souhaitez afficher. Vous pouvez également ajuster la hauteur pour l’adapter à la taille de l’image.
Ajouter une ombre aux cartes produit #
Il est également possible de modifier l’apparence des produits affichés dans les résultats de Finder. Par exemple, vous pouvez ajouter une bordure ou une ombre à chaque carte produit.
.sbProductCard {
box-shadow: 0 0 0 2px inset #aaa;
border-radius: 8px;
}
Cet exemple ajoute une ombre intérieure et arrondit les coins de chaque carte produit.
Personnaliser les textes du menu de tri #
Les textes du menu déroulant de tri peuvent être modifiés via CSS. Chaque option du sélecteur possède une classe spécifique permettant de l’identifier.
| Nom | Classe |
|---|---|
| Pertinence | sb-sorting-relevance-desc-option |
| Prix croissant | sb-sorting-price-asc-option |
| Prix décroissant | sb-sorting-price-desc-option |
| Stock : du plus élevé au plus bas | sb-sorting-quantity-desc-option |
L’exemple suivant montre comment modifier le texte de l’option “Stock : du plus élevé au plus bas”.
/* Texte "Stock : du plus élevé au plus bas" */
.sellboost-finder-lang-es .sb-sorting-quantity-desc-option span,
.sellboost-finder-lang-es .sb-sorting-quantity-desc-option-selected span {
display: none;
}
.sellboost-finder-lang-es .sb-sorting-quantity-desc-option::after,
.sellboost-finder-lang-es .sb-sorting-quantity-desc-option-selected::after {
content: "Texte modifié avec CSS";
}
Ce CSS masque le texte original de Finder et ajoute un texte personnalisé à l’aide de pseudo-éléments.
L’exemple précédent s’applique uniquement à la langue espagnole grâce à la classe .sellboost-finder-lang-es. Si la boutique utilise plusieurs langues, il faut dupliquer les règles en changeant le code ISO de la langue correspondante.
Exemple pour une boutique en espagnol et français :
.sellboost-finder-lang-es .sb-sorting-quantity-desc-option span,
.sellboost-finder-lang-es .sb-sorting-quantity-desc-option-selected span {
display: none;
}
.sellboost-finder-lang-es .sb-sorting-quantity-desc-option::after,
.sellboost-finder-lang-es .sb-sorting-quantity-desc-option-selected::after {
content: "Texte modifié avec CSS";
}
.sellboost-finder-lang-fr .sb-sorting-quantity-desc-option span,
.sellboost-finder-lang-fr .sb-sorting-quantity-desc-option-selected span {
display: none;
}
.sellboost-finder-lang-fr .sb-sorting-quantity-desc-option::after,
.sellboost-finder-lang-fr .sb-sorting-quantity-desc-option-selected::after {
content: "Texte modifié avec CSS";
}
Modifier l’ordre des propriétés dans le produit #
Certains éléments à l’intérieur de la carte produit utilisent flexbox, ce qui permet de changer leur ordre visuel via la propriété order.
.sbProductPriceContainer {
order: 8;
}
Cet exemple modifie la position du conteneur du prix dans la carte produit.
CSS personnalisé #
Finder permet d’ajouter du CSS personnalisé directement depuis le panneau de configuration.
Cette option se trouve dans le menu Personnalisation de Sellboost Finder. Depuis cette section, vous pouvez ajouter vos propres règles CSS pour adapter l’apparence du moteur de recherche au design de votre boutique.
