Comment utiliser des mises en page de bannière différentes sur mobile et ordinateur (nouvelle version)

Vue d’ensemble

De nombreux contrôles Layout et Style prennent en charge une surcharge mobile, afin que les téléphones ne soient pas forcés d'utiliser la boîte de dialogue desktop.

Sur desktop, vous pouvez utiliser une notice Wide ou Box. Sur téléphone, cette même largeur peut couvrir la page produit. La New Banner vous permet de garder le desktop tel quel et de choisir une Bar, une taille réduite ou une position différente sur mobile.

Les contrôles qui la prennent en charge affichent une petite paire d'icônes desktop et mobile. L'icône desktop modifie la valeur partagée et l'icône mobile modifie une valeur propre au mobile (Mobile same as desktop contre Mobile different from desktop).

Avant de commencer

• Vérifiez que vous êtes sur Cookie banner avec les nouveaux onglets de bannière (Layout, Content, Style, Advanced).
• Utilisez le bouton Desktop / Mobile de l'aperçu pendant vos modifications. Consultez Utiliser le mode Aperçu en direct de la bannière.

Définir le mobile indépendamment

1. Ouvrez Shopify Admin > Apps > Pandectes GDPR Compliance.
2. Accédez à Cookie banner.
3. Ouvrez Layout (et Style si vous voulez aussi des couleurs, un padding ou des logos différents sur mobile).
4. Trouvez un contrôle avec la paire d'icônes desktop et mobile (par exemple Reverse order sous Buttons).
5. Cliquez sur l'icône mobile pour qu'elle devienne Mobile different from desktop.
6. Définissez la valeur mobile (apparence, position, taille, disposition des boutons, etc.).
7. Répétez pour chaque contrôle que vous voulez surcharger.
8. Enregistrez.

Surcharges Layout courantes :

• Cookie notice Appearance (Box, Bar, Wide)
• Position
• Width (XS à XL)
• Disposition des boutons
• Apparence des Preferences (box, drawer, sidepanel)

Surcharges Style courantes :

• Espacement, rayon et float
• Taille de police
• Taille des boutons

Configuration mobile suggérée

• Privilégiez une Bar en bas sur mobile pour que les images produits restent visibles.
• Gardez Accept et Decline sur une même ligne lorsque c'est possible.
• Vérifiez la position du widget de consentement pour qu'il ne recouvre pas Add to cart ni une bulle de chat.

Vérifier

1. Prévisualisez Mobile dans l'application.
2. Ouvrez la boutique sur un téléphone ou en mode appareil de Chrome.
3. Confirmez la première visite (bannière) et la visite de retour (widget).

Articles associés

• Personnaliser la mise en page de la bannière (New Version)
• Comment personnaliser le style, les couleurs, les logos et les boutons de la bannière (New Version)

Mis à jour le : 27/10/2026