> ## Documentation Index
> Fetch the complete documentation index at: https://storekit.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Personalizza il design e il branding del negozio in storekit

> Configura logo, colori, font, pulsanti, layout del menu e contenuti della pagina di ordinazione storekit in modo che il tuo negozio corrisponda all'identità visiva del tuo brand.

Design & Branding ti consente di personalizzare l'aspetto, il layout e i contenuti della tua pagina di ordinazione storekit.

Puoi usarlo per aggiornare immagini, colori, tipografia, pulsanti, layout del menu, contenuti delle pagine, avvisi e altri elementi di design rivolti al cliente del tuo negozio.

Le modifiche sono mostrate nell'anteprima man mano che le fai, ma **non vengono applicate alla tua pagina di ordinazione live fino a quando non clicchi su Save**.

<Note>
  La maggior parte dei clienti ordina da dispositivi mobili, quindi ti consigliamo di controllare l'anteprima mobile prima di salvare le modifiche.
</Note>

## Cosa puoi personalizzare

La barra laterale di Design & Branding è organizzata in tre sezioni principali:

| Area     | Cosa include                                                   |
| -------- | -------------------------------------------------------------- |
| Branding | Immagini, Tipografia, Pulsanti, Colori                         |
| Layout   | Menu, Voci di menu, Cestino, Stile dell'intestazione           |
| Content  | Descrizione, Avvisi, Stato dell'ordine, Sezioni personalizzate |

***

## Prima di iniziare

| Area                        | Indicazioni                                                                                                                               |
| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| Accesso                     | Apri il tuo locale nell'admin storekit, poi seleziona **Design & Branding** dal menu di navigazione a sinistra.                           |
| Dispositivo consigliato     | Design & Branding funziona meglio su desktop o laptop.                                                                                    |
| Anteprima                   | L'anteprima si aggiorna man mano che effettui modifiche, così puoi rivedere il tuo design prima di salvare.                               |
| Anteprima mobile            | Controlla sempre l'anteprima mobile prima di salvare, poiché la maggior parte dei clienti ordina da mobile.                               |
| Salvataggio delle modifiche | Le modifiche vengono applicate alla tua pagina di ordinazione live solo dopo aver cliccato su **Save**.                                   |
| Annulla / Ripristina        | Usa `Ctrl + Z` per annullare e `Ctrl + Y` o `Ctrl + Shift + Z` per ripristinare.                                                          |
| Accesso alle funzionalità   | Alcune sezioni di Design & Branding richiedono **storekit+**. Se una sezione è bloccata, potresti dover eseguire l'upgrade per accedervi. |

<Warning>
  Se lasci la pagina prima di salvare, le tue modifiche potrebbero essere perse.
</Warning>

***

## Accesso alle funzionalità Design & Branding

Alcune sezioni di Design & Branding sono disponibili solo con **storekit+**.

Se una sezione è bloccata nel tuo admin, il tuo piano attuale potrebbe non includere l'accesso completo a Design & Branding. Per sbloccare tutte le opzioni di Design & Branding, dovrai eseguire l'upgrade a **storekit+**.

<Note>
  Ti serve accesso completo a Design & Branding? [Contatta il supporto storekit](/docs/it/getting-started/contact-support) per aggiungere questa funzionalità al tuo account. È richiesto un abbonamento **storekit+**.
</Note>

***

## Branding

Le impostazioni Branding controllano l'identità visiva della tua pagina di ordinazione.

La sezione Branding include:

* Immagini
* Tipografia
* Pulsanti
* Colori

***

### Immagini

La sezione **Immagini** ti consente di aggiornare le principali risorse immagine utilizzate sulla tua pagina di ordinazione.

| Impostazione        | Cosa controlla                                                                       | Dove i clienti possono vederla                                                          | Formato consigliato                                                  |
| ------------------- | ------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
| Logo                | Il tuo logo principale del brand                                                     | Area dell'intestazione o dell'eroe, a seconda dello stile dell'intestazione selezionato | Immagine quadrata consigliata. Il PNG trasparente funziona meglio.   |
| Nav logo            | Logo mostrato nella barra di navigazione sticky                                      | Barra di navigazione in alto quando i clienti scorrono                                  | Immagine quadrata consigliata.                                       |
| Favicon             | Piccola icona del browser                                                            | Scheda del browser e segnalibri                                                         | Immagine quadrata, come `32 × 32px` o `180 × 180px`.                 |
| Header image        | Immagine principale utilizzata nell'area dell'intestazione o dell'eroe               | Parte superiore della tua pagina di ordinazione                                         | Immagine landscape consigliata.                                      |
| Page background     | Immagine di sfondo dietro la pagina di ordinazione                                   | Sfondo dell'intera pagina                                                               | Usa un'immagine che funzioni bene dietro testo e contenuto del menu. |
| Pay-at-Table header | Immagine di intestazione utilizzata per l'ordinazione Pay-at-Table, dove disponibile | Flusso di ordinazione Pay-at-Table                                                      | Immagine landscape consigliata.                                      |

#### Suggerimenti per le immagini

* Usa immagini di alta qualità che corrispondano al tuo brand.
* Mantieni i loghi semplici e facili da riconoscere.
* Usa immagini quadrate per loghi e favicon.
* Usa immagini landscape per le immagini di intestazione.
* Evita di posizionare testo importante vicino al bordo delle immagini di intestazione, poiché le immagini possono essere ritagliate in modo diverso su mobile.
* Controlla sempre l'anteprima mobile prima di salvare.

<Note>
  Le immagini di intestazione possono essere ritagliate in modo diverso a seconda delle dimensioni dello schermo. Per i migliori risultati, mantieni la parte più importante dell'immagine centrata.
</Note>

***

### Tipografia

La sezione **Tipografia** ti consente di regolare lo stile del testo utilizzato in tutta la tua pagina di ordinazione.

Puoi personalizzare la tipografia per diverse aree di testo, come intestazioni, corpo del testo, pulsanti e testo del menu. Ciascuna impostazione tipografica controlla il font usato, se il testo è in maiuscolo e la scala delle dimensioni.

| Impostazione           | Cosa controlla                                              | Impatto sul cliente                                                             |
| ---------------------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------- |
| Font                   | Il font utilizzato per l'area di testo selezionata          | Cambia lo stile complessivo e la sensazione del brand del testo                 |
| Maiuscole              | Se il testo selezionato appare in caso standard o maiuscolo | Può rendere intestazioni, pulsanti o etichette più prominenti                   |
| Scala delle dimensioni | La dimensione relativa dell'area di testo selezionata       | Rende il testo selezionato più piccolo o più grande nella pagina di ordinazione |

#### Font

L'impostazione del font controlla il carattere tipografico utilizzato per l'area di testo selezionata.

Per impostazione predefinita, la pagina di ordinazione può utilizzare il font di sistema. Puoi anche caricare un file di font personalizzato dove supportato.

<Note>
  I font personalizzati devono essere caricati come file font `WOFF2`.
</Note>

#### Maiuscole

L'interruttore delle maiuscole ti consente di scegliere se l'area di testo selezionata utilizza le maiuscole standard o lo stile maiuscolo.

Questo può essere utile per far risaltare più chiaramente intestazioni, pulsanti o etichette del menu.

<Warning>
  Usa con attenzione lo stile maiuscolo. Lunghe sezioni di testo in maiuscolo possono essere più difficili da leggere, specialmente su mobile.
</Warning>

#### Scala delle dimensioni

La scala delle dimensioni ti consente di regolare la dimensione relativa dell'area di testo selezionata.

