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.

Modification de la conception de la boîte de recherche sur le site instantané

Si vous vendez sur le site instantané d'Ecwid, vous pouvez ajuster l'apparence de la zone de recherche sur le site dans les paramètres de la section Menu et en-tête.

Pour modifier l'apparence de la boîte de recherche :

1. Depuis votre interface d'administration Ecwid, accédez à Canaux de vente → Gérer le site instantané → Modifier le site (ou Site Web → Modifier le site).
2. Clique sur la section Menu et en-tête dans la liste située sur la gauche.
3. Passez à l'onglet Conception et choisissez la disposition de bloc que vous préférez.
4. Cliquez sur Arrière-plan et choisissez le style et la couleur pour l'arrière-plan de votre section.
5. Cliquez sur Menu et icônes et choisissez la police et la couleur pour les icônes et les requêtes de votre section saisies dans le champ de recherche.
6. Cliquez sur Publier.

C'est tout ! Le style, la police et les couleurs que vous choisissez seront utilisés pour le champ de recherche et son icône sur votre site Web.

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.