> For the complete documentation index, see [llms.txt](https://smartypilot.gitbook.io/smartypilot/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://smartypilot.gitbook.io/smartypilot/ricerca/layout.md). # Layout Le **Impostazioni di Layout** di Smartypilot ti permettono di personalizzare l'aspetto e le funzionalità del widget di ricerca nel tuo eCommerce. La pagina è organizzata in quattro sezioni tematiche: **Opzioni di ricerca**, **Visualizzazione risultati**, **Carrello** e **Aspetto visivo**.

Le impostazioni di layout del widget di ricerca

*** ## Opzioni di ricerca Questa sezione raccoglie le impostazioni che controllano il comportamento del motore di ricerca e dell'interfaccia di input. ### Ricerca vocale Abilita la ricerca vocale per consentire agli utenti di effettuare ricerche utilizzando la voce. Questa funzione è particolarmente utile su dispositivi mobili. {% hint style="info" %} La ricerca vocale è disponibile nei piani PRO. {% endhint %} ### Apri la ricerca al click nel campo 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 quando la ricerca vocale è attiva. ### Placeholder dinamico nel campo di ricerca Abilita questa opzione per mostrare un testo segnaposto animato nel campo di ricerca. Il testo cambia ciclicamente tra le frasi che configuri, suggerendo agli utenti esempi di ricerca. **Termini del placeholder**: Inserisci le frasi da mostrare nel campo di ricerca, separate da virgola (es. `scarpe da ginnastica, giacche invernali, borse in pelle`). ### Ricerca nella descrizione Per impostazione predefinita Smartypilot cerca nel **nome**, nel **brand** e nella **categoria** del prodotto. Attivando questa opzione, viene incluso anche il campo **descrizione**. #### Quando serve Questa funzione è pensata per i negozi in cui i **nomi prodotto sono poco informativi**: codici articolo (`ART-2341`, `MOD-XL-BLU`), nomi di fantasia (`"Infinity"`, `"Aurora"`), prodotti fashion o di arredamento in cui il nome è una sigla e il senso del prodotto emerge solo leggendo la descrizione. In questi casi un cliente che cerca `"divano angolare grigio tortora"` non troverebbe nulla perché quel testo compare solo nella descrizione, non nel nome. #### Come funziona: due livelli di profondità Quando il toggle principale è attivo, compare una seconda opzione: **Priorità alla descrizione**. I due livelli hanno comportamenti distinti: | Impostazione | Cosa cambia | | -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Solo **Ricerca nella descrizione** attivo | La descrizione entra nel **ranking**: prodotti che la matchano salgono in graduatoria, ma se un prodotto matcha *solo* nella descrizione (e non nel nome, brand o categoria) **non compare** nei risultati. | | **Ricerca nella descrizione** + **Priorità alla descrizione** attivi | La descrizione entra nella **copertura obbligatoria**: prodotti che matchano *soltanto* nella descrizione **compaiono** nei risultati, alla pari di quelli trovati per nome o categoria. | #### Quando usare ciascun livello * Usa solo **Ricerca nella descrizione** se il tuo catalogo ha nomi prodotto ragionevoli ma vuoi dare un piccolo vantaggio ai prodotti con descrizioni ricche. Il rischio di risultati irrilevanti è basso. * Usa anche **Priorità alla descrizione** se i nomi prodotto sono codici o sigle e i clienti cercano con termini che compaiono solo nelle descrizioni. Tieni presente che le descrizioni sono testi lunghi: attivando la copertura obbligatoria potresti ottenere più risultati ma con una rilevanza media leggermente inferiore. Valuta i risultati dopo l'attivazione. {% hint style="warning" %} **Priorità alla descrizione** è disponibile solo se **Ricerca nella descrizione** è già attivo. {% endhint %} *** ## Visualizzazione risultati Questa sezione controlla come vengono presentati i risultati all'utente. ### Larghezza intera Attivando questa opzione, la finestra di ricerca si espande a **schermo intero** anche sui dispositivi desktop, offrendo un'esperienza di ricerca immersiva. Quando un utente avvia una ricerca, i risultati occupano l'intero schermo, nascondendo il contenuto della pagina sottostante.

La ricerca a schermo intero su desktop

**Se non attivi questa opzione**: la ricerca si presenta in una **finestra flottante** che occupa solo una parte dello schermo, permettendo di vedere anche il contenuto della pagina originale in background. **Sui dispositivi mobili** la ricerca sarà sempre a schermo intero, indipendentemente da questa impostazione. {% hint style="info" %} Il logo impostato nella sezione Aspetto visivo non è visualizzabile quando la ricerca è in modalità finestra flottante su desktop. {% endhint %} #### Schermo intero o finestra flottante? * La modalità **schermo intero** su desktop è utile per concentrare completamente l'attenzione dell'utente sui risultati di ricerca. * La modalità **finestra flottante** è preferibile quando si desidera mantenere visibile il contesto della pagina corrente. ### Evidenziazione testo Abilita questa opzione per evidenziare le parole chiave di ricerca nei risultati. Aiuta gli utenti a individuare rapidamente i termini cercati, migliorando la chiarezza dei risultati. ### Vista griglia/lista Attiva questa opzione per permettere agli utenti di scegliere se visualizzare i risultati in modalità **griglia** (più prodotti affiancati) o **lista** (un prodotto per riga). **Vista predefinita**: Scegli quale modalità viene mostrata all'utente al primo caricamento, tra griglia e lista. ### Mostra prodotti esauriti Attiva questa opzione per mostrare un'etichetta sui prodotti che il tuo feed segnala come non disponibili. **Etichetta esaurito**: Personalizza il testo dell'etichetta, ad esempio `"Non disponibile"` o `"Esaurito"`. ### Ordina esauriti in fondo Attivando questa funzione, i prodotti non disponibili vengono automaticamente posizionati alla fine dei risultati di ricerca, rendendo più visibili gli articoli acquistabili. *** ## Carrello Questa sezione raccoglie le opzioni relative all'acquisto diretto dai risultati di ricerca. ### Mostra pulsante carrello Se abilitato, mostra un pulsante **Vai al carrello** nella finestra di ricerca, utile per guidare l'utente alla pagina del carrello dopo aver trovato un prodotto. **URL del carrello**: Inserisci l'URL della pagina del carrello del tuo sito. ### Aggiungi al carrello dai risultati Attiva questa opzione per mostrare un pulsante **Aggiungi al carrello** direttamente nei risultati di ricerca, permettendo agli utenti di aggiungere prodotti senza aprire la scheda prodotto. {% hint style="info" %} Il pulsante Aggiungi al carrello è disponibile nei piani PRO. {% endhint %} Quando abilitato, puoi configurare: * **Usa icona al posto del testo**: visualizza il pulsante come icona invece che come testo. * **Testo pulsante**: il testo del pulsante (es. `"Aggiungi"`, `"Acquista"`). Se usi l'icona, questo testo compare come tooltip. * **Link aggiungi al carrello**: URL dell'azione che gestisce l'aggiunta al carrello. Dipende dal tuo CMS — lascia vuoto per usare il comportamento standard. Disponibile solo per PrestaShop. *** ## Aspetto visivo ### Colori Personalizza i colori del widget di ricerca per adattarlo al tuo brand: * **Primario**: colore principale per elementi chiave (pulsanti, evidenziazioni, bordi attivi). * **Secondario**: colore di supporto per elementi secondari. * **Testo**: colore del testo all'interno del widget. **Tip**: usa gli stessi colori del tema del tuo sito per un aspetto coerente, e assicurati che testo e sfondo abbiano contrasto sufficiente. ### URL logo Inserisci l'URL del logo da visualizzare nell'intestazione della ricerca. {% hint style="info" %} Il logo non è visualizzabile quando la ricerca è in modalità finestra flottante su desktop. {% endhint %} *** ## Sezione Avanzate Per chi desidera un maggiore controllo sull'aspetto del widget, è disponibile una [**sezione Avanzate**](/smartypilot/ricerca/impostazioni-avanzate.md) dove è possibile personalizzare il layout tramite **HTML e CSS personalizzato**. *** {% hint style="info" %} ## Consigli utili ### Colori coerenti con il brand Scegli per il widget gli stessi colori primari del tuo tema. Assicurati che il colore del testo sia sufficientemente contrastato rispetto allo sfondo. ### Ricerca in descrizione: parti dal livello base Se non sei sicuro di aver bisogno della copertura obbligatoria, attiva prima solo **Ricerca nella descrizione** e osserva i risultati per qualche giorno. Passa a **Priorità alla descrizione** solo se noti che i clienti non trovano prodotti che dovrebbero trovare. ### Usa il logo per rafforzare il branding Preferisci un logo in formato PNG o SVG con sfondo trasparente per un aspetto più pulito. ### Prodotti esauriti: combina le due opzioni Attiva sia **Mostra prodotti esauriti** che **Ordina esauriti in fondo**: gli utenti vedranno prima gli articoli acquistabili e sapranno comunque che gli altri esistono. ### Placeholder dinamico: usa termini reali Inserisci nel placeholder le categorie o i prodotti più cercati nel tuo negozio. Questo suggerisce agli utenti cosa possono trovare e riduce le ricerche senza risultati. ### Verifica l'aspetto su dispositivi mobili Sui dispositivi mobili la ricerca è sempre a schermo intero. Testa il widget su vari dispositivi per assicurarti che il layout sia ben organizzato anche su schermi piccoli. {% endhint %}