Base de connaissances
Guides
Académie
Tutoriels vidéo
Appuyez sur la touche échap pour quitter :
Articles consultés récemment :

Sommaire

Personnaliser le champ de recherche

La recherche de produits aide les clients à trouver les articles dont ils ont besoin dans votre boutique. Vous pouvez modifier l'apparence du champ de recherche pour l'adapter au design de votre boutique. Si vous souhaitez améliorer la fonctionnalité de recherche, vous pouvez également utiliser des applications depuis le marché des applications Ecwid.

Modifier l'apparence du champ de recherche sur le site instantané

Si vous vendez sur le site instantané d'Ecwid, vous pouvez y ajuster l'apparence du champ de recherche.

Customizing_the_search_box__2_.png

Pour modifier l'apparence du champ de recherche :

  1. Dans l'interface d'administration d'Ecwid, accédez à Aperçu → Gérer le site instantanéModifier le site (ou Site WebModifier le site).
  2. Accédez à Titre et couvertureLogo de la boutique.
  3. Dans l'onglet Conception, cliquez sur l'élément Icône de recherche.
  4. Cliquez sur le champ Couleur et choisissez la couleur dont vous avez besoin à l'aide de l'outil de sélection de couleurs :

    Customizing_the_search_box__1_.png

    Vous pouvez également saisir un code de couleur existant dans le champ Couleur si vous le connaissez déjà.
  5. Cliquez sur Enregistrer et publier.

La couleur choisie sera utilisée pour l'icône de recherche et pour le texte saisi dans le champ de recherche.

Cette instruction fonctionne pour le site instantané de nouvelle génération. Si vous utilisez la version habituelle du site instantané Ecwid, vous pouvez appliquer le code CSS suivant pour modifier l'apparence du champ de recherche.

Modifier l'apparence du widget de recherche

Si vous utilisez le widget de recherche sur Wix, Wordpress, etc. ou sur un site personnalisé, vous pouvez alors modifier le style du champ de saisie et le style du bouton de recherche avec des codes CSS.

Découvrez comment ajouter des codes CSS à votre boutique

Vous pouvez utiliser les codes CSS suivants pour modifier l'apparence des éléments du widget de recherche :

  1. Styles du champ de saisie :Customizing_the_search_box__4_.png
    /*  Styles du champ de saisie */
    input.ecwid-search-widget__input[type="text"] {
     width: 100px; /* Modifiez la largeur tel que souhaité*/
     height: 20px; /* Modifiez la hauteur tel que souhaité*/
     border: solid 1px red; /* Modifiez la couleur de la bordure */
     background-color: blue; /* Modifier la couleur d'arrière-plan */
     font-size: 12px; /* Modifiez la taille de la police dans le champ de recherche */
     color: #000000; /* Modifiez la couleur de la police dans le champ de recherche */
    }
    Modifiez le code couleur #000000 comme vous le souhaitez selon le tableau des couleurs HTML.
  2. Styles du bouton de recherche :

    Customizing_the_search_box__3_.png

    /* Styles du bouton « Rechercher » */
    button.ecwid-search-widget__btn {
     width: 20px; /*Modifiez la largeur tel que souhaité*/
     height: 10px; /*Modifiez la hauteur tel que souhaité*/
     border: solid 1px #ffffff; /*Modifiez la couleur de la bordure*/  
     background: transparent url(image/button_search.png) no-repeat bottom center !important; /*Ajoutez l'image d'arrière-plan*/
    }
    Modifiez le code couleur #ffffff comme vous le souhaitez et remplacez la partie image/button_search.png par le véritable chemin absolu de l'image d'arrière-plan. Par exemple : « http://www.example.com/images/button_bg.png »

Déplacer le champ de recherche

Si vous utilisez le widget de recherche sur un site web personnalisé ou sur Wordpress, alors vous pouvez déplacer le champ de recherche avec des codes CSS.

Pour appliquer les codes, vous devez les ajouter à un thème CSS dans votre administration Ecwid.

Vous pouvez utiliser le code CSS suivant pour déplacer le widget de recherche :

/*Pour déplacer le widget de recherche*/
.ecwid-search-widget {
max-width: 170px; /*Modifiez la largeur tel que souhaité*/
position:relative;
margin-left: 400px; /*Modifiez la marge de gauche tel que souhaité*/
margin-top: 10px; /*Modifiez la marge supérieure tel que souhaité*/
}

Selon la position souhaitée du widget de recherche, indiquez les valeurs correspondantes pour margin-left et margin-top pour le déplacer.

Si votre boutique est sur Wordpress, vous pouvez également utiliser les codes suivants :

  • Pour déplacer le champ de recherche vers la droite :
    
    .ecwid-shopping-cart-search {
        text-align: right
    }
  • Pour centrer le champ de recherche :
    
    .ecwid-shopping-cart-search {
        text-align: center
    }
Si vous avez ajouté une fonctionnalité de recherche à votre boutique Ecwid sur Wix, vous pouvez facilement déplacer votre champ dans l'éditeur Wix. Ouvrez simplement la page où se trouve votre boutique, cliquez sur le champ pour le sélectionner, faites-le glisser et déposez-le pour le positionner comme vous le souhaitez. Une fois terminé, enregistrez et publiez les modifications.

Améliorer la fonctionnalité de recherche

Si vous souhaitez élargir la fonctionnalité de recherche, vous pouvez utiliser l'une des applications du marché des applications Ecwid pour ajouter la recherche avancée à votre boutique :

Disponible pour les abonnements : Venture, Business et Unlimited.

CloudSearch

L'application CloudSearch booste les recherches dans votre boutique avec des suggestions automatiques. Une liste de produits et de catégories suggérés apparaît quand un client écrit quelque chose dans le champ de recherche. Cette liste affiche les informations de base du produit avec une option pour y accéder.

CloudSearch propose également diverses fonctionnalités en plus de la suggestion automatique :

  • Des corrections orthographiques : les recherches avec des mots mal orthographiés donneront des résultats
  • Les synonymes : vous pouvez ajouter des mots similaires pour afficher les mêmes résultats lors d'une recherche
  • La promotion de certains produits lorsqu'un visiteur recherche un mot clé spécifique
  • L'affichage des statistiques de recherche dans votre administration Ecwid

Il s'agit d'une application payante, avec un essai gratuit de 30 jours.

Clickable Brand

L'application Clickable Brand permet d'améliorer la navigation dans votre boutique en rendant l'attribut « Marque » cliquable. Cela permet aux clients de filtrer les produits par marque.

Il s'agit d'une application payante, avec un essai gratuit de 14 jours.

Découvrez comment affecter l'attribut « Marque » à vos produits →

Pour ajouter une fonctionnalité de recherche selon plusieurs critères à votre vitrine, vous pouvez utiliser les filtres de produits.
Cet article vous a-t-il été utile ?

Génial ! Merci pour vos commentaires !

Merci pour vos commentaires !

Nous sommes désolés ! Que s'est-il passé ?
Utilisateurs qui ont trouvé cela utile : 19 sur 48
10
Nous utilisons des cookies et des technologies similaires pour garder vos préférences en mémoire, mesurer l'efficacité de nos campagnes et analyser des données anonymisées afin d'améliorer les performances de notre site. En choisissant « Accepter », vous acceptez l'utilisation de cookies.
Accepter les cookies Refuser