Comment personnaliser vos résultats de recherche avec CSS
Prêt à donner un aspect incroyable à vos résultats de recherche ? Ce guide vous montrera comment styliser vos résultats de recherche de produits et vos sections de résumé IA avec CSS. Pas d’inquiétude si vous débutez avec CSS — nous sommes là pour vous aider ! Et si vous êtes déjà à l’aise avec, vous trouverez de nombreux conseils pour faire passer votre personnalisation au niveau supérieur.
Pour commencer
Shoply AI Chat et AI Search peuvent tous deux afficher des résultats de recherche, donc les options de personnalisation CSS que vous ajoutez s’appliqueront aux deux. Remarque : la fonctionnalité AI Summary est disponible uniquement dans Shoply AI Search.
Où ajouter votre CSS
Pour masquer toute la barre de filtres, utilisez le contrôle intégré : accédez à Customize AI Search → Search filters, désactivez Show filters in search results, puis cliquez sur Save. Aucun CSS n’est nécessaire. Consultez Hide Search Filters pour plus de détails.
- Accédez à la section Customize AI Search dans la console d’administration de l’application Shoply.
- Trouvez la zone de texte CSS styles for search elements
- Saisissez votre code CSS personnalisé dans la zone de texte
- Cliquez sur Save pour appliquer vos modifications
Bases du CSS
Le CSS vous permet de modifier les couleurs, les polices, les espacements, les bordures, et bien plus encore. La syntaxe de base est la suivante :
.class-name {
property: value;
}Par exemple, pour changer la couleur du texte en rouge foncé :
.shoply-product-name {
color:rgb(82, 2, 2);
}Comprendre les classes CSS spécifiques à Shoply
Shoply fournit des classes CSS spécifiques que vous pouvez utiliser pour cibler différentes parties de vos résultats de recherche. Chaque classe correspond à un élément précis dans le résultat de recherche.
Shoply a également défini certains styles par défaut pour ces classes. Vous pouvez inspecter ces styles à l’aide de Chrome DevTools et rechercher chacune de ces classes. Si vous devez remplacer les styles par défaut, ajoutez la déclaration !important à vos règles CSS comme expliqué dans la documentation MDN sur CSS !important .
Classes des fiches produit
Styles pour le conteneur :
.shoply-product-image- Stylise l’image du produit.shoply-product-card- Stylise le conteneur de la fiche produit
Styles pour les informations textuelles :
.shoply-product-brand- Stylise le nom de la marque/fournisseur du produit affiché au-dessus du titre du produit.shoply-product-name- Stylise le titre/nom du produit
Styles pour le prix :
.shoply-product-price- Stylise le prix du produit (après application de la remise).shoply-product-original-price-before-discount- Stylise le prix d’origine avant remise (avec décoration barrée par défaut).shoply-product-discount-percent- Stylise le texte du pourcentage de remise (affiché en rouge gras par défaut)
Styles pour le bouton d’action :
.shoply-product-action-button- Stylise les boutons d’action principaux (Add to Cart, View Product, etc.).shoply-product-action-button-sold-out- Stylise le bouton d’action lorsque le produit est en rupture de stock (état désactivé)
Remarque : dans la section Customize AI Search de la console d’administration de l’application Shoply, vous pouvez configurer ce qui se passe lorsque les clients cliquent sur le bouton d’action : ils peuvent ajouter le produit au panier, être redirigés vers la page produit, ou vous pouvez choisir de masquer complètement le bouton d’action.
Classes du résumé IA
.shoply-ai-summary-box- Stylise la boîte conteneur des résumés générés par l’IA..shoply-ai-summary-button- Stylise le bouton qui déclenche la génération du résumé IA.
Exemples de personnalisation des fiches produit dans les résultats de recherche avec CSS
Modifier le style de la marque du produit
La marque du produit apparaît au-dessus du titre du produit. Voici quelques personnalisations courantes :
/* Make brand name smaller and gray */
.shoply-product-brand {
font-size: 11px;
color: #888888;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}Personnaliser le titre du produit
Le nom du produit est l’un des éléments les plus importants. Personnalisez-le pour qu’il corresponde à votre marque :
/* Make product title bold and larger */
.shoply-product-name {
font-size: 18px;
font-weight: 600;
color: #1a1a1a;
line-height: 1.4;
margin-bottom: 8px;
}
/* Add hover effect */
.shoply-product-name:hover {
color: #0066cc;
text-decoration: underline;
}Exemples de style pour les prix des produits
Faites ressortir vos prix grâce à un style personnalisé :
/* Style the current price (after discount) */
.shoply-product-price {
font-size: 20px;
font-weight: 700;
color: #e74c3c;
margin-top: 10px;
}
/* Style the original price (before discount) - greyed out with strikethrough */
.shoply-product-original-price-before-discount {
font-size: 14px;
color: #999999;
margin-left: 8px;
text-decoration: line-through;
}Personnaliser les boutons d’action
Vos boutons d’action (Add to Cart, View Product) peuvent être stylisés pour correspondre au design de votre boutique :
/* Style the main action button with blue background, white text, rounded corners, and smooth transitions */
.shoply-product-action-button {
background-color: #0066cc !important;
color: #ffffff !important;
border-radius: 6px;
padding: 12px 24px;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
border: none;
}
/* Add hover effect - darker blue background, slight lift, and shadow */
.shoply-product-action-button:hover {
background-color: #0052a3 !important;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 102, 204, 0.3);
}
/* Style sold-out button - grey background, darker grey text, disabled cursor, and reduced opacity */
.shoply-product-action-button-sold-out {
background-color: #cccccc !important;
color: #666666 !important;
cursor: not-allowed;
opacity: 0.6;
}Styliser les images des produits
Améliorez vos images produit avec des bordures, des ombres ou des effets au survol :
/* Add border and shadow to product images */
.shoply-product-image {
border-radius: 8px;
border: 2px solid #f0f0f0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
/* Add hover effect of the product image*/
.shoply-product-image:hover {
transform: scale(1.05);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}Exemples de personnalisation de la section AI Summary
Pour les boutiques qui activent AI Search, AI Summary apparaîtra en haut des résultats de recherche et expliquera instantanément quoi acheter et pourquoi en se basant sur les résultats de recherche — avant même que les clients ne fassent défiler les produits.
Vous pouvez désactiver AI Summary sur la page Customize AI Search dans la console d’administration de l’application. Vous pouvez également personnaliser son apparence avec CSS comme indiqué ci-dessous.
Styliser la boîte AI Summary
/* Style the AI summary box with purple gradient background, white text, rounded corners, shadow, and semi-transparent border */
.shoply-ai-summary-box {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #ffffff;
padding: 24px;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Alternative: Light theme - light gray background with subtle border and shadow */
.shoply-ai-summary-box {
background-color: #f8f9fa;
border: 1px solid #e9ecef;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}Personnaliser le bouton AI Summary
Par défaut, AI Summary reste court et concis afin d’économiser de l’espace à l’écran. Les clients peuvent cliquer sur le “AI Summary Button” pour développer et voir tous les détails. Vous voulez qu’il corresponde à votre marque ? Vous pouvez aussi personnaliser ce bouton ! Consultez les exemples ci-dessous.
/* Customize the summary button */
.shoply-ai-summary-button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
color: #ffffff !important;
border: none;
border-radius: 20px;
padding: 10px 20px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
/* Add hover effect */
.shoply-ai-summary-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}Dépannage
Mes modifications CSS ne s’affichent pas
- Vérifiez les fautes de frappe : assurez-vous que les noms de vos classes CSS sont correctement orthographiés (ils commencent par
.shoply-) - Videz le cache de votre navigateur : les navigateurs mettent parfois en cache d’anciens styles
- Vérifiez la syntaxe CSS : assurez-vous que toutes vos règles CSS sont correctement fermées avec
} - Utilisez
!important: si les styles ne s’appliquent pas, vous devrez peut-être ajouter!importantpour remplacer les styles par défaut :css.shoply-product-action-button { background-color: #ff0000 !important; }
Les styles sont différents sur mobile
Certains styles peuvent nécessiter des ajustements spécifiques au mobile. Utilisez des media queries :
@media (max-width: 768px) {
.shoply-product-name {
font-size: 14px;
}
}Besoin de rétablir les styles par défaut
Effacez simplement le contenu de la zone de texte CSS et enregistrez. L’application reviendra au style par défaut.
Besoin d’aide supplémentaire ?
Si vous avez besoin d’une assistance supplémentaire pour la personnalisation CSS :
- Consultez les exemples visuels dans les paramètres de l’application (Product Card Preview et AI Summary Preview)
- Référez-vous à des ressources de documentation CSS comme MDN Web Docs
- Contactez notre équipe d’assistance pour une aide personnalisée à customer-obsession@shoplyai.ai
Bonne personnalisation ! 🎨
Avec ces classes CSS, vous avez un contrôle total sur l’apparence de vos résultats de recherche. Expérimentez, testez et créez une expérience de recherche qui correspond parfaitement à votre marque !