> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.pandectes.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Come usare layout del banner diversi su mobile e desktop (nuova versione)

### Panoramica

Molti controlli di Layout e Style supportano un **override per mobile**, così gli smartphone non sono costretti a usare il dialogo desktop.

Su desktop potresti usare un notice **Wide** o **Box**. Su uno smartphone la stessa larghezza può coprire la pagina del prodotto. Il nuovo banner ti permette di lasciare il desktop com'è e di scegliere su mobile una **Bar**, una dimensione più piccola o una posizione diversa.

Gli override vengono memorizzati come **Mobile same as desktop** oppure **Mobile different from desktop**.

||| **Nuovo banner.** Per i negozi che mostrano il badge **New version** in **Cookie banner**. Se usi il banner Legacy, vedi [How to switch to the new banner or switch back to the previous version](/it/article/come-passare-al-nuovo-banner-o-tornare-alla-versione-precedente-1jz12qe/).

### Prima di iniziare

* Verifica di essere in **Cookie banner** con il badge **New version**.
* Usa l'interruttore **Desktop / Mobile** del previewer mentre modifichi. Vedi [Using the Live Banner Preview mode](/it/article/usare-la-modalita-live-banner-preview-9byveb/).

### Imposta il mobile in modo indipendente

1. Apri **Shopify Admin > Apps > Pandectes GDPR Compliance**.
2. Vai su **Cookie banner**.
3. Apri **Layout** (e **Style** se vuoi anche colori, padding o loghi diversi su mobile).
4. Trova un controllo che mostra **Mobile same as desktop**.
5. Cambialo in **Mobile different from desktop**.
6. Imposta il valore per mobile (aspetto, posizione, dimensione, disposizione dei pulsanti e così via).
7. Ripeti per ogni controllo che vuoi sovrascrivere.
8. Clicca su **Save**.

![Aspetto, posizione, larghezza del cookie notice e icone di override per mobile](https://images.pandect.es/knowledge-base/how-to-use-different-banner-layouts-on-mobile-and-desktop-new-version-2.png =900xauto)

Override comuni in Layout:

* **Appearance** del cookie notice (Box, Bar, Wide)
* **Position**
* **Width** (da XS a XL)
* Disposizione dei pulsanti
* Aspetto delle preferences (box, drawer, sidepanel)

Override comuni in Style:

* Spaziatura, raggio e float
* Dimensione del font
* Dimensione dei pulsanti

### Configurazione mobile suggerita

* Preferisci una **Bar** in **basso** su mobile, così le immagini dei prodotti restano visibili.
* Mantieni **Accept** e **Decline** su un'unica riga quando puoi.
* Controlla la posizione del **consent widget**, in modo che non copra **Add to cart** o un fumetto della chat.

### Verifica

1. Visualizza l'anteprima **Mobile** nell'app.
2. Apri lo storefront su uno smartphone o nella modalità dispositivo di Chrome.
3. Verifica sia la prima visita (banner) sia la visita successiva (widget).

### Articoli correlati

* [Customizing the layout of the banner (New Version)](/it/article/personalizzare-il-layout-del-banner-nuova-versione-xls0ao/)
* [How to customize banner style, colors, logos, and buttons (New Version)](/it/article/come-personalizzare-stile-colori-loghi-e-pulsanti-del-banner-nuova-versione-11j5cp2/)