Personalizzare la casella di ricerca

La funzione di ricerca dei prodotti aiuta i clienti a trovare gli articoli di cui hanno bisogno tra quelli disponibili in negozio. È possibile cambiare l'aspetto della casella di ricerca per adattarlo allo stile del negozio. Inoltre, per potenziare la funzione di ricerca, si possono usare le applicazioni dal Mercato delle applicazioni di Ecwid.

Cambiare l'aspetto della casella di ricerca sul Sito istantaneo

Se utilizzi il Sito istantaneo di Ecwid per vendere i tuoi prodotti, puoi personalizzare l'aspetto della casella di ricerca sul sito tramite le impostazioni della sezione Menu e intestazione.

Per cambiare l'aspetto della casella di ricerca:

1. Dal pannello di controllo Ecwid, accedere a Canali di vendita → Gestisci Sito istantaneo → Modifica sito (o Sito web → Modifica sito).
2. Fare clic sulla sezione Menu e intestazione nell'elenco a sinistra.
3. Passare alla scheda Design e scegliere il layout a blocchi desiderato.
4. Fare clic su Sfondo e scegliere lo stile e il colore dello sfondo della sezione interessata.
5. Fare clic su Menu e icone e scegliere il tipo e il colore dei caratteri per le icone presenti nella sezione e per le query immesse nel campo di ricerca.
6. Fare clic su Pubblica.

Fatto! Lo stile, il tipo di carattere e i colori prescelti saranno utilizzati per il campo di ricerca e le sue icone sul sito.

Cambiare l'aspetto del widget di ricerca

Se si utilizza un widget di ricerca su un sito Wix (in inglese), Wordpress, ecc., o su un sito personalizzato, è possibile cambiare lo stile del campo di immissione e del pulsante di ricerca con il codice CSS.

Ulteriori informazioni per usare il codice CSS nel proprio negozio →

Per personalizzare il design degli elementi del widget di ricerca, si possono usare i seguenti codici CSS:

1. Stili del campo di immissione:

   /*  Stili del campo di immissione */
   input.ecwid-search-widget__input[type="text"] {
    width: 100px; /* cambia larghezza secondo necessità*/
    height: 20px; /* cambia altezza secondo necessità*/
    border: solid 1px red; /* cambia colore bordo */
    background-color: blue; /* cambia colore sfondo */
    font-size: 12px; /* cambia dimensione carattere nel campo di ricerca */
    color: #000000; /* cambia colore carattere nel campo di ricerca */
   }

   Cambiare il codice colore #000000 secondo le proprie esigenze facendo riferimento alla tabella colori HTML.
2. Stili del pulsante di ricerca:
   

   

   /* Stili del pulsante "Cerca" */
   button.ecwid-search-widget__btn {
    width: 20px; /* cambia larghezza secondo necessità*/
    height: 10px; /* cambia altezza secondo necessità*/
    border: solid 1px #ffffff; /*cambia colore bordo */  
    background: transparent url(image/button_search.png) no-repeat bottom center !important; /*aggiungi immagine di sfondo*/
   }

   Cambiare il codice colore #ffffff secondo le proprie esigenze e sostituire image/button_search.png con il percorso reale assoluto dell'immagine di sfondo. Ad esempio: "http://www.example.com/images/button_bg.png"

Spostare la casella di ricerca

Se si utilizza un widget di ricerca su un sito personalizzato o su un sito Wordpress, è possibile cambiare la posizione della casella di ricerca con il codice CSS.

Per applicare il codice, bisogna aggiungerlo al tema CSS nel proprio pannello di controllo di Ecwid.

È possibile utilizzare il seguente codice CSS per spostare il widget di ricerca:

/* per spostare il widget di ricerca*/
.ecwid-search-widget {
max-width: 170px; /* cambia larghezza secondo necessità*/
position:relative;
margin-left: 400px; /* cambia margine sinistro secondo necessità*/
margin-top: 10px; /* cambia margine superiore secondo necessità*/
}

A seconda della posizione desiderata del widget di ricerca, immettere i rispettivi valori di margin-left e margin-top per spostarlo.

Se il negozio fa parte di un sito Wordpress, è possibile usare anche i seguenti codici:

• Per spostare la casella di ricerca a destra:

  
  .ecwid-shopping-cart-search {
      text-align: right
  }

• Per posizionare la casella di ricerca al centro:

  
  .ecwid-shopping-cart-search {
      text-align: center
  }

Migliorare la funzionalità di ricerca

Se si desidera potenziare la funzione di ricerca, è possibile usare una delle applicazioni dal Mercato delle applicazioni di Ecwid per aggiungere la ricerca avanzata al proprio negozio:

CloudSearch

L'applicazione CloudSearch permette di potenziare la ricerca nel negozio con suggerimenti automatici. Un elenco di prodotti e categorie suggeriti viene visualizzato mentre un cliente digita nel campo di ricerca. L'elenco mostra le informazioni di base dei prodotti e un'opzione per passare alle rispettive pagine di dettaglio.

Inoltre, CloudSearch offre varie funzionalità oltre ai suggerimenti automatici:

• controllo ortografico: le query di ricerca con errori di ortografia restituiranno dei risultati
• sinonimi: è possibile aggiungere parole simili per mostrare gli stessi risultati durante la ricerca
• promozione di determinati prodotti quando un visitatore cerca una parola chiave specifica
• visualizzazione delle statistiche di ricerca nel pannello di controllo di Ecwid

L'applicazione è a pagamento con un periodo di prova gratuita di 30 giorni.