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.

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 Web → Modifier le site).
2. Accédez à Titre et couverture → Logo 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 :
   

   

   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.

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 :

   /*  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 :
   

   

   /* 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
  }

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 :

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 →