Personnalisation de l'interface

Adaptez la recherche à votre boutique

Mises en page prédéfinies, réglages des cartes produit, variables CSS et points d'intégration au thème. L'équipe de la boutique configure sans code ; les développeurs disposent d'une API de personnalisation documentée.

Essayer la démo PrestaShop Voir toutes les fonctionnalités

Réglages du Back Office

Configurez la recherche sans code

Commencez par les préréglages et contrôles du Back Office. Adaptez l'interface sans modifier les modèles ni reconstruire la configuration de recherche.

Choisissez la mise en page du widget et de la page de résultats.
Affichez ou masquez suggestions, catégories, produits et résumé des facettes.
Réglez l'affichage de la marque, des prix, des badges et des CTA sur les cartes produit.
Remplacez les libellés de boutons pris en charge et le message d'aide sans résultat.
Réordonnez les sections et champs autorisés lorsque la mise en page le permet.

Personnalisation des cartes produit

Choisissez une carte produit ou créez la vôtre

Partez d'un modèle standard ou horizontal. Pour un contrôle complet, utilisez un modèle HTML personnalisé avec vos données, vos styles et les interactions prises en charge.

Modèles de carte inclus

Choisissez une carte standard ou horizontale selon le contexte de la boutique.

Contenu configurable

Affichez, masquez et ordonnez les champs autorisés : marque, prix, prix initial, badges et boutons d'action.

Modèle HTML avancé

Créez un composant ProductCard avec un modèle HTML sécurisé compatible Mustache et les données produit documentées.

Champs et actions supplémentaires

Utilisez les emplacements déclarés pour les champs supplémentaires et les marqueurs data-kea-action pour les interactions prises en charge.

Interface développeur

Une API de personnalisation documentée

Les agences personnalisent et intègrent la recherche grâce à une API, des classes CSS et des points d'extension documentés, sans dépendre du fonctionnement interne des composants.

01

Classes publiques kea-*

Styles sémantiques

Les classes documentées ciblent la recherche, les résultats, les cartes produit, les filtres et leurs éléments sémantiques.

02

Variables de thème --kea-*

Contrôles du thème

Les variables pilotent couleurs, typographie, espacements, bordures, grilles et proportions de mise en page.

03

Marqueurs data-kea-*

États et interactions

Les modes, vues, écrans, seuils d'adaptation, rôles et actions pris en charge sont exposés par des marqueurs documentés.

Les classes générées par le framework restent des détails d'implémentation. Les classes, variables, marqueurs et événements documentés constituent l'interface publique stable.

Ouvrir la documentation développeur

Mode Aperçu

Vérifiez les changements avant leur mise en ligne

Modifiez la mise en page, les cartes produit et les styles dans le Back Office, puis testez la boutique sans changer ce que les clients voient actuellement.

Comparez la boutique actuelle à l'aperçu en cours de modification.
Vérifiez les suggestions, les résultats, les filtres, les cartes produit et les mises en page sur chaque écran.
Corrigez les avertissements d'intégration ou de modèle avant l'activation.
Appliquez ou abandonnez les changements lorsque la nouvelle expérience est prête.

Boutique en ligne à côté du mode Aperçu dans le Back Office avec réglages de mise en page et de couleur

Réglages de l'interface

Découvrez les contrôles de personnalisation de l'interface

Choisissez une mise en page, modifiez les champs pris en charge des cartes produit, personnalisez les modèles et comparez les aperçus desktop et mobile.