Layout

Indici -> [il tuo indice] -> Impostazioni -> Layout

Le Impostazioni di Layout di Smartypilot ti permettono di personalizzare l'aspetto e le funzionalità del widget di ricerca nel tuo eCommerce. In questa sezione, puoi definire vari elementi visivi e funzionalità che migliorano l’esperienza utente, rendendo la ricerca più intuitiva e mirata. Inoltre, è disponibile una sezione Avanzate per una personalizzazione più approfondita tramite CSS, offrendo un controllo completo sul design.

Impostazioni di layout

Configurazioni Principali

Come si Presenta la Ricerca

Questa parte delle impostazioni ti permette di configurare vari aspetti del funzionamento e dell’aspetto della ricerca con Smartypilot.

Visualizza etichetta "Prodotto non disponibile"

Attiva questa opzione per mostrare un'etichetta sui prodotti che risultano non disponibili. Un prodotto è considerato non disponibile quando la sua quantità è 0.

Campo Etichetta: Personalizza il testo dell’etichetta, come "Non disponibile", che sarà visibile nei risultati di ricerca.

Sposta alla fine dei risultati i prodotti non disponibili

Attivando questa funzione, i prodotti non disponibili verranno automaticamente posizionati alla fine dei risultati di ricerca, rendendo più visibili gli articoli attualmente acquistabili.

Evidenzia il testo cercato nei risultati

Abilita questa opzione per evidenziare le parole chiave di ricerca nei risultati. Questa funzionalità aiuta gli utenti a individuare rapidamente i termini che hanno cercato, migliorando la chiarezza dei risultati.

Visualizza ricerca a schermo intero

Attivando questa opzione, la finestra di ricerca si espande a schermo intero anche sui dispositivi desktop, offrendo un’esperienza di ricerca immersiva. In questa modalità, quando un utente avvia una ricerca, i risultati occupano l'intero schermo, nascondendo il contenuto della pagina sottostante e creando un focus totale sui risultati di ricerca.

Come si presenta la ricerca a schermo intero

Cosa succede se non attivi questa opzione: Se l'opzione Visualizza ricerca a schermo intero non è attivata, sui dispositivi desktop la ricerca si presenta in una finestra flottante. In modalità flottante, i risultati di ricerca vengono visualizzati in una finestra sovrapposta che occupa solo una parte dello schermo, permettendo all’utente di vedere anche il contenuto della pagina originale in background.

Come si presenta la ricerca flottante

Visualizzazione su dispositivi mobili: È importante notare che su dispositivi mobili la ricerca sarà sempre a schermo intero, indipendentemente da questa impostazione. Questo comportamento garantisce una visualizzazione ottimale sui dispositivi con schermi più piccoli, dove l'esperienza a schermo intero migliora l'usabilità.

Ricerca su dispositivo mobile

Quando scegliere la modalità a schermo intero o flottante:

  • La modalità schermo intero su desktop è utile per concentrare completamente l’attenzione dell’utente sui risultati di ricerca, ideale per ricerche più dettagliate o su siti con molti risultati.

  • La modalità finestra flottante su desktop è preferibile quando si desidera mantenere visibile il contesto della pagina corrente, facilitando il ritorno al contenuto originale senza dover chiudere la finestra di ricerca.

Questa opzione ti offre la flessibilità di adattare l’esperienza di ricerca alle esigenze di navigazione dei tuoi utenti, garantendo un’ottima usabilità sia su desktop che su dispositivi mobili.

Attiva la ricerca vocale

Abilita la ricerca vocale per consentire agli utenti di effettuare ricerche utilizzando la voce. Questa funzione è particolarmente utile su dispositivi mobili.

Apri la finestra di ricerca quando clicco nel campo di ricerca

Abilitando questa opzione, la finestra di ricerca si aprirà subito dopo che l'utente clicca sul campo di ricerca, senza dover iniziare a digitare. Questa configurazione è consigliata se la ricerca vocale è attiva, migliorando l’accessibilità.

Impostazione dei Colori