Ad esempio, ridurre la scala delle dimensioni rende il testo selezionato più piccolo, mentre aumentarla lo rende più grande. Questo è utile se intestazioni, nomi dei prodotti, descrizioni o pulsanti sembrano troppo grandi o troppo piccoli per il design del tuo negozio.

#### Suggerimenti per la tipografia

* Carica un file di font `WOFF2` se usi un font personalizzato.
* Scegli stili di testo facili da leggere.
* Usa le maiuscole con attenzione, specialmente per testi più lunghi.
* Regola la scala delle dimensioni se intestazioni, voci di menu o pulsanti sembrano troppo grandi o troppo piccoli.
* Controlla nomi di prodotti e descrizioni più lunghi prima di salvare.
* Controlla sempre l'anteprima mobile prima di salvare.

<Note>
  Le modifiche tipografiche possono influenzare la spaziatura e il layout, specialmente su mobile. Controlla sempre l'anteprima mobile prima di salvare.
</Note>

***

### Pulsanti

La sezione **Pulsanti** ti consente di personalizzare l'aspetto dei pulsanti rivolti al cliente in tutta la tua pagina di ordinazione.

I pulsanti vengono utilizzati per azioni importanti del cliente, come aggiungere articoli al cestino, visualizzare il cestino, iniziare il checkout e effettuare un ordine.

| Impostazione        | Cosa influenza                                                  | Impatto sul cliente                                                           |
| ------------------- | --------------------------------------------------------------- | ----------------------------------------------------------------------------- |
| Stile del pulsante  | L'aspetto complessivo dei pulsanti                              | Cambia come appaiono i pulsanti di azione sulla pagina di ordinazione         |
| Forma del pulsante  | Lo stile degli angoli del pulsante, come arrotondato o quadrato | Cambia la sensazione visiva dei pulsanti                                      |
| Colori del pulsante | Colori di sfondo e testo del pulsante                           | Influisce sulla chiarezza con cui i clienti possono vedere e usare i pulsanti |

#### Suggerimenti per i pulsanti

* Usa colori che si distinguano chiaramente dallo sfondo della pagina.
* Assicurati che il testo del pulsante sia facile da leggere.
* Controlla azioni importanti come **Add to basket**, **View basket** e i pulsanti di checkout.
* Evita colori dei pulsanti che si mescolino con la pagina.

<Warning>
  I pulsanti sono parte del percorso di ordinazione, quindi assicurati che rimangano chiari e facili da toccare su mobile.
</Warning>

***

### Colori

La sezione **Colori** ti consente di personalizzare la palette di colori della tua pagina di ordinazione.

Le impostazioni dei colori influenzano il tema generale, gli sfondi, il testo, gli accenti, i pulsanti, le voci di menu, i modificatori e altri elementi rivolti al cliente.

#### Preset

I preset ti consentono di applicare rapidamente un tema di colori predefinito alla tua pagina di ordinazione.

Questo può essere utile se vuoi partire da uno stile già pronto, come un tema minimale, un tema in modalità scura o un'altra palette preset, prima di apportare modifiche più dettagliate ai colori.

<Note>
  Dopo aver scelto un preset, puoi comunque regolare manualmente i singoli campi di colore.
</Note>

#### Mostra avvisi di contrasto

L'interruttore **Show contrast warnings** evidenzia le coppie di colori di testo e sfondo che potrebbero essere difficili da leggere.

Quando abilitato, Design & Branding controlla se le combinazioni di colori selezionate soddisfano le linee guida di contrasto WCAG AA.

<Info>
  Gli avvisi di contrasto evidenziano coppie testo/sfondo che non superano il contrasto WCAG AA: `4.5:1` per testo standard e `3:1` per testo grande. Punta ad AA o superiore per garantire la leggibilità a tutti gli utenti.
</Info>

#### Impostazioni dei colori

| Impostazione                                                  | Cosa influenza                                                                          | Suggerimenti                                                                             |
| ------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| Barra del browser mobile e nav desktop                        | Il colore utilizzato per l'area del browser mobile e la navigazione desktop             | Usa un colore che corrisponda al tuo brand mantenendo la navigazione leggibile.          |
| Sfondo della pagina                                           | Il colore di sfondo principale della pagina di ordinazione                              | Usa un colore neutro che consenta al contenuto del menu di risaltare.                    |
| Sfondo della pagina più scuro                                 | Una tonalità di sfondo più scura utilizzata in alcune aree della pagina                 | Mantienila abbastanza vicina allo sfondo principale per sembrare coerente.               |
| Sfondi primari                                                | Aree di sfondo principali nella vetrina                                                 | Di solito funziona meglio come colore di sfondo pulito e leggibile.                      |
| Sfondi secondari                                              | Pannelli secondari o aree di contenuto                                                  | Usalo per separare sottilmente le sezioni senza ridurre la leggibilità.                  |
| Sfondo della barra di navigazione delle categorie             | Colore di sfondo per la barra di navigazione delle categorie                            | Assicurati che i nomi delle categorie rimangano leggibili.                               |
| Nomi di categorie e articoli                                  | Colore del testo per i nomi di categorie e articoli                                     | Usa un forte contrasto in modo che i clienti possano leggere facilmente le voci di menu. |
| Navigazione delle categorie e nomi dei gruppi di modificatori | Colore del testo per la navigazione delle categorie e i nomi dei gruppi di modificatori | Mantienilo chiaro, specialmente su mobile.                                               |
| Prezzi                                                        | Colore del testo per i prezzi degli articoli                                            | I prezzi devono essere facili da leggere e non troppo sottili.                           |
| Descrizioni degli articoli (anteprima)                        | Colore del testo per le descrizioni brevi degli articoli                                | Usa abbastanza contrasto in modo che le descrizioni rimangano leggibili.                 |
| Descrizioni degli articoli (complete)                         | Colore del testo per le descrizioni complete degli articoli                             | Controlla le descrizioni più lunghe su mobile.                                           |
| Colore di accento                                             | Colore di evidenziazione utilizzato su elementi selezionati                             | Scegli un colore che si distingua chiaramente dallo sfondo.                              |
| Colore primario                                               | Colore del tema principale utilizzato nella pagina di ordinazione                       | Usa il colore del brand approvato dove possibile.                                        |
| Colore secondario                                             | Colore del tema di supporto                                                             | Usa questo per complementare il colore primario.                                         |
| Colore del bordo di evidenziazione                            | Colore del bordo utilizzato per evidenziare elementi selezionati o importanti           | Assicurati che gli articoli selezionati siano facili da identificare.                    |
| Colore delle azioni secondarie                                | Colore utilizzato per azioni secondarie                                                 | Mantienilo visibile, ma meno prominente delle azioni primarie.                           |
| Sfondo dell'overlay                                           | Colore di sfondo utilizzato per overlay o aree in stile modale                          | Assicurati che il contenuto dell'overlay rimanga leggibile.                              |
| Sfondo secondario trasparente                                 | Colore di sfondo secondario trasparente                                                 | Usalo con attenzione in modo che testo e pulsanti rimangano chiari.                      |
| Sfondo della card del modificatore                            | Colore di sfondo per le card delle opzioni dei modificatori                             | Assicurati che le opzioni dei modificatori siano facili da scansionare.                  |
| Sfondo della card del modificatore selezionato                | Colore di sfondo per le opzioni dei modificatori selezionati                            | Le opzioni selezionate devono essere visivamente chiare.                                 |
| Bordi e ombre                                                 | Stile di bordo e ombra per alcuni elementi della pagina                                 | Usa uno stile sottile per separare i contenuti senza far sembrare la pagina disordinata. |

