Comment personnaliser l’apparence de AI Search
Il existe deux façons de personnaliser les résultats de recherche Shoply AI :
- Options intégrées : Commencez par les contrôles de votre console d’administration Shoply AI pour modifier les résumés, les filtres, les boutons, les couleurs et la mise en page des produits sans écrire de code. Découvrez les options intégrées et les aperçus.
- CSS personnalisé : Si ces contrôles ne vous donnent pas le design souhaité, utilisez le CSS — le langage de style des pages web — pour ajuster finement les polices, les espacements, les bordures et d’autres détails visuels. Vous pouvez l’utiliser en complément des paramètres intégrés. Aller au guide CSS.
Vous n’avez probablement pas besoin de CSS du tout
La plupart des modifications de mise en page et d’apparence de la recherche sont déjà disponibles dans Customize AI Search de votre console d’administration Shoply AI, que vous utilisiez Shopify ou une autre plateforme de site web. Essayez d’abord ces options intégrées, puis cliquez sur Save dans l’interface d’administration pour appliquer vos choix. Utilisez le CSS pour les styles que ces contrôles ne couvrent pas.
Les exemples interactifs ci-dessous utilisent les mêmes aperçus que l’interface d’administration. Ce sont des illustrations que vous pouvez tester ici ; elles ne modifient pas votre boutique.
- AI Summary : Activez ou désactivez le résumé, et choisissez s’il apparaît au-dessus ou au-dessous des résultats produits.
- Filtres de recherche : Affichez ou masquez la barre de filtres, et placez les filtres en haut, à gauche ou dans un panneau flottant. La mise en page à gauche se déplace au-dessus des résultats sur les écrans plus petits. Consultez les paramètres de visibilité des filtres de recherche pour l’effet partagé sur les résultats de chat.
- Boutons d’action produit et couleurs : Choisissez Add to Cart, View Product ou No Button. Sélectionnez les couleurs d’arrière-plan et du texte du bouton, et modifiez la couleur des étoiles de notation pour l’harmoniser avec votre boutique.
- Produits par ligne : Choisissez trois ou quatre colonnes sur ordinateur, et une ou deux colonnes sur mobile. Moins de colonnes donnent plus d’espace à l’image de chaque produit.
- Nombre total de produits affichés : Définissez des nombres de produits distincts pour les petits écrans mobiles, les grands écrans mobiles et les ordinateurs. L’administration propose 3, 4, 6, 8, 9, 12, 15, 16, 18 ou 20 produits. Cela contrôle le nombre de résultats, plutôt que le nombre de colonnes.
Si vous avez toujours besoin d’un design personnalisé, poursuivez avec le guide CSS ci-dessous.
Pour commencer
Si les options intégrées ne vous donnent pas l’apparence souhaitée, utilisez un CSS personnalisé pour ajuster finement vos résultats de recherche.
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 n’est disponible que dans Shoply AI Search.
Commencez par activer AI Search avant de le styliser afin de pouvoir prévisualiser les modifications sur de vrais résultats.
Où ajouter votre CSS
Pour masquer toute la barre de filtres, utilisez le contrôle intégré : allez dans 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 :
.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 du résultat de recherche.
Shoply a également défini certains styles par défaut pour ces classes. Vous pouvez inspecter ces styles avec 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 de carte produit
Styles pour le conteneur :
.shoply-product-image- Style l’image du produit.shoply-product-card- Style le conteneur de la carte produit
Styles pour les informations textuelles :
.shoply-product-brand- Style le nom de marque/fournisseur du produit affiché au-dessus du titre du produit.shoply-product-name- Style le titre/nom du produit
Styles pour le prix :
.shoply-product-price- Style le prix du produit (après application de la remise).shoply-product-original-price-before-discount- Style le prix d’origine avant remise (avec décoration barrée par défaut).shoply-product-discount-percent- Style le texte du pourcentage de remise (affiché en rouge gras par défaut)
Styles pour le bouton d’action :
.shoply-product-action-button- Style les principaux boutons d’action (Add to Cart, View Product, etc.).shoply-product-action-button-sold-out- Style 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 AI Summary
.shoply-ai-summary-box- Style la boîte conteneur des résumés générés par l’IA..shoply-ai-summary-button- Style le bouton qui déclenche la génération du résumé IA.
Exemples de personnalisation des cartes produit dans les résultats de recherche avec CSS
Modifier le style de la marque 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 produit
Mettez en valeur 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 fonction des 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 aussi personnaliser son apparence avec du 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 ! Découvrez 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 d’anciens styles en cache
- 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 ont un rendu différent 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 la zone de texte CSS puis 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 !