Este artículo también está disponible en:

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

Resumen

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

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

Los controles que lo admiten muestran un par de iconos de escritorio y móvil. El icono de escritorio edita el valor compartido y el icono de móvil edita un valor solo para móvil (Mobile same as desktop frente a Mobile different from desktop).

Nuevo banner. Para tiendas con el nuevo banner (Cookie banner muestra las pestañas Layout, Content, Style y Advanced). En el banner Legacy, consulta Cómo cambiar al nuevo banner o volver a la versión anterior.

Antes de empezar

Confirma que estás en Cookie banner con las pestañas del nuevo banner (Layout, Content, Style, Advanced).
Usa el selector Desktop / Mobile de la vista previa mientras editas. Consulta Uso del modo de vista previa en vivo del banner.

Configura el móvil por separado

Abre Shopify Admin > Apps > Pandectes GDPR Compliance.
Ve a Cookie banner.
Abre Layout (y Style si también quieres colores, relleno o logotipos distintos en móvil).
Busca un control con el par de iconos de escritorio y móvil (por ejemplo Reverse order en Buttons).
Haz clic en el icono de móvil para que pase a ser Mobile different from desktop.
Configura el valor para móvil (apariencia, posición, tamaño, disposición de botones, etc.).
Repite el proceso para cada control que quieras modificar.
Guarda.

Excepciones habituales de Layout:

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

Excepciones habituales de Style:

Espaciado, radio y flotación
Tamaño de fuente
Tamaño de botón

Configuración sugerida para móvil

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

Verificar