#### Suggerimenti per i colori

* Inizia con un preset se vuoi un tema veloce, poi regola i singoli colori come necessario.
* Usa i colori del tuo brand dove possibile.
* Usa codici hex esatti se hai linee guida per il brand.
* Attiva **Show contrast warnings** durante la modifica.
* Assicurati che il testo rimanga leggibile sullo sfondo.
* Controlla pulsanti, cestino, checkout, avvisi, modificatori e descrizioni dei prodotti.
* Visualizza in anteprima su mobile prima di salvare.

<Warning>
  Un contrasto di colori scarso può rendere la tua pagina di ordinazione difficile da usare. I clienti dovrebbero essere in grado di leggere chiaramente nomi di prodotti, descrizioni, prezzi, avvisi, opzioni dei modificatori, totali del cestino e pulsanti di checkout.
</Warning>

***

## Layout

Le impostazioni di Layout controllano come è organizzata la tua pagina di ordinazione e come i clienti navigano nel menu, nel cestino e nell'intestazione.

La sezione Layout include:

* Menu
* Voci di menu
* Cestino
* Stile dell'intestazione

***

### Menu

La sezione **Menu** ti consente di personalizzare come il tuo menu viene visualizzato ai clienti.

Puoi scegliere il layout complessivo degli articoli, regolare quante colonne vengono mostrate su desktop e mobile, controllare la dimensione delle immagini, scegliere la direzione degli articoli e decidere come appaiono le immagini di navigazione delle categorie.

<Note>
  Le modifiche al layout del menu influenzano come i clienti navigano nel tuo menu. Controlla sempre l'anteprima desktop e mobile prima di salvare.
</Note>

#### Layout degli articoli

Il layout degli articoli controlla la struttura complessiva utilizzata per visualizzare le voci di menu.

| Layout     | Cosa fa                                                          |
| ---------- | ---------------------------------------------------------------- |
| List       | Visualizza le voci di menu in una semplice lista verticale       |
| 2-col list | Visualizza le voci di menu in un layout a lista a due colonne    |
| Cards      | Visualizza le voci di menu come blocchi più grandi in stile card |
| 2-col grid | Visualizza le voci di menu in una griglia a due colonne          |
| 3-col grid | Visualizza le voci di menu in una griglia a tre colonne          |
| Compact    | Visualizza le voci di menu in un layout più condensato           |

#### Personalizza il layout del menu

Le opzioni **Personalizza** ti consentono di regolare il layout selezionato in maggior dettaglio.

| Impostazione                            | Cosa controlla                                                        | Impatto sul cliente                                                                          |
| --------------------------------------- | --------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| Colonne desktop                         | Numero di colonne mostrate su desktop                                 | Controlla quante voci di menu appaiono in ogni riga su schermi più grandi                    |
| Colonne mobile                          | Numero di colonne mostrate su mobile                                  | Controlla se le voci di menu appaiono in una o più colonne su mobile                         |
| Dimensione dell'immagine                | Dimensione delle immagini delle voci di menu                          | Influenza quanto sono prominenti le immagini degli articoli                                  |
| Direzione dell'articolo                 | Posizione del testo e dell'immagine all'interno di ogni voce di menu  | Cambia se l'immagine appare accanto, invertita o sopra il testo dell'articolo                |
| Immagini grandi                         | Utilizza immagini a piena larghezza sulle voci di menu                | Rende le immagini degli articoli più prominenti dove supportato                              |
| Mostra un simbolo di valuta             | Mostra il simbolo della valuta accanto ai prezzi                      | Visualizza simboli come `£`, `$` o `€` accanto ai prezzi degli articoli                      |
| Immagini di navigazione delle categorie | Controlla dove appaiono le immagini delle categorie nella navigazione | Può mostrare le immagini delle categorie solo su desktop, su desktop e mobile o nasconderle  |
| Posizione delle storie                  | Controlla dove appaiono le storie nel menu                            | `0` posiziona le storie in cima al menu, `1` le posiziona dopo la prima categoria e così via |

#### Direzione dell'articolo

La direzione dell'articolo controlla come sono disposti l'immagine e il testo all'interno di ciascuna voce di menu.

| Opzione | Cosa fa                                                                   |
| ------- | ------------------------------------------------------------------------- |
| Row     | Mostra l'immagine e i dettagli dell'articolo affiancati                   |
| Reverse | Inverte il layout affiancato                                              |
| Stacked | Posiziona l'immagine e i dettagli dell'articolo uno sopra o sotto l'altro |

#### Immagini di navigazione delle categorie

Le immagini di navigazione delle categorie controllano se le immagini delle categorie vengono mostrate nella navigazione del menu.

| Opzione          | Cosa fa                                                                        |
| ---------------- | ------------------------------------------------------------------------------ |
| Solo desktop     | Mostra le immagini di navigazione delle categorie solo su desktop              |
| Desktop e mobile | Mostra le immagini di navigazione delle categorie sia su desktop che su mobile |
| Nessuna          | Nasconde le immagini di navigazione delle categorie                            |

#### Suggerimenti per il menu

* Scegli un layout adatto alla dimensione e allo stile del tuo menu.
* Usa layout a lista o compatti per menu più semplici.
* Usa layout a card o griglia se il tuo menu si basa fortemente sulle immagini.
* Mantieni le colonne mobile facili da navigare. Una colonna è di solito più chiara per nomi o descrizioni lunghi.
* Controlla i prodotti con nomi lunghi, descrizioni lunghe, modificatori e immagini prima di salvare.
* Attiva il simbolo della valuta se i prezzi non sono chiari senza di esso.
* Se usi le immagini di navigazione delle categorie, assicurati che le immagini delle categorie siano chiare e coerenti.
* Visualizza in anteprima sia desktop che mobile prima di salvare.

<Warning>
  I layout con più colonne o immagini grandi possono apparire bene su desktop ma sembrare affollati su mobile. Controlla sempre l'anteprima mobile prima di salvare.
</Warning>

<Note>
  Design & Branding controlla come viene presentato il tuo menu. Nomi, prezzi, modificatori, immagini e disponibilità dei prodotti potrebbero dover essere aggiornati dall'editor del menu o da un'altra area rilevante dell'admin.
</Note>

***

### Voci di menu

La sezione **Voci di menu** ti consente di personalizzare come i singoli prodotti appaiono sulla tua pagina di ordinazione e come vengono mostrati i dettagli degli articoli quando un cliente apre un articolo.

Questo include il layout del modale dell'articolo, la visualizzazione dei modificatori, la visualizzazione delle scorte basse, la visualizzazione degli allergeni, informazioni sui macronutrienti, controlli dell'età e quante righe di testo dell'articolo vengono mostrate.

<Note>
  Le impostazioni delle voci di menu influenzano come i clienti visualizzano i prodotti ed effettuano selezioni. Controlla sempre gli articoli con immagini, modificatori, allergeni e descrizioni lunghe prima di salvare.
</Note>

#### Modale dell'articolo

Il modale dell'articolo è la finestra pop-up o la vista dettaglio dell'articolo che i clienti vedono quando selezionano una voce di menu.

