> 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/impostazioni-avanzate.md).

# Impostazioni avanzate

La sezione **Impostazioni Avanzate** consente di personalizzare in modo approfondito l'aspetto e le funzionalità del widget di ricerca Smartypilot. Questa sezione è pensata per utenti avanzati con esperienza in HTML e CSS, poiché le modifiche apportate qui influenzano direttamente la visualizzazione e l'interattività dei risultati di ricerca sul sito eCommerce.

## Box di Codice HTML per il Box Prodotto

{% hint style="warning" %}
**Attenzione:** Prima di apportare modifiche al codice HTML nel box prodotto, assicurati di fare una copia del codice funzionante attuale. Le modifiche errate al codice HTML possono causare problemi di visualizzazione nei risultati di ricerca. Lavorare con una copia di backup ti permetterà di ripristinare facilmente la configurazione precedente in caso di errori. Utilizza questo box con cautela e solo se hai familiarità con l'HTML.
{% endhint %}

Questo campo ti permette di personalizzare l’HTML del box prodotto nei risultati di ricerca. Utilizzando questo box di codice, puoi modificare la struttura del box prodotto, aggiungere nuovi elementi visivi o funzionalità avanzate.

* **Esempi di Utilizzo**:
  * Aggiungere badge in base a specifici attributi del prodotto (ad esempio, "Nuovo", "In sconto" o "Edizione limitata").
  * Personalizzare l’ordine e il layout delle informazioni di prodotto, come nome, prezzo e immagine, per migliorare l’estetica o l’usabilità.

{% hint style="info" %}
Utilizza questo box con estrema cautela e solo se hai esperienza con il codice HTML, poiché modifiche non corrette possono compromettere la visualizzazione dei risultati di ricerca. È sempre consigliabile testare le modifiche in un ambiente di sviluppo prima di applicarle sul sito live.
{% endhint %}

### Ripristinare il codice HTML al valore predefinito

Se hai modificato il codice e vuoi tornare al template originale, puoi usare il pulsante **Reset HTML**.

Il reset sostituisce il contenuto del box con il template originale, ma **non salva**: diventa definitivo solo quando clicchi **Salva**. Finché non lo fai puoi tornare indietro ricaricando la pagina.

{% hint style="danger" %}
**Attenzione:** dopo il salvataggio l'operazione non è più annullabile, e vengono perse anche le eventuali modifiche apportate dal personale di Smartypilot per ottimizzare la visualizzazione sul tuo sito. Prima di procedere, copia il contenuto attuale del box in un editor di testo in modo da poterlo recuperare se necessario.
{% endhint %}

### Le variabili disponibili

Sotto al box HTML trovi un elenco richiudibile delle **variabili utilizzabili nel template**, divise in tre gruppi:

* **Dati del prodotto** — tutto ciò che arriva dal feed (nome, prezzo, immagine, disponibilità…), nella forma `item.nomeCampo`.
* **Variabili di contesto** — prezzi e informazioni sulla ricerca in corso.
* **Configurazione e variabili temporali** — le impostazioni del widget, nella forma `configArkoSearch.nomeOpzione`.

Nel codice le richiami con la sintassi `${nomeVariabile}`. Consulta l'elenco in pagina prima di scrivere: contiene i nomi esatti dei campi del tuo catalogo.

## Box di Codice CSS Personalizzato

In questo box puoi inserire codice CSS personalizzato per adattare l’aspetto del widget di ricerca al design del tuo sito. Utilizzando il CSS custom, hai il controllo completo su colori, font, spaziatura, bordi e altre proprietà visive.

* **Esempi di Utilizzo**:
  * Modificare i colori di sfondo, testo e bordi per mantenere la coerenza con il branding del tuo eCommerce.
  * Personalizzare la dimensione delle immagini di prodotto, la spaziatura tra i risultati o gli effetti di hover per un’interazione più dinamica.

{% hint style="info" %}
Inserisci solo il CSS necessario per evitare di sovraccaricare il widget e di incorrere in conflitti con gli stili globali del sito. Testa sempre il CSS personalizzato su vari dispositivi per assicurarti che l’aspetto rimanga consistente su tutti gli schermi.
{% endhint %}

## Box di Codice Javascript

L'ultimo box della pagina accetta codice Javascript che **sostituisce il comportamento nativo del pulsante "Aggiungi al carrello"**. Serve quando il tuo sito ha una procedura di aggiunta al carrello particolare, che il comportamento standard di Smartypilot non riesce a riprodurre.

Se non ne hai bisogno, lascialo vuoto: il widget usa il proprio codice.

{% hint style="info" %}
Il codice da incollare nel tuo sito per attivare la ricerca **non è in questa pagina**: lo trovi in [Integrazione](/smartypilot/ricerca/integrazione.md).
{% endhint %}

***

Questa sezione delle **Impostazioni Avanzate** offre un controllo completo su come Smartypilot appare e si comporta sul tuo sito, ma è consigliata solo agli utenti esperti. Utilizzala per perfezionare l’integrazione visiva e funzionale del widget, mantenendo sempre un occhio di riguardo sulla stabilità e sull’usabilità del sito.

***