> ## 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).

# Cómo usar diseños de banner diferentes en móvil y en escritorio (nueva versión)

### Descripción general

Muchos controles de Layout y Style admiten una **sobrescritura para móvil**, de modo que los teléfonos no tengan que usar el diálogo de escritorio.

En escritorio puedes usar un aviso **Wide** o **Box**. En un teléfono, ese mismo ancho puede tapar la página del producto. El nuevo banner te permite dejar el escritorio como está y elegir una **Bar**, un tamaño menor o una posición distinta en móvil.

Las sobrescrituras se guardan como **Mobile same as desktop** frente a **Mobile different from desktop**.

||| **Nuevo banner.** Para tiendas con la insignia **New version** en **Cookie banner**. Si usas el banner Legacy, consulta [How to switch to the new banner or switch back to the previous version](/es/article/como-cambiar-al-nuevo-banner-o-volver-a-la-version-anterior-1wiw894/).

### Antes de empezar

* Confirma que estás en **Cookie banner** con la insignia **New version**.
* Usa el interruptor **Desktop / Mobile** del visor de vista previa mientras editas. Consulta [Using the Live Banner Preview mode](/es/article/uso-del-modo-de-vista-previa-del-banner-en-vivo-80811b/).

### Define el móvil de forma independiente

1. Abre **Shopify Admin > Apps > Pandectes GDPR Compliance**.
2. Ve a **Cookie banner**.
3. Abre **Layout** (y **Style** si también quieres colores, relleno o logotipos distintos en móvil).
4. Busca un control que muestre **Mobile same as desktop**.
5. Cámbialo a **Mobile different from desktop**.
6. Establece el valor para móvil (apariencia, posición, tamaño, disposición de los botones, etc.).
7. Repite el proceso para cada control que quieras sobrescribir.
8. Haz clic en Save.

![Apariencia, posición y ancho del aviso de cookies e iconos de sobrescritura para móvil](https://images.pandect.es/knowledge-base/how-to-use-different-banner-layouts-on-mobile-and-desktop-new-version-2.png =900xauto)

Sobrescrituras habituales de Layout:

* **Appearance** del aviso de cookies (Box, Bar, Wide)
* **Position**
* **Width** (de XS a XL)
* Disposición de los botones
* Apariencia de las preferencias (box, drawer, sidepanel)

Sobrescrituras habituales de Style:

* Espaciado, radio y float
* Tamaño de fuente
* Tamaño de los botones

### Configuración móvil sugerida

* Prefiere una **Bar** en la parte **inferior** en móvil para que las imágenes del producto sigan visibles.
* Mantén **Accept** y **Decline** en una sola fila cuando puedas.
* Revisa la posición del **consent widget** para que no tape **Add to cart** ni una burbuja de chat.

### Verificar

1. Previsualiza **Mobile** en la app.
2. Abre la tienda en un teléfono o en el modo de dispositivo de Chrome.
3. Confirma tanto la primera visita (banner) como la visita recurrente (widget).

### Artículos relacionados

* [Customizing the layout of the banner (New Version)](/es/article/personalizacion-del-diseno-del-banner-nueva-version-1ia6pld/)
* [How to customize banner style, colors, logos, and buttons (New Version)](/es/article/como-personalizar-el-estilo-los-colores-los-logotipos-y-los-botones-del-banner-nueva-version-oh67be/)