| Impostazione                   | Cosa controlla                                                                 | Impatto sul cliente                                                                      |
| ------------------------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
| Stile dell'immagine del modale | La dimensione dell'immagine dell'articolo all'interno del modale dell'articolo | Controlla quanto è prominente l'immagine del prodotto quando viene aperto un articolo    |
| Vista desktop del modale       | Il layout del modale dell'articolo su desktop                                  | Influenza come sono disposti immagine, dettagli dell'articolo, modificatori e azioni     |
| Posizione del contenuto        | L'allineamento del contenuto all'interno del modale dell'articolo              | Controlla se il contenuto dell'articolo utilizza il layout predefinito o appare centrato |
| Bordo del modale               | Stile, colore e larghezza del bordo intorno al modale dell'articolo            | Aggiunge o rimuove un bordo intorno al modale                                            |

#### Stile dell'immagine del modale

| Opzione | Cosa fa                                                         |
| ------- | --------------------------------------------------------------- |
| Medium  | Mostra un'immagine di dimensione media nel modale dell'articolo |
| Large   | Mostra un'immagine più grande nel modale dell'articolo          |

#### Vista desktop del modale

| Opzione             | Cosa fa                                                                               |
| ------------------- | ------------------------------------------------------------------------------------- |
| Default             | Utilizza il layout standard del modale dell'articolo                                  |
| Desktop wide        | Utilizza un layout modale più ampio su desktop                                        |
| Desktop large       | Utilizza un layout modale più grande su desktop                                       |
| Desktop extra large | Utilizza un layout modale extra-large su desktop                                      |
| Desktop fullscreen  | Mostra il modale in un layout in stile fullscreen su desktop                          |
| Desktop info panel  | Utilizza un layout con le informazioni dell'articolo mostrate in un pannello separato |

#### Posizione del contenuto

| Opzione  | Cosa fa                                                      |
| -------- | ------------------------------------------------------------ |
| Default  | Utilizza l'allineamento standard del contenuto dell'articolo |
| Centrato | Centra il contenuto dell'articolo all'interno del modale     |

#### Stile dei modificatori

Lo stile dei modificatori controlla come appaiono le opzioni degli articoli e i gruppi di modificatori quando i clienti personalizzano un articolo.

| Opzione               | Cosa fa                                                                    |
| --------------------- | -------------------------------------------------------------------------- |
| Default               | Mostra i modificatori nel layout a lista standard                          |
| Cards                 | Mostra le opzioni dei modificatori come card                               |
| Cards (solo immagine) | Mostra le opzioni dei modificatori come card focalizzate sull'immagine     |
| Landscape cards       | Mostra le opzioni dei modificatori come card più larghe in stile landscape |

#### Visualizzazione delle scorte basse

La visualizzazione delle scorte basse controlla se i clienti possono vedere le informazioni sull'inventario rimanente per gli articoli con scorte limitate.

| Opzione                        | Cosa fa                                                                                 |
| ------------------------------ | --------------------------------------------------------------------------------------- |
| Nascondi                       | Non mostra informazioni su scorte basse o inventario                                    |
| Solo basse                     | Mostra un'etichetta di scorte basse quando l'inventario è basso, ad esempio `10 o meno` |
| Visualizza sempre l'inventario | Mostra l'importo dell'inventario rimanente ai clienti                                   |

<Note>
  Usa le opzioni di visualizzazione dell'inventario solo se i livelli di stock sono attivamente mantenuti e accurati.
</Note>

#### Visualizzazione degli allergeni

La visualizzazione degli allergeni controlla come appaiono le informazioni sugli allergeni sulle voci di menu.

| Opzione | Cosa fa                                                         |
| ------- | --------------------------------------------------------------- |
| Default | Mostra gli allergeni nello stile compatto standard              |
| Estesa  | Mostra le informazioni sugli allergeni in uno stile più espanso |

<Warning>
  Le informazioni sugli allergeni dovrebbero essere sempre accurate e mantenute aggiornate. Se non sei sicuro che gli allergeni dell'articolo siano corretti, controlla le impostazioni pertinenti della voce di menu prima di fare affidamento sulla visualizzazione.
</Warning>

#### Calcolatore di macronutrienti

Il calcolatore di macronutrienti controlla se le informazioni nutrizionali sui macronutrienti vengono mostrate ai clienti, dove disponibili.

| Opzione          | Cosa fa                                                           |
| ---------------- | ----------------------------------------------------------------- |
| Disabilitato     | Non mostra informazioni sui macronutrienti                        |
| Mostra su mobile | Mostra informazioni sui macronutrienti su mobile, dove supportato |

#### Controllo dell'età

Il controllo dell'età controlla se ai clienti viene chiesto di confermare la loro età prima di visualizzare o ordinare determinati articoli.

| Opzione      | Cosa fa                                         |
| ------------ | ----------------------------------------------- |
| Disabilitato | Non mostra un controllo dell'età                |
| Oltre 18     | Mostra una conferma dell'età `18+`              |
| Challenge 25 | Mostra una conferma in stile Challenge 25 `25?` |

<Warning>
  Le impostazioni del controllo dell'età dovrebbero essere utilizzate solo quando appropriate per prodotti soggetti a restrizioni o requisiti del locale.
</Warning>

#### Line clamp del nome della voce di menu

Il line clamp del nome della voce di menu controlla quante righe del nome dell'articolo vengono mostrate prima che il testo venga accorciato.

| Impostazione | Cosa controlla                                                    |
| ------------ | ----------------------------------------------------------------- |
| Righe        | Il numero massimo di righe mostrate per i nomi delle voci di menu |

Ad esempio, impostare questo su `1` mantiene i nomi degli articoli su una riga dove possibile. Aumentando il numero si consente ai nomi degli articoli più lunghi di essere mostrati più completamente.

#### Righe di descrizione dell'articolo

Le righe di descrizione dell'articolo controllano quante righe della descrizione dell'articolo vengono mostrate nell'anteprima della voce di menu.

| Impostazione | Cosa controlla                                                           |
| ------------ | ------------------------------------------------------------------------ |
| Righe        | Il numero massimo di righe di descrizione mostrate                       |
| `0`          | Nasconde le descrizioni degli articoli dall'anteprima della voce di menu |

Questo può essere utile se vuoi un layout di menu più pulito o se le descrizioni sono molto lunghe.

#### Suggerimenti per le voci di menu

* Controlla i prodotti con nomi lunghi.
* Controlla i prodotti con descrizioni lunghe.
* Rivedi gli articoli con modificatori o opzioni.
* Controlla gli articoli con immagini di prodotto.
* Controlla la visualizzazione degli allergeni dove vengono utilizzate informazioni sugli allergeni.
* Usa la visualizzazione delle scorte basse solo se l'inventario è accurato.
* Sii attento con le impostazioni del controllo dell'età e usale solo dove appropriato.
* Controlla il modale dell'articolo su desktop e mobile prima di salvare.
* Evita layout che rendano il menu troppo affollato su mobile.

<Warning>
  Le impostazioni delle voci di menu possono influenzare il percorso di ordinazione. Prima di salvare, apri alcuni prodotti di esempio e controlla che i clienti possano leggere chiaramente i dettagli degli articoli, selezionare i modificatori e aggiungere articoli al cestino.
</Warning>

<Note>
  Design & Branding controlla come vengono visualizzate le voci di menu. Nomi, prezzi, descrizioni, immagini, modificatori, allergeni, inventario e disponibilità dei prodotti potrebbero dover essere aggiornati dall'editor del menu o da un'altra area rilevante dell'admin.
</Note>

***

### Cestino

La sezione **Cestino** ti consente di personalizzare come appare il cestino del cliente durante il percorso di ordinazione.

Le impostazioni del cestino influenzano come i clienti rivedono gli articoli selezionati, visualizzano i prezzi e continuano al checkout.

<Note>
  Il cestino è una parte importante del checkout. Assicurati che i clienti possano rivedere chiaramente i loro articoli e continuare a effettuare l'ordine.
