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

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

### Vue d'ensemble

De nombreux contrôles de Layout et de Style prennent en charge un **remplacement mobile**, afin que les téléphones ne soient pas obligés d'utiliser la boîte de dialogue du bureau.

Sur ordinateur, vous pouvez utiliser un avis **Wide** ou **Box**. Sur un téléphone, cette même largeur peut recouvrir la page produit. Le nouveau bandeau (New Banner) vous permet de garder le bureau tel quel et de choisir une **Bar**, une taille plus petite ou une autre position sur mobile.

Les remplacements sont enregistrés sous la forme **Mobile same as desktop** ou **Mobile different from desktop**.

||| **New Banner.** Pour les boutiques qui affichent le badge **New version** sur **Settings > Banner**. Pour l'ancienne bannière (Legacy Banner), consultez [Comment passer à la nouvelle bannière ou revenir à la version précédente](/fr/article/comment-passer-a-la-nouvelle-banniere-ou-revenir-a-la-version-precedente-12cd6wh/).

### Avant de commencer

* Vérifiez que vous êtes sur **Settings > Banner** avec le badge **New version**.
* Utilisez le basculement **Desktop / Mobile** de l'aperçu pendant que vous modifiez. Consultez [Utiliser le mode d'aperçu en direct de la bannière](/fr/article/utiliser-le-mode-apercu-en-direct-de-la-banniere-1d29brr/).

### Définir le mobile indépendamment

1. Ouvrez **Shopify Admin > Apps > Pandectes GDPR Compliance**.
2. Allez dans **Settings > Banner**.
3. Ouvrez **Layout** (et **Style** si vous souhaitez aussi des couleurs, des marges ou des logos différents sur mobile).
4. Trouvez un contrôle qui affiche **Mobile same as desktop**.
5. Passez-le sur **Mobile different from desktop**.
6. Définissez la valeur mobile (apparence, position, taille, disposition des boutons, etc.).
7. Répétez l'opération pour chaque contrôle que vous souhaitez remplacer.
8. Enregistrez.

![Apparence, position et largeur de l'avis de cookies, et icônes de remplacement mobile](https://images.pandect.es/knowledge-base/how-to-use-different-banner-layouts-on-mobile-and-desktop-new-version-2.png =900xauto)

Remplacements courants dans Layout :

* **Appearance** de l'avis de cookies (Box, Bar, Wide)
* **Position**
* **Width** (XS à XL)
* Disposition des boutons
* Apparence des préférences (box, drawer, sidepanel)

Remplacements courants dans Style :

* Espacement, rayon et flottant
* Taille de police
* Taille des boutons

### Configuration mobile suggérée

* Préférez une **Bar** en **bas** sur mobile pour que les images produit restent visibles.
* Gardez **Accept** et **Decline** sur une seule ligne quand c'est possible.
* Vérifiez la position du **consent widget** 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 en ligne sur un téléphone ou en mode appareil de Chrome.
3. Confirmez à la fois la première visite (bannière) et la visite suivante (widget).

### Articles associés

* [Personnaliser la mise en page de la bannière (nouvelle version)](/fr/article/personnaliser-la-disposition-de-la-banniere-nouvelle-version-1no3oem/)
* [Comment personnaliser le style, les couleurs, les logos et les boutons de la bannière (nouvelle version)](/fr/article/comment-personnaliser-le-style-les-couleurs-les-logos-et-les-boutons-de-la-banniere-nouvelle-version-wahzcw/)