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 si utilizza un Sito istantaneo di Ecwid, è possibile personalizzare l'aspetto della casella di ricerca sul sito.

Per cambiare l'aspetto della casella di ricerca:

1. Nel pannello di controllo di Ecwid, andare a Panoramica → Gestisci sito istantaneo → Modifica sito (o Sito web → Modifica sito).
2. Cliccare sul blocco Intestazione.
3. Passare alla scheda Design e fare clic sulla voce Icona di ricerca.
4. Fare clic sul campo Colore e scegliere il colore desiderato con l'aiuto dello strumento di selezione del colore:
   

   

   Inoltre, se si conosce già il codice del colore desiderato, è possibile immetterlo nel campo Colore.
5. Premere Salva e pubblica.

Il colore impostato sarà utilizzato per l'icona di ricerca e per i testi digitati nel campo di ricerca.

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.

Clickable Brand

L'applicazione Clickable Brand permette di migliorare l'esplorazione del negozio rendendo cliccabile l'attributo 'Marca'. Ciò consente di filtrare i prodotti per marca.

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

Ulteriori informazioni per assegnare l'attributo 'Marca' ai prodotti →