</Note>

#### Immagini degli articoli

Le immagini degli articoli controllano se le immagini dei prodotti vengono mostrate all'interno del cestino.

| Opzione | Cosa fa                                                               |
| ------- | --------------------------------------------------------------------- |
| Nessuna | Nasconde le immagini degli articoli nel cestino                       |
| Piccola | Mostra piccole immagini di articoli accanto agli articoli del cestino |
| Media   | Mostra immagini di dimensione media accanto agli articoli del cestino |
| Grande  | Mostra immagini più grandi accanto agli articoli del cestino          |

#### Personalizza le immagini degli articoli

L'opzione **Personalizza** ti consente di regolare finemente la dimensione dell'immagine del cestino.

| Impostazione             | Cosa controlla                                                           | Impatto sul cliente                                                            |
| ------------------------ | ------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
| Dimensione dell'immagine | Regola finemente la dimensione delle immagini degli articoli nel cestino | Controlla quanto spazio visivo occupano le immagini degli articoli nel cestino |

#### Prezzi

La visualizzazione dei prezzi controlla come appaiono i prezzi nel cestino.

| Opzione                        | Cosa fa                                                                                           |
| ------------------------------ | ------------------------------------------------------------------------------------------------- |
| Mostra tutti                   | Mostra i prezzi degli articoli e il totale del cestino                                            |
| Nascondi il totale del cestino | Nasconde il totale del cestino mostrando comunque i prezzi a livello di articolo dove disponibili |
| Nascondi tutti                 | Nasconde i prezzi nel cestino                                                                     |

<Warning>
  Sii attento quando nascondi i prezzi. I clienti dovrebbero comprendere chiaramente il costo del loro ordine prima del checkout.
</Warning>

#### Pulsante di checkout a larghezza automatica

L'impostazione **Pulsante di checkout a larghezza automatica** cambia la larghezza del pulsante di checkout su mobile.

Quando abilitato, il pulsante di checkout utilizza un pulsante flottante dimensionato in base al contenuto invece di un pulsante a larghezza piena su mobile.

| Impostazione                                | Cosa controlla                                                                               | Impatto sul cliente                                             |
| ------------------------------------------- | -------------------------------------------------------------------------------------------- | --------------------------------------------------------------- |
| Pulsante di checkout a larghezza automatica | Cambia il pulsante di checkout mobile da larghezza piena a dimensionato in base al contenuto | Influenza quanto è prominente il pulsante di checkout su mobile |

#### Suggerimenti per il cestino

* Usa immagini degli articoli se aiutano i clienti a riconoscere rapidamente i prodotti.
* Nascondi le immagini degli articoli se il cestino sembra troppo affollato.
* Mantieni i prezzi visibili a meno che non ci sia un motivo specifico per nasconderli.
* Controlla il cestino con più articoli prima di salvare.
* Controlla il cestino con modificatori o opzioni di articoli.
* Rivedi il pulsante di checkout su mobile.
* Assicurati che il pulsante di checkout sia facile da vedere e toccare.

<Warning>
  Le modifiche al cestino possono influenzare l'esperienza di checkout del cliente. Controlla sempre il cestino su mobile prima di salvare.
</Warning>

***

### Stile dell'intestazione

La sezione **Stile dell'intestazione** ti consente di personalizzare la parte superiore della tua pagina di ordinazione.

L'intestazione è una delle prime cose che i clienti vedono quando aprono la tua pagina di ordinazione, quindi ha un forte impatto sull'aspetto e la sensazione complessivi del tuo negozio.

<Tip>
  Hai bisogno di accedere allo Stile dell'intestazione? [Contatta il supporto storekit](/docs/it/getting-started/contact-support) per aggiungere questa funzionalità al tuo account. È richiesto un abbonamento **storekit+**.
</Tip>

#### Cosa puoi personalizzare

| Impostazione                                    | Cosa influenza                                                     |
| ----------------------------------------------- | ------------------------------------------------------------------ |
| Layout dell'intestazione                        | Come è disposta la parte superiore della tua pagina di ordinazione |
| Posizionamento del logo                         | Dove appare il tuo logo nell'intestazione                          |
| Visualizzazione dell'immagine dell'intestazione | Come appare la tua immagine di intestazione                        |
| Stile di navigazione                            | Come appare la navigazione in alto                                 |

#### Suggerimenti per l'intestazione

* Controlla che il tuo logo sia chiaramente visibile.
* Usa un'immagine di intestazione che funzioni bene sia su desktop che su mobile.
* Mantieni il contenuto importante dell'immagine centrato.
* Evita immagini di intestazione con testo vicino ai bordi.
* Controlla come appare l'intestazione dopo lo scroll, specialmente se viene utilizzata una barra di navigazione sticky.

<Note>
  Le immagini di intestazione possono essere visualizzate in modo diverso a seconda delle dimensioni dello schermo. Controlla sempre l'anteprima mobile prima di salvare.
</Note>

***

## Contenuto

Le impostazioni di Contenuto controllano informazioni aggiuntive mostrate sulla tua pagina di ordinazione.

La sezione Content include:

* Descrizione
* Avvisi
* Stato dell'ordine
* Sezioni personalizzate

***

### Descrizione

La sezione **Descrizione** ti consente di aggiornare la descrizione del locale mostrata sulla tua pagina di ordinazione.

Puoi usare la descrizione per presentare il tuo locale, spiegare la tua cucina o fornire utili informazioni per l'ordinazione.

| Impostazione                 | Cosa influenza                              | Impatto sul cliente                                                                   |
| ---------------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------- |
| Descrizione del negozio      | Testo descrittivo sul tuo locale            | Aiuta i clienti a comprendere il tuo negozio, la cucina o l'esperienza di ordinazione |
| Visibilità della descrizione | Se o come viene visualizzata la descrizione | Influenza quante informazioni vedono i clienti sulla pagina                           |

#### Suggerimenti per la descrizione

* Mantieni la descrizione chiara e concisa.
* Usa un linguaggio adatto al cliente.
* Evita paragrafi lunghi.
* Non includere informazioni che potrebbero diventare rapidamente obsolete a meno che non le manterrai aggiornate.
* Controlla come appare la descrizione su mobile.

#### Esempi di utilizzo

Puoi usare la descrizione per:

* Una breve introduzione al locale
* Tipo di cucina
* Istruzioni per l'ordinazione
* Messaggi del brand
* Informazioni utili sul servizio

***

### Avvisi

La sezione **Avvisi** ti consente di aggiungere messaggi rivolti al cliente alla tua pagina di ordinazione.

Gli avvisi possono essere utilizzati per aggiornamenti importanti, informazioni sul servizio o messaggi che i clienti dovrebbero vedere prima di ordinare.

#### Avviso del menu

L'**Avviso del menu** è mostrato in fondo al tuo menu.

Viene tipicamente utilizzato per informazioni come avvisi su allergeni, calorie o coperto.

| Impostazione        | Cosa influenza                                               | Impatto sul cliente                                                                 |
| ------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------- |
| Avviso del menu     | Messaggio mostrato in fondo al menu                          | Aiuta i clienti a vedere informazioni importanti relative al menu prima di ordinare |
| Formattazione       | Grassetto, corsivo, sottolineato e collegamenti ipertestuali | Ti consente di formattare testo importante e aggiungere link utili                  |
| Limite di caratteri | Lunghezza massima dell'avviso                                | Gli avvisi del menu supportano fino a `500` caratteri                               |

#### Messaggio di chiusura