Questa sezione ti consente di personalizzare i colori del widget di ricerca, in modo che si integri con il design del tuo eCommerce:

  • Colore Primario: Seleziona il colore principale che verrà utilizzato per gli elementi chiave del widget.

  • Colore Secondario: Definisci un colore secondario per elementi di supporto o per contrasto.

  • Colore del Testo: Scegli il colore del testo per garantire una buona leggibilità.

  • URL del Logo: Inserisci l'URL del logo che vuoi visualizzare nel widget di ricerca. Il logo contribuirà a mantenere la coerenza del branding anche all'interno dell’esperienza di ricerca.

Sezione Avanzate

Per chi desidera un maggiore controllo sull’aspetto del widget di ricerca, è disponibile una sezione Avanzate dove è possibile personalizzare il layout tramite CSS personalizzato. In questa sezione puoi aggiungere codice CSS per modificare ulteriormente l’aspetto del widget, applicando stili specifici che si adattano perfettamente al design e al branding del tuo eCommerce.

Consigli utili per migliorare l'aspetto della ricerca

Personalizza i colori per coerenza con il brand

Assicurati che i colori primari, secondari e del testo nel widget di ricerca siano coerenti con il design del tuo eCommerce. Una coerenza cromatica rinforza l’identità visiva del brand e rende la ricerca visivamente integrata con il resto del sito.

Tip: Scegli colori contrastanti per il testo e lo sfondo per migliorare la leggibilità.

Usa il logo per rafforzare il branding

Inserisci l’URL del logo nel widget di ricerca per rendere l’esperienza più personalizzata e riconoscibile. Il logo aiuta gli utenti a identificare la ricerca come parte del tuo eCommerce e rafforza la fiducia nel brand.

Tip: Usa un logo in formato PNG o SVG con sfondo trasparente per un aspetto più pulito e professionale.

Evidenzia il testo cercato per maggiore chiarezza

Attiva l’opzione Evidenzia il testo cercato nei risultati per rendere immediatamente visibili i termini di ricerca all’interno dei risultati. Questa funzionalità aiuta gli utenti a verificare rapidamente la pertinenza dei risultati rispetto alla loro ricerca.

Tip: Assicurati che il colore dell’evidenziazione sia visibile e in contrasto con lo sfondo per migliorare l’efficacia visiva.

Scegli l'opzione "Schermo Intero" su desktop per un’esperienza immersiva

Se il tuo eCommerce ha una vasta gamma di prodotti o se vuoi garantire un’esperienza di ricerca più immersiva, considera di attivare l’opzione Visualizza ricerca a schermo intero anche su desktop. Questo approccio è particolarmente utile per migliorare la concentrazione degli utenti sui risultati.

Tip: Se preferisci mantenere il contesto della pagina visibile, opta per la finestra flottante su desktop.

Utilizza la funzionalità "Prodotto non Disponibile" con etichette personalizzate

Per migliorare la trasparenza con i clienti, attiva l’opzione Visualizza etichetta "Prodotto non disponibile". Assicurati che l’etichetta sia chiara e informativa, come "Non disponibile" o "Esaurito", per evitare confusione tra i clienti.

Tip: Usa l'opzione per spostare i prodotti non disponibili alla fine dei risultati, così gli utenti vedranno prima gli articoli che possono acquistare.

Sfrutta la sezione avanzate per personalizzazioni CSS

Se hai competenze di design o uno sviluppatore disponibile, usa la sezione Avanzate per aggiungere CSS personalizzato. Questo ti permette di modificare ulteriormente lo stile del widget di ricerca, aggiungendo dettagli come bordi, spaziatura, animazioni o altre personalizzazioni visive.

Tip: Per migliorare la navigazione, considera di aggiungere un leggero effetto hover o animazioni per rendere l'interazione con i risultati di ricerca più dinamica e accattivante.

Verifica l’aspetto della ricerca su dispositivi mobili

Ricorda che sui dispositivi mobili la ricerca sarà sempre a schermo intero. Verifica che tutte le impostazioni visive, come i colori e le dimensioni del logo, siano ottimizzate per schermi più piccoli per mantenere una buona esperienza utente su mobile.

Tip: Testa il widget su vari dispositivi per assicurarti che il layout sia sempre ben organizzato e facile da usare, soprattutto per utenti con schermi di dimensioni diverse.

Last updated