Il **Messaggio di chiusura** viene visualizzato quando il tuo negozio è chiuso o in pausa.

Questo ti consente di personalizzare il messaggio che i clienti vedono quando l'ordinazione non è attualmente disponibile.

| Impostazione           | Cosa influenza                                               | Impatto sul cliente                                                                   |
| ---------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------- |
| Messaggio di chiusura  | Messaggio mostrato quando il negozio è chiuso o in pausa     | Spiega perché l'ordinazione non è disponibile o quando i clienti dovrebbero riprovare |
| Formattazione          | Grassetto, corsivo, sottolineato e collegamenti ipertestuali | Ti consente di formattare il messaggio e aggiungere link utili                        |
| Limite di caratteri    | Lunghezza massima del messaggio                              | I messaggi di chiusura supportano fino a `500` caratteri                              |
| Ripristina predefinito | Ripristina il messaggio di chiusura predefinito              | Utile se vuoi tornare al messaggio storekit standard                                  |

#### Formattazione e link

Entrambi gli avvisi supportano opzioni di formattazione di base:

* Grassetto
* Corsivo
* Sottolineato
* Collegamenti ipertestuali

I collegamenti ipertestuali possono essere utili per collegare a informazioni extra, come guide sugli allergeni, termini o un'altra pagina rivolta al cliente.

<Note>
  Assicurati che qualsiasi link che aggiungi sia corretto e rivolto al cliente prima di salvare.
</Note>

#### Suggerimenti per gli avvisi

* Mantieni gli avvisi brevi e chiari.
* Usa l'avviso del menu per informazioni relative al menu, come allergeni, calorie o coperto.
* Usa il messaggio di chiusura per spiegare perché l'ordinazione non è disponibile o quando i clienti dovrebbero riprovare.
* Rimuovi o aggiorna gli avvisi temporanei quando non sono più rilevanti.
* Controlla che gli avvisi non siano in conflitto con i tuoi orari di apertura, il menu o le impostazioni del servizio.
* Visualizza in anteprima gli avvisi su mobile prima di salvare.

<Warning>
  Evita di aggiungere avvisi obsoleti, poco chiari o che possano entrare in conflitto con altre impostazioni del negozio.
</Warning>

***

### Stato dell'ordine

La sezione **Stato dell'ordine** ti consente di personalizzare se viene mostrata una mappa sulla pagina di stato dell'ordine del cliente.

Questo può aiutare i clienti a comprendere informazioni relative alla posizione o alla consegna dopo aver effettuato un ordine.

#### Visibilità della mappa

La visibilità della mappa controlla se la mappa viene mostrata o nascosta sulla pagina di stato dell'ordine.

| Opzione  | Cosa fa                                             |
| -------- | --------------------------------------------------- |
| Visibile | Mostra la mappa sulla pagina di stato dell'ordine   |
| Nascosta | Nasconde la mappa dalla pagina di stato dell'ordine |

#### Mappa

Le impostazioni della mappa ti consentono di personalizzare come appare la mappa.

| Impostazione      | Cosa controlla                 | Impatto sul cliente                                  |
| ----------------- | ------------------------------ | ---------------------------------------------------- |
| Stile della mappa | Lo stile visivo della mappa    | Cambia come appare la mappa ai clienti               |
| Marker del pin    | Il marker mostrato sulla mappa | Aiuta a indicare la posizione pertinente sulla mappa |

#### Suggerimenti per lo stato dell'ordine

* Usa **Visibile** se la mappa aiuta i clienti a comprendere informazioni sulla posizione o la consegna.
* Usa **Nascosta** se la mappa non è necessaria per il tuo flusso di ordinazione.
* Controlla la pagina di stato dell'ordine dopo aver salvato, dove possibile.
* Assicurati che qualsiasi marker o posizione mostrata sulla mappa sia accurata.

<Note>
  La mappa può apparire solo dove è supportata dalla pagina di stato dell'ordine e dalla configurazione del tuo negozio.
</Note>

***

### Sezioni personalizzate

L'area **Sezioni personalizzate** ti consente di aggiungere blocchi di contenuto extra alla tua pagina di ordinazione.

Le sezioni personalizzate possono essere utilizzate per evidenziare promozioni, aggiungere contenuti visivi, condividere informazioni sul locale o includere messaggi aggiuntivi rivolti al cliente che non rientrano nella descrizione standard o negli avvisi.

<Note>
  Le sezioni personalizzate devono essere abilitate dal supporto storekit. [Contatta il supporto storekit](/docs/it/getting-started/contact-support) per aggiungere questa funzionalità al tuo account.
</Note>

#### Aggiungi una sezione

Puoi scegliere tra diversi modelli di sezione:

| Tipo di sezione | A cosa serve                                                                                   |
| --------------- | ---------------------------------------------------------------------------------------------- |
| Blank           | Aggiunge una sezione vuota che puoi personalizzare da zero                                     |
| Hero            | Aggiunge una grande sezione visiva con un'immagine di sfondo e testo del titolo                |
| Call to action  | Aggiunge una sezione progettata per incoraggiare i clienti a compiere un'azione, come ordinare |
| Info card       | Aggiunge un semplice blocco informativo, come orari di apertura o dettagli del servizio        |
| Announcement    | Aggiunge un blocco messaggio evidenziato, come una promozione o un aggiornamento importante    |
| About us        | Aggiunge una sezione visiva per condividere la storia del tuo locale o il messaggio del brand  |

***

#### Modifica delle sezioni personalizzate

Dopo aver aggiunto una sezione, puoi modificare il contenuto e il design dall'editor delle sezioni personalizzate.

I controlli disponibili possono includere:

| Controllo               | Cosa influenza                                                                                                        |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------- |
| Colore di sfondo        | Imposta il colore di sfondo della sezione                                                                             |
| Immagine di sfondo      | Aggiunge o cambia l'immagine della sezione                                                                            |
| Posizione dell'immagine | Controlla come è posizionata l'immagine di sfondo, come in alto, al centro o in basso                                 |
| Padding                 | Regola la spaziatura interna della sezione                                                                            |
| Overlay                 | Aggiunge un overlay di colore sopra l'immagine                                                                        |
| Bordo                   | Aggiunge o regola il bordo della sezione                                                                              |
| Margine                 | Regola la spaziatura sopra o sotto la sezione                                                                         |
| Formattazione del testo | Ti consente di formattare il testo usando grassetto, corsivo, sottolineato, intestazioni, allineamento, colore e link |
| Dimensione del testo    | Regola la dimensione del testo selezionato                                                                            |
| Link                    | Ti consente di aggiungere collegamenti ipertestuali al testo della sezione                                            |

<Note>
  Le sezioni personalizzate supportano i collegamenti ipertestuali. Assicurati che qualsiasi link tu aggiunga sia corretto e rivolto al cliente prima di salvare.
</Note>

***

#### Hero

La sezione **Hero** aggiunge un grande banner visivo alla pagina di ordinazione.

È utile per presentare il tuo locale, mostrare una forte immagine del brand o evidenziare un messaggio chiave vicino al menu.

Usi comuni includono:

* Messaggi di benvenuto
* Presentazioni del brand
* Campagne stagionali
* Immagini in evidenza
* Contenuti visivi di forte impatto

#### Suggerimenti per Hero

* Usa un'immagine landscape di alta qualità.
* Mantieni il contenuto importante dell'immagine centrato.
* Usa testo del titolo breve e chiaro.
* Controlla che il testo rimanga leggibile sopra l'immagine.
* Usa un overlay se l'immagine di sfondo rende difficile la lettura del testo.
* Controlla sia l'anteprima desktop che mobile prima di salvare.

<Warning>
  Le immagini Hero possono essere ritagliate in modo diverso a seconda delle dimensioni dello schermo. Evita di posizionare testo importante, loghi o volti vicino ai bordi dell'immagine.
</Warning>

***

#### Call to action

La sezione **Call to action** è progettata per incoraggiare i clienti a compiere un'azione specifica.

Di solito include un breve messaggio e un link o un prompt in stile pulsante, come ordinare ora o visualizzare un menu.

Usi comuni includono:

* Incoraggiare i clienti a ordinare
* Promuovere consegna o ritiro
* Collegare a una pagina specifica
* Evidenziare una campagna
* Indirizzare i clienti a un altro servizio

#### Suggerimenti per Call to action

* Mantieni il messaggio breve e diretto.
* Rendi l'azione chiara.
* Usa un link se i clienti devono andare altrove.
* Controlla che il testo call-to-action sia facile da leggere.
* Assicurati che la sezione appaia bene su mobile.

***

#### Info card

La sezione **Info card** è utile per contenuti informativi semplici.

Può essere utilizzata per mostrare dettagli che i clienti potrebbero aver bisogno prima di ordinare.

Usi comuni includono:

* Orari di apertura
* Informazioni sulla consegna
* Istruzioni per il ritiro
* Disponibilità del servizio
* Note sulla posizione
* Informazioni di contatto

#### Suggerimenti per Info card

* Mantieni le informazioni concise.
* Evita di aggiungere troppo testo.
* Assicurati che i dettagli corrispondano alle impostazioni del tuo negozio.
* Aggiorna la card se le informazioni cambiano.
* Controlla l'anteprima mobile prima di salvare.

***

#### Announcement

La sezione **Announcement** aggiunge un messaggio evidenziato alla pagina di ordinazione.

È utile per promozioni, aggiornamenti temporanei o messaggi importanti che dovrebbero risaltare.

Usi comuni includono:

* Offerte a tempo limitato
* Promozioni di consegna gratuita
* Aggiornamenti del servizio
* Messaggi festivi
* Modifiche temporanee
* Promemoria importanti

#### Suggerimenti per Announcement

* Mantieni gli annunci brevi.
* Rimuovi o aggiorna gli annunci temporanei quando non sono più rilevanti.
* Assicurati che i dettagli promozionali siano accurati.
* Controlla che l'annuncio non sia in conflitto con avvisi, impostazioni del menu o del servizio.
* Usa colori leggibili con forte contrasto.

<Warning>
  Evita di lasciare annunci temporanei attivi dopo che non sono più rilevanti.
</Warning>

***

#### About us

La sezione **About us** ti consente di condividere di più sul tuo locale, brand, cibo o storia.

È utile per aggiungere personalità alla tua pagina di ordinazione e aiutare i clienti a comprendere cosa rende unico il tuo locale.

Usi comuni includono:

* Storia del locale
* Messaggio del brand
* Filosofia del cibo
* Informazioni sull'approvvigionamento locale
* Messaggio alla community
* Background del ristorante

#### Suggerimenti per About us

* Mantieni la copy adatta al cliente.
* Evita paragrafi lunghi.
* Usa un'immagine forte che rifletta il tuo locale.
* Assicurati che il testo rimanga leggibile sullo sfondo.
* Controlla la sezione su mobile prima di salvare.

***

#### Suggerimenti per le sezioni personalizzate

* Usa le sezioni personalizzate per supportare l'esperienza di ordinazione, non per distrarre da essa.
* Mantieni il contenuto breve e pertinente.
* Evita di aggiungere troppe sezioni.
* Usa immagini di alta qualità.
* Controlla il contrasto del testo sopra le immagini.
* Assicurati che i collegamenti ipertestuali funzionino prima di salvare.
* Rivedi l'intera pagina di ordinazione su mobile prima di salvare.

<Warning>
  Troppe sezioni personalizzate possono far sembrare la pagina di ordinazione disordinata. Mantieni la pagina focalizzata sull'aiutare i clienti a sfogliare il menu ed effettuare un ordine.
</Warning>

***

## Migliori pratiche

### Inizia con i preset, poi personalizza

Per i colori, inizia con un preset se vuoi un tema veloce, poi regola manualmente i singoli campi di colore.

Attiva **Show contrast warnings** durante la modifica in modo da poter verificare se le combinazioni di colori di testo e sfondo sono facili da leggere.

### Controlla gli elementi interattivi

Prima di salvare, controlla azioni importanti del cliente come:

* Aggiungi al cestino
* Selezione dei modificatori
* Card dei modificatori selezionati
* Visualizza cestino
* Checkout
* Pagina di stato dell'ordine
* Link delle sezioni personalizzate

### Controlla i contenuti sensibili o soggetti a restrizioni

Se usi controlli dell'età, visualizzazione degli allergeni, visualizzazione delle scorte basse o informazioni sui macronutrienti, assicurati che le informazioni siano accurate prima di salvare.

Presta molta attenzione a:

* Etichette degli allergeni
* Livelli di inventario
* Articoli con controllo dell'età
* Informazioni nutrizionali o sui macronutrienti
* Visibilità dei prezzi nel cestino

### Mantieni le sezioni personalizzate focalizzate

Le sezioni personalizzate dovrebbero supportare l'esperienza di ordinazione.

Usale per informazioni utili rivolte al cliente come:

* Promozioni
* Orari di apertura
* Informazioni su consegna o ritiro
* Storia del locale
* Informazioni su allergeni o servizio
* Call to action

Evita di aggiungere troppe sezioni, poiché questo può rendere il menu più difficile da sfogliare.

### Controlla l'anteprima mobile

La maggior parte dei clienti ordina da dispositivi mobili, quindi controlla sempre l'anteprima mobile prima di salvare.

Presta molta attenzione a:

* Ritaglio dell'immagine dell'intestazione
* Visibilità del logo
* Layout del menu
* Card delle voci di menu
* Modali degli articoli
* Selezione dei modificatori
* Visibilità del cestino
* Layout del pulsante di checkout
* Leggibilità dei pulsanti
* Avvisi
* Sezioni personalizzate
* Mappa dello stato dell'ordine, dove utilizzata

### Usa immagini chiare

Per i migliori risultati:

* Usa immagini quadrate per loghi e favicon.
* Usa immagini landscape per le intestazioni.
* Mantieni il contenuto importante dell'immagine centrato.
* Evita immagini con molto testo.
* Evita di caricare immagini sfocate o di bassa qualità.

### Mantieni il testo conciso

Testi lunghi possono rendere la tua pagina di ordinazione più difficile da usare, specialmente su mobile.

Cerca di mantenere quanto segue breve e chiaro:

* Descrizioni del negozio
* Avvisi
* Sezioni personalizzate
* Descrizioni dei prodotti

### Priorità alla leggibilità

Quando scegli font e colori, assicurati che i clienti possano leggere facilmente:

* Nomi dei prodotti
* Descrizioni dei prodotti
* Prezzi
* Avvisi
* Totali del cestino
* Pulsanti di checkout

### Mantieni chiaro il percorso di ordinazione

Le modifiche al design dovrebbero rendere l'ordinazione più facile, non più difficile.

Prima di salvare, controlla che i clienti possano facilmente:

* Sfogliare il menu
* Comprendere le opzioni dei prodotti
* Aggiungere articoli al cestino
* Visualizzare il loro cestino
* Continuare al checkout
* Effettuare un ordine

***

## Risoluzione dei problemi

### Una sezione è bloccata o non disponibile

Alcune sezioni di Design & Branding sono disponibili solo con **storekit+**.

Se una sezione è bloccata nel tuo admin, [contatta il supporto storekit](/docs/it/getting-started/contact-support) per aggiungere questa funzionalità al tuo account. È richiesto un abbonamento **storekit+**.

### Il mio testo è difficile da leggere sopra un'immagine

Se il testo è difficile da leggere sopra un'immagine di intestazione, sezione hero o sezione personalizzata, prova:

* Usare un overlay più scuro o più chiaro
* Cambiare il colore del testo
* Scegliere un'immagine più semplice
* Mantenere il testo importante lontano dalle aree occupate dell'immagine
* Controllare la sezione su mobile

### Il mio menu sembra affollato su mobile

Se il menu sembra troppo affollato, controlla:

* Colonne mobile
* Dimensione dell'immagine
* Direzione dell'articolo
* Immagini grandi
* Righe di descrizione dell'articolo
* Line clamp del nome della voce di menu
* Immagini di navigazione delle categorie

Utilizzare meno colonne, immagini più piccole o anteprime di descrizione più brevi può rendere il menu più facile da sfogliare.

### Il mio modale dell'articolo sembra troppo grande o difficile da usare

Controlla:

* Stile dell'immagine del modale
* Vista desktop del modale
* Posizione del contenuto
* Stile dei modificatori
* Bordo del modale
* Dimensione dell'immagine dell'articolo
* Anteprima mobile

Apri alcuni prodotti con modificatori prima di salvare.

### Le opzioni dei modificatori sono difficili da comprendere

Controlla lo stile dei modificatori selezionato.

Se le opzioni dei modificatori sono difficili da scansionare, prova un layout più semplice o assicurati che i nomi e le immagini dei modificatori siano chiari.

### Le informazioni su scorte basse o inventario sembrano sbagliate

La visualizzazione delle scorte basse e dell'inventario dovrebbe essere utilizzata solo se i livelli di inventario sono accurati e attivamente mantenuti.

Se i numeri sembrano sbagliati, controlla le impostazioni dell'inventario degli articoli prima di cambiare lo stile di visualizzazione.

### Le informazioni sugli allergeni sono mancanti o poco chiare

La visualizzazione degli allergeni controlla come appaiono le informazioni sugli allergeni, ma i dettagli degli allergeni stessi potrebbero dover essere gestiti nelle impostazioni pertinenti della voce di menu.

Controlla che le informazioni sugli allergeni siano accurate prima di fare affidamento sulla visualizzazione.

### Il cestino non mostra i prezzi come previsto

Controlla l'impostazione **Prezzi** nella sezione Cestino.

I prezzi del cestino possono essere impostati su:

* Mostra tutti
* Nascondi il totale del cestino
* Nascondi tutti

Sii attento quando nascondi i prezzi, poiché i clienti dovrebbero comprendere chiaramente il costo del loro ordine prima del checkout.

### Il mio link della sezione personalizzata non funziona

Controlla che il collegamento ipertestuale sia corretto e rivolto al cliente.

Assicurati che il link includa l'URL completo dove necessario, poi salva e testalo sulla pagina di ordinazione live.

### La mappa dello stato dell'ordine non appare

Controlla:

* La visibilità della mappa è impostata su **Visibile**
* La pagina di stato dell'ordine supporta la mappa per la configurazione del tuo negozio
* Il marker della mappa o la posizione sono stati configurati correttamente

### Le mie modifiche appaiono in anteprima ma non sulla pagina di ordinazione live

Assicurati di aver cliccato su **Save**. L'anteprima si aggiorna man mano che effettui modifiche, ma la tua pagina di ordinazione live non si aggiornerà fino a quando le modifiche non saranno salvate.

Dopo aver salvato, aggiorna la tua pagina di ordinazione live e verifica di visualizzare il negozio corretto.

### La mia immagine sembra ritagliata

Alcune immagini, specialmente le immagini di intestazione, si ritagliano automaticamente per adattarsi a diverse dimensioni dello schermo.

Controlla l'anteprima mobile e usa un'immagine dove il contenuto più importante è centrato.

<Note>
  Evita di posizionare testo importante, loghi o volti vicino al bordo delle immagini di intestazione, poiché potrebbero essere ritagliati su schermi più piccoli.
</Note>

### Il mio logo o favicon sembra distorto

Usa un'immagine quadrata per loghi e favicon.

I file PNG trasparenti di solito funzionano meglio per i loghi.

### I miei colori sono difficili da leggere

Controlla il contrasto tra testo, sfondo e pulsanti.

I clienti dovrebbero essere in grado di leggere chiaramente:

* Nomi dei prodotti
* Descrizioni dei prodotti
* Prezzi
* Avvisi
* Totali del cestino
* Pulsanti di checkout

### I miei pulsanti non si distinguono

I colori dei pulsanti dovrebbero essere chiaramente visibili sullo sfondo della pagina.

Controlla azioni importanti del cliente come:

* Aggiungi al cestino
* Visualizza cestino
* Checkout
* Effettua ordine

### La versione mobile non sembra corretta

Passa all'anteprima mobile e controlla:

* Ritaglio dell'immagine dell'intestazione
* Visibilità del logo
* Navigazione delle categorie del menu
* Layout della card del prodotto
* Visibilità del cestino
* Leggibilità dei pulsanti
* Avvisi e sezioni personalizzate

### Il mio avviso non è più rilevante

Se un avviso è stato aggiunto per un aggiornamento temporaneo, ricorda di rimuoverlo o aggiornarlo una volta che non si applica più.

Esempi includono:

* Aggiornamenti sugli orari festivi
* Avvisi di ritardo nella consegna
* Avvisi di chiusura temporanea
* Avvisi solo ritiro
* Avvisi di problemi in cucina

### La mia pagina sembra troppo affollata

Troppo contenuto può rendere la pagina di ordinazione più difficile da usare.

Controlla se puoi accorciare o rimuovere:

* Descrizioni lunghe
* Più avvisi
* Troppe sezioni personalizzate
* Immagini con molto testo
* Informazioni ripetute

***

## Quando contattare il supporto storekit

Contatta il supporto storekit se:

* Un'impostazione non viene salvata.
* La pagina live non si aggiorna dopo il salvataggio.
* Una sezione di Design & Branding è bloccata e vuoi abilitarla.
* Vuoi aggiungere una funzionalità che richiede **storekit+**.
* Non riesci a trovare l'opzione di design di cui hai bisogno.
* Un'immagine o un colore non viene visualizzato correttamente.
* Testo o pulsanti rimangono difficili da leggere dopo la modifica.
* La tua pagina di ordinazione sembra rotta dopo aver fatto modifiche.
* Una sezione personalizzata non viene visualizzata come previsto.
* Un collegamento ipertestuale in un avviso o sezione personalizzata non funziona.
* La mappa dello stato dell'ordine non appare come previsto.
* Hai bisogno di aiuto per personalizzare un elemento di design non disponibile in Design & Branding.


## Related topics

- [1. Crea il tuo negozio](/docs/it/getting-started/launch/create-your-store.md)
- [Scarica e stampa i QR code per il tuo store storekit](/docs/it/guides/store-settings/qr-codes.md)
- [Informativa sulla privacy e termini personalizzati](/docs/it/guides/store-settings/custom-policies.md)
- [4. Configura i metodi di fulfilment e la pianificazione degli ordini](/docs/it/getting-started/launch/configure-fulfillment.md)
- [Avvisi dello store e messaggi di store chiuso](/docs/it/guides/store-settings/store-notices.md)
